选项ui



选项卡:是一种能提供给用户在同一个页面切换不同内容的ui。尤其是在页面布局紧凑的页面上。

  1. 使用table

$('#tabs').tabs();

  1. tabs外观选项和方法

HTML文件:

<div id="tabs">

<ul>

<li><a href="#tab1">tab1</a></li><!-- 当点击此按钮是,显示tab_content1内容,采用方式为#加上一个内容的id -->

<li><a href="#tab2">tab2</a></li>

<li><a href="#tab3">tab3</a></li>

</ul>

<div id="tab1"><p>tab-content1</p><p>tab-content1</p><p>tab-content1</p></div>

<div id="tab2">tab-content2</div>

<div id="tab3">tab-content3</div>

</div>

 

JS文件:

$(function(){

   $('#tabs').tabs({

      collapsible:true,//允许折叠,false不允许折叠

      disabled:[0], //选项卡禁用,true时,全部禁用

      event:mouseover,//原来为点击才可以切换,当为mouse时,鼠标滑过也可以切换

       active:1,//默认展开第几个tab,当为false时,默认折叠

       heightStyle:"auto",//默认值为content,根据内容的高度对话框的高度变化;当为auto时,所有对话框会以最高的为标准;当值为fill时,可以填充一定高度

       show:true,//淡入淡出效果

       hide:true//淡入淡出效果

   });

});

CSS文件:

#tabs{

   margin: 200px;

   border: 0;

}

#tab1,#tab2,#tab3{

   border:1px solid#aaa;

   border-top: none;

   position: relative;

   top:-2px;}

  1. 选项的事件

    $('#tabs').tabs({

           create:function(event,ui){

         //alert('创建tab时触发');

      //alert($(ui.tab.get()).html());//ui有两个子属性tabpanel,得到当前活动卡和内容选项的对象

       },

       activate:function(event,ui){

//alert("change");//切换之后触发,启动该事件       //alert($(ui.oldTab.get()).html());

         //alert($(ui.newTab.get()).html());

         //alert($(ui.oldPanel.get()).html());

         //alert($(ui.newPanel.get()).html());     },

       beforeActivate:function(){

         //切换活动卡之前启动该事件

         alert("change");

       },

   });

  1. ajax远程加载

    index.html

<div id="tabs">

<ul>

<li><a href="tab1.html">tab1</a></li><!-- 当点击此按钮是,显示tab_content1内容,采用方式为#加上一个内容的id -->

<li><a href="tab2.html">tab2</a></li>

<li><a href="tab3.html">tab3</a></li>

</ul>

</div>

tab1.html:

tab1-content

tab2.html:

tab2-content

js文件代码不变  同上

远程加载的两个事件:load()和beforeLoad()

$('#tabs').tabs({

      collapsible:true,//允许折叠,false不允许折叠

      load:function(event,ui){

         //加载一个文档后激活此事件,有两个子属性,tabpanel

         alert("after ajax");

       },

       beforeLoad:function(event,ui){

         //ajax加载一个文档之前激活

         //有四个子属性:tabpaneljqXHR(得到ajax属性)、ajaxSettings

         alert("before");

         ui.jqXHR.success(function(responseText){

            alert(responseText);

         });

         ui.ajaxSettings.url='tab2.html';//设置一些默认属性,单击每一个选项卡显示的都是tab2.html内容

       }

   });

  1. tabs(‘action’,param) 方法

$('#tabs').tabs('disable');//禁用选项卡所有选项

   $('#tabs').tabs('disable',0);//禁用第一个选项卡

   $('#tabs').tabs('enable',0);//启用第一个选项卡

   $('#tabs').tabs('enable');//启用所有选项卡

   $('#button').click(function(){

   $('#tabs').tabs('load',0);//表示更新第一个选项卡,可以 进行局部刷新

   });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值