Jquery李炎恢—55,56选项卡UI【21】【22】

转载 2016年08月30日 20:43:50

学习要点:

1.使用tabs

2.修改tabs样式

3.tabs()方法的属性

4.tabs()方法的事件

5.tabs中使用on


选项卡(tabs),是一种能提供用户在同一个页面切换不同内容的UI,尤其是在页面布局紧凑的页面上,提供了非常好的用户体验。


一、使用tabs

使用tabs非常简单,但需要安照指定的规范即可。

//html部分

<div id="tabs">

  <ul>

     <li><a href="#tabs1">tab1</a></li>

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

     <li><a href="#tabs3">tab3</a></li>
  </ul>
  <div id="tabs1">tab1-content</div>
  <div id="tabs2">tab2-content</div>
  <div id="tabs3">tab3-content</div>
</div>

//jquery部分
$("#tabs").tabs();

二、修改tabs样式
在弹出的tabs对话框中,在火狐浏览器中打开Firebug或者右击查看元素。这样,我们可以看看tabs的样式,根据样式进行修改。我们为了和网站主题符合,对tabs的标题背景进行修改
//无须修改ui里的CSS,直接用style.css替代掉
.ui-widget-header{
   background:url(../ui_header_bg.png);
}

//去掉外边框
#tabs{
   border:none;
}

//内容区域修饰
#tabs1,#tabs2,#tabs3{
   height:100px;
   padding:10px;
   border:1px solid #aaa;
   border-top:none;
   position:relative;
   top:-2px;
}

三、tabs()方法的属性
选项卡方法有两种形式:1.tabs(options),options是以对象键值对的形式传参,每个键值对表示一个选项;2.tabs("action",param),action是操作选项卡方法的字符串,param则是options的某个选项。

tabs外观选项
属性:collapsible,默认值/类型:false/布尔值,说明:当设置为true时,允许选项卡折叠对应的内容。默认值为false,不会关闭对应内容。
属性:disabled,默认值/类型:无/数组,说明:使用数组来指定禁用哪个选项卡的索引,比如:[0,1]来禁用前两个选项卡。
属性:event,默认值/类型:click/字符串,说明:触发tab的事件类型,默认为click,可以设置mouseover等其他鼠标事件。
属性:active,默认值/类型:数组和布尔值,说明:如果是数值,初始化时默认显示哪个tab,默认值为0.如果是布尔值,那么默认是否折叠,条件必须是collapible,值为true。
属性:heightStyle,默认值/类型:content/字符串,说明:默认为content,即根据内容伸展高度。Auto则自动根据最高的那个为基准,fill则是填充一定的可用高度。
属性:show,默认值/类型:false/布尔值,说明:切换选项卡时,默认采用淡入效果
属性:hide,默认值/类型:false/布尔值,说明:切换选项卡时,默认采用淡出效果

$("#tabs").tabs({
  collapsible:true,
  disabled:[0],
  event:"mouseover",
  active:1,
  active:false,
  heightStyle:"content",
  heightStyle:"auto",
  heightStyle:"fill",
  show:true,
  hide:true
});

注意:设置true后,默认为淡入淡出,如果想使用别的特效,可以使用以下字符串参数
特效名称:bind,说明:对话框从顶部显示或消失
特效名称:bounce,说明:对话框断断续续地显示或消失、垂直运动
特效名称:clip,说明:对话框从中心垂直显示或消失
特效名称:slide,说明:对话框从左边显示或消失
特效名称:drop,说明:对话框从左边显示或消失,有透明度变化
特效名称:fold,说明:对话框从左上角显示或消失
特效名称:highlight,说明:对话框显示或消失,伴随着透明度和背景色的变化
特效名称:puff,说明:对话框从中心开始缩放。显示时“收缩”,消失时“生长”
特效名称:scale,说明:对话框从中心开始缩放.显示时“生长”,消失时“收缩”
特效名称:pulsate,说明:对话框以闪烁形式显示或消失

三、tabs()方法的事件
出来属性设置外,tabs()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数

tab事件选项
事件名:create,说明:当创建一个选项卡时激活此事件,该方法有两个参数(event,ui),ui参数有两个属性tab和panel,得到当前活动卡和内容选项的对象。
事件名:activate,说明:当切换一个活动卡时,启动此事件。该方法有两个参数(event,ui),ui参数有四个子属性:newTab,newPanel,oldTab,oldPanel。分别得到的是新tab对象,新内容对象,旧tab对象和旧内容对象。
事件名:beforeActivate,说明:当切换一个活动卡之前,启动此事件。该方法有两个参数(event,ui),ui参数有四个子属性:newTab,newPanel,oldTab,oldPanel。分别得到的是新tab对象,新内容对象,旧tab对象和旧内容对象
事件名:load,说明:当ajax加载一个文档后激活此事件。该方法有两个参数(event,ui),ui参数有两个子属性tab和panel,得到当前活动卡和内容选项的对象。
事件名:beforeLoad,说明:当ajax加载一个文档前激活此事件。该方法有两个参数(event,ui),ui参数有4个子属性tab和panel以及jqXHR和ajaxSettings,前两个得到当前活动卡和内容选项的对象,后两个是ajax操作对象。

//当选项卡创建时触发
$("#tabs").tabs({
  create:function(event,ui){
    alert($(ui.tab.get()).html());
    alert($(ui.panel.get()).html());
  }
});

//当切换到一个活动卡时触发
$("#tabs").tabs({
  active:function(event,ui){
      alert($(ui.oldTab.get()).html());
      alert($(ui.oldPanel.get()).html());
      alert($(ui.newTab.get()).html());
      alert($(ui.newPanel.get()).html());
  }
});

//当切换到一个活动卡之前触发
$("#tabs").tabs({
  beforeActive:function(event,ui){
      alert($(ui.oldTab.get()).html());
      alert($(ui.oldPanel.get()).html());
      alert($(ui.newTab.get()).html());
      alert($(ui.newPanel.get()).html());
  }
});

在使用load和loading事件之前,我们先要了解一下ajax调用的基本方法。
//html部分
<ul>
   <li><a href="tabs1.html">tab1</a></li>
   <li><a href="tabs2.html">tab2</a></li>
   <li><a href="tabs3.html">tab3</a></li>
</ul>

而tabs1.html,tabs2.html,tabs3.html只要书写即可,无须包含<div>。比如:tabs1-content
//ajax加载后触发
$("#tabs").tabs({
  load:function(event,ui){
      alert("ajax加载后触发!");
  }
});

//ajax加载前触发
$("#tabs").tabs({
  beforeLoad:function(event,ui){
      ul.ajaxSettings.url="tabs2.html";
      ui.jqXHR.success(function(responseText){
         alert(responseText);
      });
  }
});

tabs("action",param)方法
方法:tabs("disable"),返回值:jquery对象,说明:禁用选项卡
方法:tabs("enable"),返回值:jquery对象,说明:启用选项卡
方法:tabs("load"),返回值:jquery对象,说明:通过ajax获取选项卡内容
方法:tabs("widget"),返回值:jquery对象,说明:获取选项卡的jquery对象
方法:tabs("destroy"),返回值:jquery对象,说明:删除选项卡,直接阻断了tabs
方法:tabs("refresh"),返回值:jquery对象,说明:更新选项卡,比如高度
方法:tabs("option",param),返回值:一般值,说明:获取options属性的值
方法:tabs("option",param,value),返回值:jquery对象,说明:设置options属性的值

//禁用选项卡
$("#tabs").tabs("disable");
$("#tabs").tabs("disable",0);

//启用选项卡
$("#tabs").tabs("enable");
$("#tabs").tabs("enable",0);

//获取选项卡jquery对象
$("#tabs").tabs("widget");

//更新选项卡
$("#tabs").tabs("refresh");


//删除tabs选项卡
$("#tabs").tabs(''destroy");

//重载指定选项卡内容
$("#button").click(function(){
   $("#tabs").tabs("load",0);
});

//得到tabs的options值
alert($("#tabs").tabs("options","active"));

//设置tabs的options值
$("#tabs").tabs("options","active",1);

五、tabs中使用on()
在tabs的事件中,提供了使用on()方法处理的事件方法。

on()方法触发的选项卡方法
特效名称:tabsload,说明:Ajax加载后触发
特效名称:tabsbeforeload,说明:Ajax加载前触发
特效名称:tabsactivate,说明:选项卡切换时触发
特效名称:tabsbeforeactivate,说明:选项卡切换前触发

//ajax加载后触发
$("#tabs").on("tabsload",function(){
   alert("ajax加载后触发!");
});

//ajax加载前触发
$("#tabs").on("tabsbeforeload",function(){
    alert("ajax加载前触发");
});

//选项卡切换时触发
$("#tabs").on("tabsactivate",function(){
    alert("选项卡切换时触发!");
});

//选项卡切换前触发
$("#tabs").on("tabsbeforeactivate",function(){
   alert("选项卡切换前触发");
});



















相关文章推荐

Jquery-UI—制作选项卡(tabs)

使用Jquery-UI tabs方法制作简单选项卡

jquery ui 选项卡分页

  • 2014-01-07 10:40
  • 932B
  • 下载

jquery_选项卡_tabs_ui3g.com

jquery easy ui 选项卡

ml; charset=utf-8"%>.tld" prefix="gy"%> $(document).ready(function() {  //选项卡设置 $(#tt_tab).tab...
  • com360
  • com360
  • 2011-06-13 19:06
  • 2388

Jquery-UI学习笔记(选项卡tabs)学习(转)

[html] view plain copy >  html>  head>  meta charset="UTF-8">  title>I...

李炎恢JQuery EasyUI视频培训视频教程下载

01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQuery EasyUI]第3章 Draggab...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)