jQuery tabs组件的使用（1.7以上版本）

时间 2019-11-11

标签 jquery tabs 组件使用 1.7 以上版本栏目 JQuery 繁體版

原文原文链接

jquery ui组件的使用通常都是包括两个部分：

定义标签;
初始化组件

tabs组件的使用

首先定义标签
格式是这样的:
  <div id="tt">
                  <ul>
                      <li><a href="#tabs-1"><span>查询结果1</span></a></li>
  
                        <li><a href="#tabs-2"><span>查询结果2</span></a></li>
                    </ul>
                  <div id="tabs-1"></div>
                    <div id="tabs-2"></div>
</div>
             注意在这里，id为tt的标签元素属于一个tabs容器，在定义标签内容时，必定写在里面。
初始化tabs组件
$("#tt").tabs({
event:'click',//切换标签采用的方式，默认为单击
spinner:null,//加载标签标题时显示的内容
selected:0,//默认选中的标签项，默认index为0
tabTemplate:"<li><a href='#{href}'><span>#{label}</span></a><span class='ui-icon ui-icon-close' style='float:left;margin: 0.4em 0.2em 0 0; cursor: pointer;'> </span></li>"//定义新增标签的标题样式，固定格式为
"<li><a href='#{href}'><span>#{label}</span></a></li>"

panelTemplate:"<div></div>",//定义新增标签的面板内容，即标签下要显示的内容
add:function(event,ui){
$(this).tabs('select',ui.index);//定义触发的时间，此事件为在增长一个标签时，会选中当前新增长的标签
},

});
使用定义好的tabs组件
$('#tt').tabs('select',1);//选中序号为1的标签
$('#tt').tabs('add','test.actio','新标签');//增长一个新的标签
$('#tt').tabs('remove',0);//移出序号为0的标签
..................

<html>
<head>
 <script src="jquery.ui.core.js"></script>
 <script src="jquery.ui.widget.js"></script>
 <script src="jquery.ui.tabs.js"></script>
</head>
<body> 
  <div id="tt">  
     <ul>        
       <li><a href="#tabs-1"><span>查询结果1</span></a></li>
       <li><a href="#tabs-2"><span>查询结果2</span></a></li>             
     </ul>     
     <div id="tabs-1">我是标签1里的内容</div>
     <div id="tabs-2">我是标签2里的内容</div>
  </div> 
<script type="text/javascript">
  $("#tt").tabs();//能够不用初始化任何属性
</script>
<body>
</html>