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>