jQuery tabs组件的使用（1.7以上版本）-白红宇

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

阅读量：7121 次

发布时间：2019-06-28

本文共 1317 字，大约阅读时间需要 4 分钟。

jquery ui组件的使用一般都是包括两个部分：
1. 定义标签;
2. 初始化组件

tabs组件的使用
1. 首先定义标签
  格式是这样的:
    <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容器，在定义标签内容时，一定写在里面。
2. 初始化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);//定义触发的时间，此事件为在增加一个标签时，会选中当前新增加的标签
  },
  });
3. 使用定义好的tabs组件
  $('#tt').tabs('select',1);//选中序号为1的标签
  $('#tt').tabs('add','test.actio','新标签');//增加一个新的标签
  $('#tt').tabs('remove',0);//移出序号为0的标签
  ..................
4. ```
      
               
         
                         
          查询结果1
       
          查询结果2
                  
         
          
         
          我是标签1里的内容
         
     
         
          我是标签2里的内容
         
  
        
 
```

转载于:https://my.oschina.net/u/198742/blog/91117

你可能感兴趣的文章