关注我的微博:http://weibo.com/2139463997
需求:
1.采用卡片式打开多页面
2.过滤重复打开页面如果该页面已经打开,只需要切换至该tab
3.能够在iframe页面直接关闭加载该页面的tab容器
CSS:
#frame_tabs { margin-top: 0px;}
#frame_tabs ul li{height: 25px;}
#frame_tabs a{height: 20px;}
#frame_tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#frame_tabs .ui-tabs-panel{padding: 0px; overflow:hidden;}
#navibar {height:538px; overflow:hidden;}
#frame_tabs .navi{height:530px; overflow:hidden;}
JS:
$(function() {
initFramePanel();
//
tab_counter = $frame_tabs.tabs( "length" ) + 1;
});
var tab_counter;
var $frame_tabs;
var frame_width = 900;
function initFramePanel(){
$frame_tabs = $('#frame_tabs').tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
add: function(event, ui) {
var index = $(this).tabs( "length" ) - 1;
var url = $(this).tabs( "option", "url");
var pageKey = url.replace('http://','').replace('/','');
alert(pageKey);
var iframeHtml = " <iframe id='frameA' name='frameA' width='" +frame_width+ "px' height='500px' src='" + url
+ "' frameborder=0 scrolling='no'></iframe> <input type='hidden' value='"+ pageKey +"' />";
$(ui.panel).html(iframeHtml);
var selecting = $(this).tabs( "length" ) - 1;
$(this).tabs( "option", "selected", index);
}
});
$('#frame_tabs span.ui-icon-close').live('click', function() {
var _li = $(this).parent();
var index = $('li',$frame_tabs).index(_li);
$frame_tabs.tabs('remove', index);
});
}
/** 载入节点url */
function addPageTab(url,title){
// 当前页面状态(是否已经打开)
var pageIsOpen = false;
// 打开页面唯一标记
var pageKey = url.replace('http://','').replace('/','');
$("#frame_tabs input").each(function(index,elm){
var inputVal = $(elm).val();
if(inputVal == pageKey){
pageIsOpen = true;
$frame_tabs.tabs( "option", "selected", index);
return false;
}
});
//
if(pageIsOpen)return;
//
$frame_tabs.tabs( "option", "url" , url);
$frame_tabs.tabs('add', '#frame_tabs-'+tab_counter, title);
tab_counter++;
}
// 关闭页面
//在frame页面通过调用关闭事件:window.parent.closePage()
function closePage(){
$("#frame_tabs li").each(function(index,elm){
if($(elm).hasClass('ui-state-active')){
// 移出页面
$frame_tabs.tabs('remove',index);
return false;
}
});
}
html template:
<!-- tab template Start -->
<div id="frame_tabs">
<div class="navi">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top"><a href="#frame_tabs-1">Blank</a> </li>
</ul>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="frame_tabs-1"></div>
</div>
</div>
<!--tab template End -->
效果:
- 大小: 38.5 KB
分享到:
相关推荐
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs 、拉帘效果、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
jquery ui tabs 切换功能实现,jquery一个好用的例子
jQueryUI系统教程之一:dialog[定义].pdf
最新jQueryUI组件下载
jquery的UI组件,如:弹出层,时间控件等,每个组件都有demo
jQueryui_tabs_impor.rar
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
jQuery-ui-tabs 分页相关 jQuery-ui-tabs 分页相关
JQuery UI 1.91 组件demo,有源码
jquery ui tabs_jqgrid demo
jquery的UI的选项卡tabs插件jquery.ui.tabs.js
主要是一些界面的扩展,包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,新版本的UI将包含更多的微件。 效果库 用于提供丰富的动画效果,让动画不再...
一个JqueryUI Tabs插件的扩展 可动态添加或关闭的Tabs插件 已经添加过的Tab,再次添加时候不添加新的,而是选中原来的Tab。
Jquery UI实现时分秒UI实现Demo,在原有Jquery UI DatePicker插件基础上整合jquery-ui-timepicker-addon.js实现年月日 时分秒日期时间格式,方便用户快速开发HTML
根据jquery官方的tabs插件而来,官方插件在页面底色是白色时,是没有问题滴~~但如果换了其他颜色,tab的边角就成了白色,这怎么能拿出手呢~~所以鄙人请公司美工MM重新整了哈tab.png。现在没有问题了,而且鼠标移上去...
jquery-ui:jQuery UI的一个分支:WIP分支,旧版Selectmenu小部件(分支:selectmenu)和jQuery UI Tabs的可访问版本(过时,分支:tabs可访问性)
jQuery ui页面全屏滚动fullPage.js插件页面滚动 jQuery ui页面全屏滚动fullPage.js插件页面滚动