jQuery tabs组件的使用(1.7以上版本)

  1. jquery ui组件的使用一般都是包括两个部分:
    1. 定义标签;
    2. 初始化组件
  2. tabs组件的使用
    1. 首先定义标签
            格式是这样的:
                  <div id="tt">
                          <ul>
                              <li><a href="#tabs-1"><span>查询结果1</span></a></li>
                              <!--此处定义的是标签标题;注意标签a的链接指向下面的标签面板,此处用的是锚链                                   接,以"#"号开头加上面板标签的id-->
                              <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. <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>

你可能感兴趣的:(jQuery tabs组件的使用(1.7以上版本))