jQueryTab插件cleverTabs，用于在Tab中显示iframe资源-CSDN文库

共25个文件

png：17个

js：4个

htm：2个

jquery

需积分: 5 190 浏览量 2023-07-11 11:10:03 上传评论收藏 143KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CleverTabs_v_0_5_01.rar （25个子文件）

CleverTabs

index.htm 11KB

context

themes

base

style.css 173B

jquery-ui.css 33KB

images

ui-bg_flat_55_fbec88_40x100.png 182B

ui-bg_glass_75_d0e5f5_1x400.png 124B

ui-icons_6da8d5_256x240.png 4KB

ui-bg_flat_0_aaaaaa_40x100.png 180B

s.png 35KB

ui-icons_217bc0_256x240.png 4KB

ui-icons_d8e7f3_256x240.png 4KB

ui-icons_469bdd_256x240.png 4KB

ui-icons_2e83ff_256x240.png 4KB

ui-bg_inset-hard_100_f5f8f9_1x100.png 104B

ui-bg_gloss-wave_55_5c9ccc_500x100.png 3KB

ui-bg_inset-hard_100_fcfdfd_1x100.png 88B

ui-bg_glass_95_fef1ec_1x400.png 119B

ui-icons_f9bd01_256x240.png 4KB

ui-icons_cd0a0a_256x240.png 4KB

ui-bg_glass_85_dfeffc_1x400.png 123B

images

sample.png 19KB

tmp.htm 971B

scripts

jquery.cleverTabs.js 16KB

jquery.contextMenu.js 11KB

jquery.js 89KB

jquery-ui.js 204KB

<!DOCTYPE html> <html> <head> <title></title> <link rel="Stylesheet" href="context/themes/base/style.css" type="text/css" /> <link rel="Stylesheet" href="context/themes/base/jquery-ui.css" type="text/css" /> <script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/jquery-ui.js" type="text/javascript"></script> <script src="scripts/jquery.contextMenu.js" type="text/javascript"></script> <script src="scripts/jquery.cleverTabs.js" type="text/javascript"></script> <script type="text/javascript"> var tabs; var tmpCount = 0; $(function () { tabs = $('#tabs').cleverTabs(); $(window).bind('resize', function () { tabs.resizePanelContainer(); }); tabs.add({ url: 'http://think8848.cnblogs.com', label: 'think8848' }); tabs.add({ url: 'http://www.google.com.hk', label: 'google' }); tabs.add({ url: 'http://www.baidu.com', label: 'baidu' }); tabs.add({ url: 'http://www.soso.com', label: 'soso', callback: function () { alert('callback'); } }); tabs.add({ url: 'http://www.sogou.com', label: 'sogou' }); $('input[type="button"]').button(); $('#btnAddMore').click(function () { tabs.add({ url: 'tmp.htm?' + tmpCount++, label: 'tab' + tmpCount }); }); }); </script> </head> <body> <div style="font-size: 16px;"> 欢迎使用CleverTabs，作者: think8848（公司主页: <a href="http://www.cleversoft.com">http://www.cleversoft.com</a>, QQ: 166156888, Blog: <a href="http://think8848.cnblogs.com">http://think8848.cnblogs.com</a>)       转载请保留此信息</div> <div> <p> CleverTabs是一款jQuery插件，所需jQuery版本:1.6.1，jQuery UI样式版本:1.8.13；其功能为创建jQuery UI风格的Tab用于显示iframe。 </p> </div> <div id="tabs" style="margin: 0px;"> <ul> </ul> </div> <div style="margin-top: 10px"> <input id="btnAddMore" type="button" value="添加更多Tab" /> </div> <div style="margin-top: 10px"> <p> 初级应用示例: <br /> html:<br /> <xmp> <div id="tabs"><ul></ul></div> </xmp> <br /> javascript: <br /> <xmp> var tabs; <script type="text/javascript"> $(function () { tabs = $('#tabs').cleverTabs(); tabs.add({ url: 'http://think8848.cnblogs.com', label: 'think8848' }); }); </script></xmp> </p> <p> CleverTabs详细说明:<br /> CleverTabs为所有Tab的容器 <br /> <xmp> var tabs; <script type="text/javascript"> $(function () { tabs = $('#tabs').cleverTabs({ //是否安装右键菜单(默认: true) setupContextMenu: true, //右键菜单定义, 右键菜单功能由jquery.contextMenu插件提供 //详见: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/ //本插件中对原contextMenu插件中的样式做了修改，使用了jQuery UI皮肤 contextMenu: { element: $('#contextMenuElementId'), handler: function (action, el, pos) { /*do something...*/ } }, //开启Tab后是否锁定(不允许关闭，默认: false) lock: false, //开启Tab后是否禁用(不允许激活和操作iframe内容，默认: false) disable: false, //当tabs中只有一个Tab时，是否锁定该Tab(默认: true) lockOnlyOne: true, //显示iframe的容器(默认创建在tabs元素中) panelContainer: $('#panelContainerElementId')/*, 其中 tabHeaderTemplate: '', //(Tab用于控制的头模板) tabPanelTemplate: '', //(Tab用于显示的Panel模板) uidGenerator: function() {} //(Tab唯一id生成器) 功能现在不启用，等有时间完善后再启用*/ }); tabs.add({ url: 'http://think8848.cnblogs.com', label: 'think8848' }); }); </script> </xmp> <br /> CleverTabs.add方法: <br /> 添加一个新的Tab并使之成为激活状态，如果将要添加的url已经存在，则会激活该Tab <br /> <xmp> <script type="text/javascript"> var tabs = ('#tabs').cleverTabs(); tabs.add({ //必须是在tabs内唯一的id id: 'uniqueId', //将要在iframe的src属性设置的值 url: 'iframe.src', //显示在Tab头上的文字 label: 'tab header', //关闭本Tab时需要刷新的Tab的url(默认: null) closeREfresh: 'tab url', //关闭本Tab时需要激活的Tab的url(默认: null) closeActivate: 'tab url', //关闭本Tab时需要执行的回调函数 callback: function () { /*do something*/ } }); </script> </xmp> <br /> CleverTabs.getCurrentTab方法: <br /> 获取当前处于激活状态的Tab <br /> <xmp> <script type="text/javascript"> var tabs = ('#tabs').cleverTabs(); var tab = tabs.getCurrentTab(); </script> </xmp> <br /> CleverTabs.getTabByUrl方法: <br /> 获取指定url的Tab实例 <br /> <xmp> <script type="text/javascript"> var tabs = ('#tabs').cleverTabs(); var tab = tabs.getTabByUrl('http://think8848.cnblogs.com'); </script> </xmp> <br /> CleverTabs.clear方法: <br /> 关闭tabs内所有未锁定的Tab <br /> <xmp> <script type="text/javascript"> var tabs = ('#tabs').cleverTabs(); var tab = tabs.clear(); </script> </xmp> <br /> CleverTabs.resizePanelContainer方法: <br /> 重新默认的tabs的PanelContainer的大小 <br /> <xmp> <script type="text/javascript"> var tabs = ('#tabs').cleverTabs(); $(window).bind('resize', function () { //当发生window.resize事件时，重新默认的tabs的PanelContain

评论收藏

内容反馈