收藏

下载资源 加入VIP,免费下载

第1页 / 共11页

第2页 / 共11页

第3页 / 共11页

第4页 / 共11页

第5页 / 共11页

 $（function（）{

  $（'#expenseTabs'）.tabs（{

  cookie:

{

   //storecookieforaday,without,itwouldbeasessioncookie

   expires:

1

  },

  select:

function（event,ui）{

   $（'#expenseTabs'）.tabs（"url",ui.index,""）;

  }

 }）;

  $（"tabletr:

nth-child（odd）"）.addClass（"striped"）;     

 }）;

此时，iframe会出现纵向滚动条，是因为其高度所致。

我们可以再加一段代码来设置它的高度。

 varnoTravelExpenseFrame=document.getElementByIdx_x（"noTravelExpenseFrame"）;

 noTravelExpenseFrame.height=document.body.clientHeight;

 vartravelExpenseFrame=document.getElementByIdx_x（"travelExpenseFrame"）;

 travelExpenseFrame.height=document.body.clientHeight;

这样问题得以解决。

效果图如下：

点击“申请报销”按钮时，跳转到另一页面，但此时页面仍在刚才的tab中，如下图所示：

当然，tab边界与iframe边界之间有背景颜色的差异，是因为iframe中src返回的jsp页面宽度不为100%引起的。

样式问题可以自己调试。

JQueryUI-tabs

·概述

标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。

有点类似于手风琴插件。

官方示例地址：

·丰富的事件支持：

tabsselect,tabsload,tabsshow

tabsadd,tabsremove

tabsenable,tabsdisable

事件绑定示例:

$（'#example'）.bind（'tabsselect',function（event,ui）{

//在事件函数的上下文中可使用:

ui.tab//锚元素选中的标签页

ui.panel//锚元素选中的标签页的内容

ui.index//锚元素选中的标签页的索引（从0开始）

}）;

注意：

一个tabsselect事件如果返回false，那么新的标签页将不会被激活。

（可用于验证表单内容）

·Ajax模式：

标签页插件支持通过ajax动态加载一个标签的内容。

你需要的仅是一个带有链接的HTML列表，告诉插件需要到哪获取内容。

• Content1
• Content2
• Content3

显然，这将会减缓内容加载的速度。

注意：

如果你要重用一个标签页容器，你可以试着匹配其title属性和容器的id，

例如:

容器:

...

·关于后退按钮和书签

Tabs2已经支持此功能（不支持Safari3）

·Howto...

·检索选中标签的索引

var$tabs=$（'#example'）.tabs（）;

varselected=$tabs.tabs（'option','selected'）;//=>0

·在当前标签中打开链接，而不是跳转页面

$（'#example'）.tabs（{

load:

function（event,ui）{

$（'a',ui.panel）.click（function（）{

$（ui.panel）.load（this.href）;

returnfalse;

}）;

}

}）;

·点击链接跳转到指定的标签页（非标签头链接）

var$tabs=$（'#example'）.tabs（）;//选中第一个标签

$（'#my-text-link'）.click（function（）{//绑定点击事件

$tabs.tabs（'select',2）;//激活第三个标签

returnfalse;

}）;

·选中表单前验证

$（'#example'）.tabs（{

select:

function（event,ui）{

varisValid=...//表单验证返回结果true或false

returnisValid;

}

}）;

·添加一个标签并选中

var$tabs=$（'#example'）.tabs（{

add:

function（event,ui）{

$tabs.tabs（'select','#'+ui.panel.id）;

}

}）;

·followatab'sURLinsteadofloadingitscontentviaajax

Notethatopeningatabinanewwindowisunexpected,e.g.inconsistentbehaviourexposingausablityproblem（

$（'#example'）.tabs（{

select:

function（event,ui）{

varurl=$.data（ui.tab,'load.tabs'）;

if（url）{

location.href=url;

returnfalse;

}

returntrue;

}

}）;

·preventaFOUC（FlashofUnstyledContent）beforetabsareinitialized

AddthenecessaryclassestohideaninactivetabpaneltotheHTMLrightaway-notethatthiswillnotdegradegracefullywithJavaScriptbeingdisabled:

...

...

·参数（参数名:

参数类型:

默认名称）

ajaxOptions:

Options:

null

Ajax加载标签内容时，附加的参数（详见$.ajax）。

初始：

$（'.selector'）.tabs（{ajaxOptions:

{async:

false}}）;

获取：

varajaxOptions=$（'.selector'）.tabs（'option','ajaxOptions'）;

设置：

$（'.selector'）.tabs（'option','ajaxOptions',{async:

false}）;

cache:

Boolean:

false

是否缓存Ajax加载的标签内容，如果缓存则只在第一次加载时获取。

初始：

$（'.selector'）.tabs（{cache:

true}）;

获取：

varcache=$（'.selector'）.tabs（'option','cache'）;

设置：

$（'.selector'）.tabs（'option','cache',true）;

collapsible:

Boolean:

false

设置为true，则允许一个已选中的标签变成未选中状态。

初始：

$（'.selector'）.tabs（{collapsible:

true}）;

获取：

varcollapsible=$（'.selector'）.tabs（'option','collapsible'）;

设置：

$（'.selector'）.tabs（'option','collapsible',true）;

cookie:

Object:

null

利用cookie记录最后选中的标签，需要cookie插件支持。

初始：

$（'.selector'）.tabs（{cookie:

{expires:

30}}）;

获取：

varcookie=$（'.selector'）.tabs（'option','cookie'）;

设置：

$（'.selector'）.tabs（'option','cookie',{expires:

30}）;

deselectable:

Boolean:

false

设置标签插件为不可选中的。

（不推荐使用在1.7版本，应使用collapsible）

初始：

$（'.selector'）.tabs（{deselectable:

true}）;

获取：

vardeselectable=$（'.selector'）.tabs（'option','deselectable'）;

设置：

$（'.selector'）.tabs（'option','deselectable',true）;

disabled:

Array:

[]

在加载时，禁用哪些标签页，填写标签页的索引。

初始：

$（'.selector'）.tabs（{disabled:

[1,2]}）;

获取：

vardisabled=$（'.selector'）.tabs（'option','disabled'）;

设置：

$（'.selector'）.tabs（'option','disabled',[1,2]）;

event:

String:

'click'

设置什么事件将触发选中一个标签页。

初始：

$（'.selector'）.tabs（{event:

'mouseover'}）;

获取：

varevent=$（'.selector'）.tabs（'option','event'）;

设置：

$（'.selector'）.tabs（'option','event','mouseover'）;

fx:

Options,Array:

null

启用动画效果当标签页显示和隐藏。

初始：

$（'.selector'）.tabs（{fx:

{opacity:

'toggle'}}）;

获取：

varfx=$（'.selector'）.tabs（'option','fx'）;

设置：

$（'.selector'）.tabs（'option','fx',{opacity:

'toggle'}）;

idPrefix:

String:

'ui-tabs-'

Iftheremotetab,itsanchorelementthatis,hasnotitleattributetogenerateanidfrom,anid/fragmentidentifieriscreatedfromthisprefixandauniqueidreturnedby$.data（el）,forexample"ui-tabs-54".

初始：

$（'.selector'）.tabs（{idPrefix:

'ui-tabs-primary'}）;

获取：

varidPrefix=$（'.selector'）.tabs（'option','idPrefix'）;

设置：

$（'.selector'）.tabs（'option','idPrefix','ui-tabs-primary'）;

panelTemplate:

String:

'

当动态添加一个标签容器时，它的容器的HTML元素。

初始：

$（'.selector'）.tabs（{panelTemplate:

'

获取：

varpanelTemplate=$（'.selector'）.tabs（'option','panelTemplate'）;

设置：

$（'.selector'）.tabs（'option','panelTemplate','

selected:

Number:

0

设置初始化时，选中的标签页的索引（从0开始）。

如果全部未选中，则使用-1

初始：

$（'.selector'）.tabs（{selected:

3}）;

获取：

varselected=$（'.selector'）.tabs（'option','selected'）;

设置：

$（'.selector'）.tabs（'option','selected',3）;

spinner:

String:

'Loading…'

设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。

初始：

$（'.selector'）.tabs（{spinner:

'Retrievingdata...'}）;

获取：

varspinner=$（'.selector'）.tabs（'option','spinner'）;

设置：

$（'.selector'）.tabs（'option','spinner','Retrievingdata...'）;

tabTemplate:

String:

'

当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。

初始：

$（'.selector'）.tabs（{tabTemplate:

'

获取：

vartabTemplate=$（'.selector'）.tabs（'option','tabTemplate'）;

设置：

$（'.selector'）.tabs（'option','tabTemplate','

·事件

select:

tabsselect

当点击一个标签标题时，触发此事件。

初始：

$（'.selector'）.tabs（{select:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsselect',function（event,ui）{...}）;

load:

tabsload

当远程加载一个标签页内容完成后，触发此事件。

初始：

$（'.selector'）.tabs（{load:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsload',function（event,ui）{...}）;

show:

tabsshow

当一个标签页内容显示出来后，触发此事件。

初始：

$（'.selector'）.tabs（{show:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsshow',function（event,ui）{...}）;

add:

tabsadd

当添加一个标签页后，触发此事件。

初始：

$（'.selector'）.tabs（{add:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsadd',function（event,ui）{...}）;

remove:

tabsremove

当移除一个标签页后，触发此事件。

初始：

$（'.selector'）.tabs（{remove:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsremove',function（event,ui）{...}）;

enable:

tabsenable

当一个标签页被设置成启用后，触发此事件。

初始：

$（'.selector'）.tabs（{enable:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsenable',function（event,ui）{...}）;

disable:

tabsdisable

当一个标签页被设置成禁用后，触发此事件。

初始：

$（'.selector'）.tabs（{disable:

function（event,ui）{...}}）;

绑定：

$（'.selector'）.bind（'tabsdisable',function（event,ui）{...}）;

·属性

destroy

销毁一个标签插件对象。

用法：

.tabs（'destroy'）

disable

禁用标签插件。

用法：

.tabs（'disable'）

enable

启用标签插件。

用法：

.tabs（'enable'）

option

获取或设置标签插件的参数。

用法：

.tabs（'option',optionName,[value]）

add

添加一个标签页。

用法：

.tabs（'add',url,label,[index]）

remove

移除一个标签页。

用法：

.tabs（'remove',index）

enable

启用一组标签页。

用法：

.tabs（'enable',index）//index是数组

disable

禁用一组标签页。

用法：

.tabs（'disable',index）//index是数组

select

选中一个标签页。

用法：

.tabs（'select',index）

load

重新加载一个ajax标签页的内容。

用法：

.tabs（'load',index）

url

改变一个Ajax标签页的URL。

用法：

.tabs（'url',index,url）

length

获取标签页的数量。

用法：

.tabs（'length'）

abort

终止正在进行Ajax请求的的标签页的加载和动画。

用法：

.tabs（'abort'）

rotate

自动滚动显示标签页。

用法：

.tabs（'rotate',ms,[continuing]）//第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行