added data-* attributes to options table, close #297

docs/index.jade

@@ -137,6 +137,7 @@ html(lang='en')
             thead
               tr
                 th Name
+                th Attribute
                 th Type
                 th Description
                 th Values
@@ -144,34 +145,39 @@ html(lang='en')
             tbody
               tr
                 td state
+                td checked
                 td Boolean
                 td The checkbox state
                 td true, false
-                td 'checked' attribute or true
+                td true
               tr
                 td size
+                td data-size
                 td String
                 td The checkbox state
                 td null, 'mini', 'small', 'normal', 'large'
                 td null
               tr
                 td animate
+                td data-animate
                 td Boolean
                 td Animate the switch
                 td true, false
                 td true
               tr
+                td disabled
                 td disabled
                 td Boolean
                 td Disable state
                 td true, false
-                td 'disabled' attribute or false
+                td false
               tr
+                td readonly
                 td readonly
                 td Boolean
                 td Readonly state
                 td true, false
-                td 'readonly' attribute or false
+                td false
               tr
                 td indeterminate
                 td Boolean
@@ -180,54 +186,63 @@ html(lang='en')
                 td false
               tr
                 td onColor
+                td data-on-color
                 td String
                 td Color of the left side of the switch
                 td 'primary', 'info', 'success', 'warning', 'danger', 'default'
                 td 'primary'
               tr
                 td offColor
+                td data-off-color
                 td String
                 td Color of the right side of the switch
                 td 'primary', 'info', 'success', 'warning', 'danger', 'default'
                 td 'default'
               tr
                 td onText
+                td data-on-text
                 td String
                 td Text of the left side of the switch
                 td String
                 td 'ON'
               tr
                 td offText
+                td data-off-text
                 td String
                 td Text of the right side of the switch
                 td String
                 td 'OFF'
               tr
                 td labelText
+                td data-label-text
                 td String
                 td Text of the center handle of the switch
                 td String
                 td ' '
               tr
                 td baseClass
+                td data-base-class
                 td String
                 td Global class prefix
                 td String
                 td 'bootstrap-switch'
               tr
                 td wrapperClass
+                td data-wrapper-class
                 td String | Array
                 td Container element class(es)
                 td String | Array
                 td 'wrapper'
               tr
                 td onInit
+                td
                 td Function
                 td Callback function to execute on initialization
                 td Function
                 td: pre: code.javascript function(event, state) {}
               tr
                 td onSwitchChange
+                td
                 td Function
                 td Callback function to execute on switch state change
                 td Function
@@ -338,10 +353,10 @@ html(lang='en')
 
           .alert.alert-warning
             p
-              | All the options are accepted only using <code>data-*</code> attributes on the input element.<br>
-              | The exceptions are <code>checked</code>, <code>disabled</code> and <code>readonly</code> which are
-              | proprietary input attributes.<br>
-              | There isn't any way to specify the options in JavaScript during initialization.
+              | All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+              | <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+              | default HTML input attributes.<br>
+              | Therefore, there is not any way to specify the options in JavaScript during initialization.
 
           table.table.table-bordered.table-striped.table-responsive
             thead

index.html

@@ -121,6 +121,7 @@
             <thead>
               <tr>
                 <th>Name</th>
+                <th>Attribute</th>
                 <th>Type</th>
                 <th>Description</th>
                 <th>Values</th>
@@ -130,13 +131,15 @@
             <tbody>
               <tr>
                 <td>state</td>
+                <td>checked</td>
                 <td>Boolean</td>
                 <td>The checkbox state</td>
                 <td>true, false</td>
-                <td>'checked' attribute or true</td>
+                <td>true</td>
               </tr>
               <tr>
                 <td>size</td>
+                <td>data-size</td>
                 <td>String</td>
                 <td>The checkbox state</td>
                 <td>null, 'mini', 'small', 'normal', 'large'</td>
@@ -144,24 +147,27 @@
               </tr>
               <tr>
                 <td>animate</td>
+                <td>data-animate</td>
                 <td>Boolean</td>
                 <td>Animate the switch</td>
                 <td>true, false</td>
                 <td>true</td>
               </tr>
               <tr>
+                <td>disabled</td>
                 <td>disabled</td>
                 <td>Boolean</td>
                 <td>Disable state</td>
                 <td>true, false</td>
-                <td>'disabled' attribute or false</td>
+                <td>false</td>
               </tr>
               <tr>
+                <td>readonly</td>
                 <td>readonly</td>
                 <td>Boolean</td>
                 <td>Readonly state</td>
                 <td>true, false</td>
-                <td>'readonly' attribute or false</td>
+                <td>false</td>
               </tr>
               <tr>
                 <td>indeterminate</td>
@@ -172,6 +178,7 @@
               </tr>
               <tr>
                 <td>onColor</td>
+                <td>data-on-color</td>
                 <td>String</td>
                 <td>Color of the left side of the switch</td>
                 <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
@@ -179,6 +186,7 @@
               </tr>
               <tr>
                 <td>offColor</td>
+                <td>data-off-color</td>
                 <td>String</td>
                 <td>Color of the right side of the switch</td>
                 <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
@@ -186,6 +194,7 @@
               </tr>
               <tr>
                 <td>onText</td>
+                <td>data-on-text</td>
                 <td>String</td>
                 <td>Text of the left side of the switch</td>
                 <td>String</td>
@@ -193,6 +202,7 @@
               </tr>
               <tr>
                 <td>offText</td>
+                <td>data-off-text</td>
                 <td>String</td>
                 <td>Text of the right side of the switch</td>
                 <td>String</td>
@@ -200,6 +210,7 @@
               </tr>
               <tr>
                 <td>labelText</td>
+                <td>data-label-text</td>
                 <td>String</td>
                 <td>Text of the center handle of the switch</td>
                 <td>String</td>
@@ -207,6 +218,7 @@
               </tr>
               <tr>
                 <td>baseClass</td>
+                <td>data-base-class</td>
                 <td>String</td>
                 <td>Global class prefix</td>
                 <td>String</td>
@@ -214,6 +226,7 @@
               </tr>
               <tr>
                 <td>wrapperClass</td>
+                <td>data-wrapper-class</td>
                 <td>String | Array</td>
                 <td>Container element class(es)</td>
                 <td>String | Array</td>
@@ -221,6 +234,7 @@
               </tr>
               <tr>
                 <td>onInit</td>
+                <td></td>
                 <td>Function</td>
                 <td>Callback function to execute on initialization</td>
                 <td>Function</td>
@@ -230,6 +244,7 @@
               </tr>
               <tr>
                 <td>onSwitchChange</td>
+                <td></td>
                 <td>Function</td>
                 <td>Callback function to execute on switch state change</td>
                 <td>Function</td>
@@ -348,10 +363,10 @@ $.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
           <h2 class="page-header">Options</h2>
           <div class="alert alert-warning">
             <p>
-              All the options are accepted only using <code>data-*</code> attributes on the input element.<br>
-              The exceptions are <code>checked</code>, <code>disabled</code> and <code>readonly</code> which are
-              proprietary input attributes.<br>
-              There isn't any way to specify the options in JavaScript during initialization.
+              All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+              <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+              default HTML input attributes.<br>
+              Therefore, there is not any way to specify the options in JavaScript during initialization.
             </p>
           </div>
           <table class="table table-bordered table-striped table-responsive">