带按钮的jQuery字段集选项卡

Posted 2021-02-24

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.

/*!
 * forked from:
 * Copyright (c) 2010 Keywan Ghadami (ibson.com)
 * jQuery autotabs Plugin
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($j){
	$j.fn.fieldset_tabs = function(options){
		return this.each(function() {
			var tabs = $j(this);
			var $jul = $j('<ul></ul>');
			tabs.prepend($jul);
			tabs.find('fieldset').each(function(i){
				var title = $j(this).find('legend').text();
				$j(this).find('legend').remove();
				var id = 'tab_' + i;
				$j(this).attr('id', id);
				$jul.append('<li><a href="#'+ id + '">'+title +'</a></li>');
			});
			var $jtabs = tabs.tabs();
			$j('.ui-tabs-panel').each(function(h){
				var tsize = $j('.ui-tabs-panel').size() - 1;
				var height = $j(this).height();
				if (h != 0){
					prev = h -1;
						$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>")
				}
				if (h != tsize){
					next = h + 1;
						$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>")
				}
			});
			$j('.next-tab, .prev-tab').live('click', function(){
				$jtabs.tabs('select', $j(this).data('pos'));
				return false;
			});
			return tabs.tabs();
 
		});
	}
})(jQuery);