jquery ui tabs 控件 标签倒置并实现固定

1.问题一：如何设置让tabs标签向下显示，并且固定。

 

如下图：

 

 

 

 

 

 

 

 

 

1.1，解决方法：

 

 

 

 

 

 

2.设置第二个选项卡为默认选项卡。  selected:属性

     若selected：null 则默认不打开任何tabs选项。

     若disableed:[0]表示禁用第一个选项卡，以此类推。

   2.1代码：

 

       $(function () { //define config object var tabOpts = { selected:1 }; $("#tabs").tabs(tabOpts); }) 

 

 

3.fx过渡效果

  3. 1.关闭和打开选项卡都有过渡效果

 

       3.1.1：代码：

$(function () { //define config object var tabOpts = { selected: 1, fx: { opacity:"toggle", duration:"fast" } }; $("#tabs").tabs(tabOpts); }) 

 

 

 3.2关闭选项卡有过渡效果打开选项卡没有过渡效果。

 

      <script type="text/javascript"> $(function () { //define config object var tabOpts = { selected: 1, fx: [{ opacity:"toggle", duration:"fast" },null] }; $("#tabs").tabs(tabOpts); }) 

 

 

 fx用数组表示：第一个元素表示关闭选项卡时的效果，第二个元素表示打开选项卡的效果。

 

 

 

 

 

4.选项卡控件中的事件：

     实现当单击选项卡时，触发某事件：

     代码如下：

         $(function () { function handleSelect(event, tab) { alert("The tab at index" + tab.index + "was selected"); } //define config object var tabOpts = { select:handleSelect } }; $("#tabs").tabs(tabOpts); }) 

 

4.1若将上面的select换成show，则表示显示选项卡的内容时，触发该事件。

 

5.激活和禁用选项卡：

    5.1代码如下：

       <mce:script type="text/javascript"><!-- $(function () { function handleEnable(event,tab){ alert("enable"); } var tabOpts = { disabled:[0], selected: 1, enable:handleEnable }; $("#tabs").tabs(tabOpts); $("#enable").click(function(){ $("#tabs").tabs("enable",0); }); $("#disable").click(function(){ $("#tabs").tabs("disable",1); }); }) // --></mce:script>  

 

    5.2自我认为，上面的enable有两种情况，一种是设置激活的选项卡项目，一个是设置激活后，要执行的函数。。

注意：

1..在使用tabs控件时，主要让conment中的div和ul中的a中的id一样。而且命名也要统一，如id=“tabs-1”否则无法使用，