jquery.bootstrap-wizard.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. /*!
  2. * jQuery twitter bootstrap wizard plugin
  3. * Examples and documentation at: http://github.com/VinceG/twitter-bootstrap-wizard
  4. * version 1.4.2
  5. * Requires jQuery v1.3.2 or later
  6. * Supports Bootstrap 2.2.x, 2.3.x, 3.0
  7. * Dual licensed under the MIT and GPL licenses:
  8. * http://www.opensource.org/licenses/mit-license.php
  9. * http://www.gnu.org/licenses/gpl.html
  10. * Authors: Vadim Vincent Gabriel (http://vadimg.com), Jason Gill (www.gilluminate.com)
  11. */
  12. ;
  13. (function($) {
  14. var bootstrapWizardCreate = function(element, options) {
  15. var element = $(element);
  16. var obj = this;
  17. // selector skips any 'li' elements that do not contain a child with a tab data-toggle
  18. var baseItemSelector = 'li:has([data-toggle="tab"])';
  19. var historyStack = [];
  20. // Merge options with defaults
  21. var $settings = $.extend({}, $.fn.bootstrapWizard.defaults, options);
  22. var $activeTab = null;
  23. var $navigation = null;
  24. this.rebindClick = function(selector, fn) {
  25. selector.unbind('click', fn).bind('click', fn);
  26. }
  27. this.fixNavigationButtons = function() {
  28. // Get the current active tab
  29. if (!$activeTab.length) {
  30. // Select first one
  31. $navigation.find('a:first').tab('show');
  32. $activeTab = $navigation.find(baseItemSelector + ':first');
  33. }
  34. // See if we're currently in the first/last then disable the previous and last buttons
  35. $($settings.previousSelector, element).toggleClass('disabled', (obj.firstIndex() >= obj.currentIndex()));
  36. $($settings.nextSelector, element).toggleClass('disabled', (obj.currentIndex() >= obj.navigationLength()));
  37. $($settings.nextSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
  38. $($settings.lastSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
  39. $($settings.finishSelector, element).toggleClass('hidden', (obj.currentIndex() < obj.navigationLength()));
  40. $($settings.backSelector, element).toggleClass('disabled', (historyStack.length == 0));
  41. $($settings.backSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
  42. // We are unbinding and rebinding to ensure single firing and no double-click errors
  43. obj.rebindClick($($settings.nextSelector, element), obj.next);
  44. obj.rebindClick($($settings.previousSelector, element), obj.previous);
  45. obj.rebindClick($($settings.lastSelector, element), obj.last);
  46. obj.rebindClick($($settings.firstSelector, element), obj.first);
  47. obj.rebindClick($($settings.finishSelector, element), obj.finish);
  48. obj.rebindClick($($settings.backSelector, element), obj.back);
  49. if ($settings.onTabShow && typeof $settings.onTabShow === 'function' && $settings.onTabShow($activeTab, $navigation, obj.currentIndex()) === false) {
  50. return false;
  51. }
  52. };
  53. this.next = function(e) {
  54. // If we clicked the last then dont activate this
  55. if (element.hasClass('last')) {
  56. return false;
  57. }
  58. if ($settings.onNext && typeof $settings.onNext === 'function' && $settings.onNext($activeTab, $navigation, obj.nextIndex()) === false) {
  59. return false;
  60. }
  61. var formerIndex = obj.currentIndex();
  62. var $index = obj.nextIndex();
  63. // Did we click the last button
  64. if ($index > obj.navigationLength()) {} else {
  65. historyStack.push(formerIndex);
  66. $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '') + ':eq(' + $index + ') a').tab('show');
  67. }
  68. };
  69. this.previous = function(e) {
  70. // If we clicked the first then dont activate this
  71. if (element.hasClass('first')) {
  72. return false;
  73. }
  74. if ($settings.onPrevious && typeof $settings.onPrevious === 'function' && $settings.onPrevious($activeTab, $navigation, obj.previousIndex()) === false) {
  75. return false;
  76. }
  77. var formerIndex = obj.currentIndex();
  78. var $index = obj.previousIndex();
  79. if ($index < 0) {} else {
  80. historyStack.push(formerIndex);
  81. $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '') + ':eq(' + $index + ') a').tab('show');
  82. }
  83. };
  84. this.first = function(e) {
  85. if ($settings.onFirst && typeof $settings.onFirst === 'function' && $settings.onFirst($activeTab, $navigation, obj.firstIndex()) === false) {
  86. return false;
  87. }
  88. // If the element is disabled then we won't do anything
  89. if (element.hasClass('disabled')) {
  90. return false;
  91. }
  92. historyStack.push(obj.currentIndex());
  93. $navigation.find(baseItemSelector + ':eq(0) a').tab('show');
  94. };
  95. this.last = function(e) {
  96. if ($settings.onLast && typeof $settings.onLast === 'function' && $settings.onLast($activeTab, $navigation, obj.lastIndex()) === false) {
  97. return false;
  98. }
  99. // If the element is disabled then we won't do anything
  100. if (element.hasClass('disabled')) {
  101. return false;
  102. }
  103. historyStack.push(obj.currentIndex());
  104. $navigation.find(baseItemSelector + ':eq(' + obj.navigationLength() + ') a').tab('show');
  105. };
  106. this.finish = function(e) {
  107. if ($settings.onFinish && typeof $settings.onFinish === 'function') {
  108. $settings.onFinish($activeTab, $navigation, obj.lastIndex());
  109. }
  110. };
  111. this.back = function() {
  112. if (historyStack.length == 0) {
  113. return null;
  114. }
  115. var formerIndex = historyStack.pop();
  116. if ($settings.onBack && typeof $settings.onBack === 'function' && $settings.onBack($activeTab, $navigation, formerIndex) === false) {
  117. historyStack.push(formerIndex);
  118. return false;
  119. }
  120. element.find(baseItemSelector + ':eq(' + formerIndex + ') a').tab('show');
  121. };
  122. this.currentIndex = function() {
  123. return $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '')).index($activeTab);
  124. };
  125. this.firstIndex = function() {
  126. return 0;
  127. };
  128. this.lastIndex = function() {
  129. return obj.navigationLength();
  130. };
  131. this.getIndex = function(e) {
  132. return $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '')).index(e);
  133. };
  134. this.nextIndex = function() {
  135. var nextIndexCandidate = this.currentIndex();
  136. var nextTabCandidate = null;
  137. do {
  138. nextIndexCandidate++;
  139. nextTabCandidate = $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '') + ":eq(" + nextIndexCandidate + ")");
  140. } while ((nextTabCandidate) && (nextTabCandidate.hasClass("disabled")));
  141. return nextIndexCandidate;
  142. };
  143. this.previousIndex = function() {
  144. var prevIndexCandidate = this.currentIndex();
  145. var prevTabCandidate = null;
  146. do {
  147. prevIndexCandidate--;
  148. prevTabCandidate = $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '') + ":eq(" + prevIndexCandidate + ")");
  149. } while ((prevTabCandidate) && (prevTabCandidate.hasClass("disabled")));
  150. return prevIndexCandidate;
  151. };
  152. this.navigationLength = function() {
  153. return $navigation.find(baseItemSelector + ($settings.withVisible ? ':visible' : '')).length - 1;
  154. };
  155. this.activeTab = function() {
  156. return $activeTab;
  157. };
  158. this.nextTab = function() {
  159. return $navigation.find(baseItemSelector + ':eq(' + (obj.currentIndex() + 1) + ')').length ? $navigation.find(baseItemSelector + ':eq(' + (obj.currentIndex() + 1) + ')') : null;
  160. };
  161. this.previousTab = function() {
  162. if (obj.currentIndex() <= 0) {
  163. return null;
  164. }
  165. return $navigation.find(baseItemSelector + ':eq(' + parseInt(obj.currentIndex() - 1) + ')');
  166. };
  167. this.show = function(index) {
  168. var tabToShow = isNaN(index) ?
  169. element.find(baseItemSelector + ' a[href="#' + index + '"]') :
  170. element.find(baseItemSelector + ':eq(' + index + ') a');
  171. if (tabToShow.length > 0) {
  172. historyStack.push(obj.currentIndex());
  173. tabToShow.tab('show');
  174. }
  175. };
  176. this.disable = function(index) {
  177. $navigation.find(baseItemSelector + ':eq(' + index + ')').addClass('disabled');
  178. };
  179. this.enable = function(index) {
  180. $navigation.find(baseItemSelector + ':eq(' + index + ')').removeClass('disabled');
  181. };
  182. this.hide = function(index) {
  183. $navigation.find(baseItemSelector + ':eq(' + index + ')').hide();
  184. };
  185. this.display = function(index) {
  186. $navigation.find(baseItemSelector + ':eq(' + index + ')').show();
  187. };
  188. this.remove = function(args) {
  189. var $index = args[0];
  190. var $removeTabPane = typeof args[1] != 'undefined' ? args[1] : false;
  191. var $item = $navigation.find(baseItemSelector + ':eq(' + $index + ')');
  192. // Remove the tab pane first if needed
  193. if ($removeTabPane) {
  194. var $href = $item.find('a').attr('href');
  195. $($href).remove();
  196. }
  197. // Remove menu item
  198. $item.remove();
  199. };
  200. var innerTabClick = function(e) {
  201. // Get the index of the clicked tab
  202. var $ul = $navigation.find(baseItemSelector);
  203. var clickedIndex = $ul.index($(e.currentTarget).parent(baseItemSelector));
  204. var $clickedTab = $($ul[clickedIndex]);
  205. if ($settings.onTabClick && typeof $settings.onTabClick === 'function' && $settings.onTabClick($activeTab, $navigation, obj.currentIndex(), clickedIndex, $clickedTab) === false) {
  206. return false;
  207. }
  208. };
  209. var innerTabShown = function(e) {
  210. var $element = $(e.target).parent();
  211. var nextTab = $navigation.find(baseItemSelector).index($element);
  212. // If it's disabled then do not change
  213. if ($element.hasClass('disabled')) {
  214. return false;
  215. }
  216. if ($settings.onTabChange && typeof $settings.onTabChange === 'function' && $settings.onTabChange($activeTab, $navigation, obj.currentIndex(), nextTab) === false) {
  217. return false;
  218. }
  219. $activeTab = $element; // activated tab
  220. obj.fixNavigationButtons();
  221. };
  222. this.resetWizard = function() {
  223. // remove the existing handlers
  224. $('a[data-toggle="tab"]', $navigation).off('click', innerTabClick);
  225. $('a[data-toggle="tab"]', $navigation).off('show show.bs.tab', innerTabShown);
  226. // reset elements based on current state of the DOM
  227. $navigation = element.find('ul:first', element);
  228. $activeTab = $navigation.find(baseItemSelector + '.active', element);
  229. // re-add handlers
  230. $('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
  231. $('a[data-toggle="tab"]', $navigation).on('show show.bs.tab', innerTabShown);
  232. obj.fixNavigationButtons();
  233. };
  234. $navigation = element.find('ul:first', element);
  235. $activeTab = $navigation.find(baseItemSelector + '.active', element);
  236. if (!$navigation.hasClass($settings.tabClass)) {
  237. $navigation.addClass($settings.tabClass);
  238. }
  239. // Load onInit
  240. if ($settings.onInit && typeof $settings.onInit === 'function') {
  241. $settings.onInit($activeTab, $navigation, 0);
  242. }
  243. // Load onShow
  244. if ($settings.onShow && typeof $settings.onShow === 'function') {
  245. $settings.onShow($activeTab, $navigation, obj.nextIndex());
  246. }
  247. $('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
  248. // attach to both show and show.bs.tab to support Bootstrap versions 2.3.2 and 3.0.0
  249. $('a[data-toggle="tab"]', $navigation).on('show show.bs.tab', innerTabShown);
  250. };
  251. $.fn.bootstrapWizard = function(options) {
  252. //expose methods
  253. if (typeof options == 'string') {
  254. var args = Array.prototype.slice.call(arguments, 1)
  255. if (args.length === 1) {
  256. args.toString();
  257. }
  258. return this.data('bootstrapWizard')[options](args);
  259. }
  260. return this.each(function(index) {
  261. var element = $(this);
  262. // Return early if this element already has a plugin instance
  263. if (element.data('bootstrapWizard')) return;
  264. // pass options to plugin constructor
  265. var wizard = new bootstrapWizardCreate(element, options);
  266. // Store plugin object in this element's data
  267. element.data('bootstrapWizard', wizard);
  268. // and then trigger initial change
  269. wizard.fixNavigationButtons();
  270. });
  271. };
  272. // expose options
  273. $.fn.bootstrapWizard.defaults = {
  274. withVisible: true,
  275. tabClass: 'nav nav-pills',
  276. nextSelector: '.wizard li.next',
  277. previousSelector: '.wizard li.previous',
  278. firstSelector: '.wizard li.first',
  279. lastSelector: '.wizard li.last',
  280. finishSelector: '.wizard li.finish',
  281. backSelector: '.wizard li.back',
  282. onShow: null,
  283. onInit: null,
  284. onNext: null,
  285. onPrevious: null,
  286. onLast: null,
  287. onFirst: null,
  288. onFinish: null,
  289. onBack: null,
  290. onTabChange: null,
  291. onTabClick: null,
  292. onTabShow: null
  293. };
  294. })(jQuery);