第16章项目-知问前端选项卡

16--学习要点修改tabs样式主讲教师：合作一．使使用tabs比较简单，但需要按照指定的规范即<div<li><a<li><a<li><a<divid="tabs1">tab1-<divid="tabs2">tab2-<divid="tabs3">tab3-二．修改tabs样们tabs的样式，根据样式进行修改。我们为了和符合，对tabs的标题背//无须修改ui里的CSS，直接用style.css替代{}#tabs{}//#tabs1,#tabs2,#tabs3{top:-}三．tabs()方法的属选项卡方法有两种形式：1.tabs(options)，options是以对象键值对的形式传参，每个键值对表示一个选项；2.tabs('actionparam)，action是操作选项卡方法的字符串，param则是options的某个选项。属默认值/类说false/布尔当设置为true是，允许选项卡折叠对应的内容。默认值为false，不会关闭对应内容无/数使用数组来指定禁用哪个选项卡的索引[0,1]来禁用前两个选项卡click/字符触发tab的事件类型，默认click。可以设置mouseover等其他鼠标事件数组和布尔如果是数组，初始化时默认显示哪个tab，默认0。如果是布尔值，那么默认是否折叠。条件必须collapsibletrue。content/字符动根据最高的那个为基准，fill则是填充一定的可用高度false/布尔切换选项卡时，默认采用淡入效果切换选项卡时，默认采用淡出效果collapsible:true,disabled:[0],event:'mouseover',active:false,heightStyle:hide:true,show:true,特效名说框从顶部显示或框断断续续地显示或，垂直运框从中心垂直地显示或框从左边显示或框从左边显示或，有变框从左上角显示或框显示或，伴随着和背景色的变框从中心开始缩放。显示时“收缩”，时“生长框从中心开始缩放。显示时“生长”，时“收缩框以闪烁形式显示或三．tabs()方法的事除了属性设置外，ab()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。说当创建一个选项卡时激活此事件。该方法有两个参数当切换一个活动卡时，启动此事件。该方法有两个参数(event,ui)，ui参数有四个子属性newTab、nenel、oldTab，oldPanel。分别得到的时候新tab对象、新内容对象、旧tab对象和旧内容对象数(event,ui)，ui参数有四个子属性newTab、nenel、oldTab，oldPaneltab对象、新内容对象、旧tab对象和旧内容对象当ajax加载一个文档后激活此事件。该方法有两个参数当ajax加载一个文档前激活此事件。该方法有两个参数(event,ui)，ui参数有tabpanel以及jqXHR和ajaxSettings，前两个得到当前活动卡和内容选项的对象，后两个是ajax操作对象//当选项卡创建时触create:function(event,{//当切换到一个活动卡时触activate:function(event,alert($(ui.newTab.get()) //当切换到一个活动卡之前触beforeActivate:function(event,{alert($(ui.oldTab.get())alert($(ui.newTab.get())在使用load和beforeLoad事件之前，我们先要了解一下ajax调用的基本方法<li><a<li><a<li><atabs1.html、tabs2.htmltabs3html只要书写即可，无须包含<div>。比如tabs1-而这个时候，我们的CSS需要做一定的修改，只要将之前的ID换成如下即可load:function(event,{}beforeLoad:function(event,{ui.ajaxSettings.url='tabs2html';ui.jqXHR.success(function(responseText){}tabs('action',param)方方说禁用选项启用选项通过ajax获取选项卡内获取选项卡的jQuery对删除选项卡，直接阻断了tabs更新选项卡，比如高获取options属性的设置options属性的//禁用选项 //$('#tabs').tabs('disable',//启用选项 //$('#tabs').tabs('enable',//获取选项jQuery对//更新选项//重载指定选项卡内$('#tabs').tabs('load',alert($('#tabs').tabs('option',五．tabs在tabs的事件中，提供了使用on()方法处理的事件方法on()方法触发的选项卡特效名说选