| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | Twitter Bootstrap Wizard |
| A | 2 | ============================ |
| 3 | ||
| 4 | This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. | |
| 5 | ||
| 6 | <a href="http://vadimg.com/twitter-bootstrap-wizard-example/" target="_blank">Website & Demo</a> | |
| 7 | ||
| 8 | <a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a> | |
| 9 | ||
| 10 | Code Examples | |
| 11 | ------------- | |
| 12 | ||
| 13 | ```javascript | |
| 14 | //basic wizard | |
| 15 | $(document).ready(function() { | |
| 16 | $('#rootwizard').bootstrapWizard(); | |
| 17 | }); | |
| 18 | ``` | |
| 19 | ||
| 20 | ```javascript | |
| 21 | //wizard with options and events | |
| 22 | $(document).ready(function() { | |
| 23 | $('#rootwizard').bootstrapWizard({ | |
| 24 | tabClass: 'nav nav-pills', | |
| 25 | onNext: function(tab, navigation, index) { | |
| 26 | alert('next'); | |
| 27 | } | |
| 28 | }); | |
| 29 | }); | |
| 30 | ``` | |
| 31 | ||
| 32 | ```javascript | |
| 33 | //calling a method | |
| 34 | $('#rootwizard').bootstrapWizard('show',3); | |
| 35 | ``` | |
| 36 | ||
| 37 | Options | |
| 38 | ------- | |
| 39 | <table class="table table-bordered table-striped"> | |
| 40 | <thead> | |
| 41 | <tr> | |
| 42 | <th>Key</th> | |
| 43 | <th>Default</th> | |
| 44 | <th>Description</th> | |
| 45 | </tr> | |
| 46 | </thead> | |
| 47 | <tbody> | |
| 48 | <tr> | |
| 49 | <td>tabClass</td> | |
| 50 | <td>'nav nav-pills'</td> | |
| 51 | <td>ul navigation class</td> | |
| 52 | </tr> | |
| 53 | <tr> | |
| 54 | <td>nextSelector</td> | |
| 55 | <td>'.wizard li.next'</td> | |
| 56 | <td>next element selector</td> | |
| 57 | </tr> | |
| 58 | <tr> | |
| 59 | <td>previousSelector</td> | |
| 60 | <td>'.wizard li.previous'</td> | |
| 61 | <td>previous element selector</td> | |
| 62 | </tr> | |
| 63 | <tr> | |
| 64 | <td>firstSelector</td> | |
| 65 | <td>'.wizard li.first'</td> | |
| 66 | <td>first element selector</td> | |
| 67 | </tr> | |
| 68 | <tr> | |
| 69 | <td>lastSelector</td> | |
| 70 | <td>'.wizard li.last'</td> | |
| 71 | <td>last element selector</td> | |
| 72 | </tr> | |
| 73 | </tbody> | |
| 74 | </table> | |
| 75 | ||
| 76 | Events | |
| 77 | ------ | |
| 78 | <table class="table table-bordered table-striped"> | |
| 79 | <thead> | |
| 80 | <tr> | |
| 81 | <th>Key</th> | |
| 82 | <th>Description</th> | |
| 83 | </tr> | |
| 84 | </thead> | |
| 85 | <tbody> | |
| 86 | <tr> | |
| 87 | <td>onInit</td> | |
| 88 | <td>Fired when plugin is initialized</td> | |
| 89 | </tr> | |
| 90 | <tr> | |
| 91 | <td>onShow</td> | |
| 92 | <td>Fired when plugin data is shown</td> | |
| 93 | </tr> | |
| 94 | <tr> | |
| 95 | <td>onNext</td> | |
| 96 | <td>Fired when next button is clicked (return false to disable moving to the next step)</td> | |
| 97 | </tr> | |
| 98 | <tr> | |
| 99 | <td>onPrevious</td> | |
| 100 | <td>Fired when previous button is clicked (return false to disable moving to the previous step)</td> | |
| 101 | </tr> | |
| 102 | <tr> | |
| 103 | <td>onFirst</td> | |
| 104 | <td>Fired when first button is clicked (return false to disable moving to the first step)</td> | |
| 105 | </tr> | |
| 106 | <tr> | |
| 107 | <td>onLast</td> | |
| 108 | <td>Fired when last button is clicked (return false to disable moving to the last step)</td> | |
| 109 | </tr> | |
| 110 | <tr> | |
| 111 | <td>onTabChange</td> | |
| 112 | <td>Fired when a tab is changed (return false to disable moving to that tab and showing its contents)</td> | |
| 113 | </tr> | |
| 114 | <tr> | |
| 115 | <td>onTabClick</td> | |
| 116 | <td>Fired when a tab is clicked (return false to disable moving to that tab and showing its contents)</td> | |
| 117 | </tr> | |
| 118 | <tr> | |
| 119 | <td>onTabShow</td> | |
| 120 | <td>Fired when a tab content is shown (return false to disable showing that tab content)</td> | |
| 121 | </tr> | |
| 122 | </tbody> | |
| 123 | </table> | |
| 124 | ||
| 125 | Methods | |
| 126 | ------- | |
| 127 | <table class="table table-bordered table-striped"> | |
| 128 | <thead> | |
| 129 | <tr> | |
| 130 | <th>Key</th> | |
| 131 | <th>Parameters</th> | |
| 132 | <th>Description</th> | |
| 133 | </tr> | |
| 134 | </thead> | |
| 135 | <tbody> | |
| 136 | <tr> | |
| 137 | <td>next</td> | |
| 138 | <td></td> | |
| 139 | <td>Moves to the next tab</td> | |
| 140 | </tr> | |
| 141 | <tr> | |
| 142 | <td>previous</td> | |
| 143 | <td></td> | |
| 144 | <td>Moves to the previous tab</td> | |
| 145 | </tr> | |
| 146 | <tr> | |
| 147 | <td>first</td> | |
| 148 | <td></td> | |
| 149 | <td>Jumps to the first tab</td> | |
| 150 | </tr> | |
| 151 | <tr> | |
| 152 | <td>last</td> | |
| 153 | <td></td> | |
| 154 | <td>Jumps to the last tab</td> | |
| 155 | </tr> | |
| 156 | <tr> | |
| 157 | <td>show</td> | |
| 158 | <td>zero based index</td> | |
| 159 | <td>Jumps to the specified tab</td> | |
| 160 | </tr> | |
| 161 | <tr> | |
| 162 | <td>currentIndex</td> | |
| 163 | <td></td> | |
| 164 | <td>Returns the zero based index number for the current tab</td> | |
| 165 | </tr> | |
| 166 | <tr> | |
| 167 | <td>navigationLength</td> | |
| 168 | <td></td> | |
| 169 | <td>Returns the number of tabs</td> | |
| 170 | </tr> | |
| 171 | <tr> | |
| 172 | <td>enable</td> | |
| 173 | <td>zero based index</td> | |
| 174 | <td>Enables a tab, allows a user to click it (removes .disabled if the item has that class)</td> | |
| 175 | </tr> | |
| 176 | <tr> | |
| 177 | <td>disable</td> | |
| 178 | <td>zero based index</td> | |
| 179 | <td>Disables a tab, disallows a user to click it (adds .disabled to the li element)</td> | |
| 180 | </tr> | |
| 181 | <tr> | |
| 182 | <td>display</td> | |
| 183 | <td>zero based index</td> | |
| 184 | <td>Displays the li element if it was previously hidden</td> | |
| 185 | </tr> | |
| 186 | <tr> | |
| 187 | <td>hide</td> | |
| 188 | <td>zero based index</td> | |
| 189 | <td>Hides the li element (will not remove it from the DOM)</td> | |
| 190 | </tr> | |
| 191 | <tr> | |
| 192 | <td>remove</td> | |
| 193 | <td>zero based index, optinal bool remove tab-pane element or not false by default</td> | |
| 194 | <td>Removes the li element from the DOM if second argument is true will also remove the tab-pane element</td> | |
| 195 | </tr> | |
| 196 | </tbody> | |
| 197 | </table> | |
| 198 | ||
| 199 | <p>© <a href='http://vadimg.com' target="_blank">Vadim Vincent Gabriel</a> <a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a> 2012</p> | |
| 200 | ||
| 201 | License | |
| 202 | =============== | |
| 203 | The MIT License (MIT) | |
| 204 | ||
| 205 | Copyright (c) 2013 - Vincent Gabriel & Jason Gill | |
| 206 | ||
| 207 | Permission is hereby granted, free of charge, to any person obtaining a copy | |
| 208 | of this software and associated documentation files (the "Software"), to deal | |
| 209 | in the Software without restriction, including without limitation the rights | |
| 210 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| 211 | copies of the Software, and to permit persons to whom the Software is | |
| 212 | furnished to do so, subject to the following conditions: | |
| 213 | ||
| 214 | The above copyright notice and this permission notice shall be included in | |
| 215 | all copies or substantial portions of the Software. | |
| 216 | ||
| 217 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| 218 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| 219 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| 220 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| 221 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| 222 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| 223 | THE SOFTWARE. | |
| 224 | ||
| 225 | ||
