jquery tabs iFrameWord文件下载.docx
- 文档编号:18899295
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:11
- 大小:46.97KB
jquery tabs iFrameWord文件下载.docx
《jquery tabs iFrameWord文件下载.docx》由会员分享,可在线阅读,更多相关《jquery tabs iFrameWord文件下载.docx(11页珍藏版)》请在冰豆网上搜索。
src="
${contextPath}/expense/noTravelExpenseAction.do"
width="
100%"
frameborder="
0"
marginheight="
marginwidth="
/iframe>
/div>
travelExpenseDiv"
travelExpenseFrame"
${contextPath}/expense/travelExpenseAction.do"
scriptlanguage="
javascript"
$(function(){
$('
#expenseTabs'
).tabs({
cookie:
{
//storecookieforaday,without,itwouldbeasessioncookie
expires:
1
},
select:
function(event,ui){
).tabs("
url"
ui.index,"
);
}
});
$("
tabletr:
nth-child(odd)"
).addClass("
striped"
/script>
此时,iframe会出现纵向滚动条,是因为其高度所致。
我们可以再加一段代码来设置它的高度。
scripttype="
text/javascript"
varnoTravelExpenseFrame=document.getElementByIdx_x("
noTravelExpenseFrame.height=document.body.clientHeight;
vartravelExpenseFrame=document.getElementByIdx_x("
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列表,告诉插件需要到哪获取内容。
example"
ahref="
ahah_1.html"
mce_href="
span>
Content1<
/span>
ahah_2.html"
Content2<
ahah_3.html"
Content3<
显然,这将会减缓内容加载的速度。
如果你要重用一个标签页容器,你可以试着匹配其title属性和容器的id,
例如:
hello/world.html"
title="
TodoOverview"
...<
容器:
Todo_Overview"
关于后退按钮和书签
Tabs2已经支持此功能(不支持Safari3)
Howto...
·
检索选中标签的索引
var$tabs=$('
).tabs();
varselected=$tabs.tabs('
option'
'
selected'
//=>
0
在当前标签中打开链接,而不是跳转页面
load:
function(event,ui){
a'
ui.panel).click(function(){
$(ui.panel).load(this.href);
returnfalse;
}
点击链接跳转到指定的标签页(非标签头链接)
//选中第一个标签
#my-text-link'
).click(function(){//绑定点击事件
$tabs.tabs('
select'
2);
//激活第三个标签
选中表单前验证
select:
varisValid=...//表单验证返回结果true或false
returnisValid;
添加一个标签并选中
add:
#'
+ui.panel.id);
followatab'
sURLinsteadofloadingitscontentviaajax
Notethatopeningatabinanewwindowisunexpected,e.g.inconsistentbehaviourexposingausablityproblem(
varurl=$.data(ui.tab,'
load.tabs'
if(url){
location.href=url;
returntrue;
preventaFOUC(FlashofUnstyledContent)beforetabsareinitialized
AddthenecessaryclassestohideaninactivetabpaneltotheHTMLrightaway-notethatthiswillnotdegradegracefullywithJavaScriptbeingdisabled:
class="
ui-tabs"
...
a-tab-panel"
ui-tabs-hide"
参数(参数名:
参数类型:
默认名称)
ajaxOptions:
Options:
null
Ajax加载标签内容时,附加的参数(详见$.ajax)。
初始:
.selector'
).tabs({ajaxOptions:
{async:
false}});
获取:
varajaxOptions=$('
).tabs('
ajaxOptions'
设置:
{async:
false});
cache:
Boolean:
false
是否缓存Ajax加载的标签内容,如果缓存则只在第一次加载时获取。
).tabs({cache:
true});
varcache=$('
cache'
true);
collapsible:
设置为true,则允许一个已选中的标签变成未选中状态。
).tabs({collapsible:
varcollapsible=$('
collapsible'
cookie:
Object:
利用cookie记录最后选中的标签,需要cookie插件支持。
).tabs({cookie:
{expires:
30}});
varcookie=$('
cookie'
{expires:
30});
deselectable:
设置标签插件为不可选中的。
(不推荐使用在1.7版本,应使用collapsible)
).tabs({deselectable:
vardeselectable=$('
deselectable'
disabled:
Array:
[]
在加载时,禁用哪些标签页,填写标签页的索引。
).tabs({disabled:
[1,2]});
vardisabled=$('
disabled'
[1,2]);
event:
String:
'
click'
设置什么事件将触发选中一个标签页。
).tabs({event:
mouseover'
varevent=$('
event'
fx:
Options,Array:
启用动画效果当标签页显示和隐藏。
).tabs({fx:
{opacity:
toggle'
}});
varfx=$('
fx'
{opacity:
idPrefix:
ui-tabs-'
Iftheremotetab,itsanchorelementthatis,hasnotitleattributetogenerateanidfrom,anid/fragmentidentifieriscreatedfromthisprefixandauniqueidreturnedby$.data(el),forexample"
ui-tabs-54"
.
).tabs({idPrefix:
ui-tabs-primary'
varidPrefix=$('
idPrefix'
panelTemplate:
div>
'
当动态添加一个标签容器时,它的容器的HTML元素。
).tabs({panelTemplate:
varpanelTemplate=$('
panelTemplate'
selected:
Number:
设置初始化时,选中的标签页的索引(从0开始)。
如果全部未选中,则使用-1
).tabs({selected:
3});
varselected=$('
3);
spinner:
em>
Loading…<
/em>
设置当从远程加载内容时,标签的标题显示的文本内容,如果设置为空则停用此行为。
).tabs({spinner:
Retrievingdata...'
varspinner=$('
spinner'
tabTemplate:
#{href}"
#{label}<
当动态添加一个标签页时,它的标签样式,#{href}和#{label}是用于替换add时的参数。
).tabs({tabTemplate:
vartabTemplate=$('
tabTemplate'
事件
select:
tabsselect
当点击一个标签标题时,触发此事件。
).tabs({select:
function(event,ui){...}});
绑定:
function(event,ui){...});
load:
tabsload
当远程加载一个标签页内容完成后,触发此事件。
).tabs({load:
tabsload'
show:
tabsshow
当一个标签页内容显示出来后,触发此事件。
).tabs({show:
tabsshow'
add:
tabsadd
当添加一个标签页后,触发此事件。
).tabs({add:
tabsadd'
remove:
tabsremove
当移除一个标签页后,触发此事件。
).tabs({remove:
tabsremove'
enable:
tabsenable
当一个标签页被设置成启用后,触发此事件。
).tabs({enable:
tabsenable'
disable:
tabsdisable
当一个标签页被设置成禁用后,触发此事件。
).tabs({disable:
tabsdisable'
属性
destroy
销毁一个标签插件对象。
用法:
.tabs('
destroy'
)
disable
禁用标签插件。
disable'
enable
启用标签插件。
enable'
option
获取或设置标签插件的参数。
optionName,[value])
add
添加一个标签页。
add'
url,label,[index])
remove
移除一个标签页。
remove'
index)
启用一组标签页。
index)//index是数组
禁用一组标签页。
select
选中一个标签页。
load
重新加载一个ajax标签页的内容。
load'
url
改变一个Ajax标签页的URL。
url'
index,url)
length
获取标签页的数量。
length'
abort
终止正在进行Ajax请求的的标签页的加载和动画。
abort'
rotate
自动滚动显示标签页。
rotate'
ms,[continuing])//第二个参数是停留时间,第三个参数是当用户选中一个标签页后是否继续执行
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery tabs iFrame