Advanced Search

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.

Expand | Embed | Plain Text

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.