jQuery Fieldset tabs with buttons


/ Published in: jQuery
Save to your folder(s)

This is inspired by jQuery autotabs plugin by Keywan Ghadami. I've made a few changes to allow for more versatility and to add button navigation.


Copy this code and paste it in your HTML
  1. /*!
  2.  * forked from:
  3.  * Copyright (c) 2010 Keywan Ghadami (ibson.com)
  4.  * jQuery autotabs Plugin
  5.  *
  6.  * Dual licensed under the MIT and GPL licenses:
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.gnu.org/licenses/gpl.html
  9.  */
  10. (function($j){
  11. $j.fn.fieldset_tabs = function(options){
  12. return this.each(function() {
  13. var tabs = $j(this);
  14. var $jul = $j('<ul></ul>');
  15. tabs.prepend($jul);
  16. tabs.find('fieldset').each(function(i){
  17. var title = $j(this).find('legend').text();
  18. $j(this).find('legend').remove();
  19. var id = 'tab_' + i;
  20. $j(this).attr('id', id);
  21. $jul.append('<li><a href="#'+ id + '">'+title +'</a></li>');
  22. });
  23. var $jtabs = tabs.tabs();
  24. $j('.ui-tabs-panel').each(function(h){
  25. var tsize = $j('.ui-tabs-panel').size() - 1;
  26. var height = $j(this).height();
  27. if (h != 0){
  28. prev = h -1;
  29. $j(this).append("<button type='button' style='float:left;clear:both;margin-top:"+height+"px;' class='prev-tab mover' data-pos='"+ prev + "'><span class='icon leftarrow'></span>Prev</button>")
  30. }
  31. if (h != tsize){
  32. next = h + 1;
  33. $j(this).append("<button type='button' style='float:right;margin-top:"+height+"px;' class='next-tab mover' data-pos='"+ next + "'>Next <span class='icon rightarrow'></span></button>")
  34. }
  35. });
  36. $j('.next-tab, .prev-tab').live('click', function(){
  37. $jtabs.tabs('select', $j(this).data('pos'));
  38. return false;
  39. });
  40. return tabs.tabs();
  41.  
  42. });
  43. }
  44. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.