1.默认效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
//方法很简单，没什么要说的，主要是注意id=tabs的div里面的结构
//一定要符合例子的规范，否则会报错。
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1 菜单</a></li>
<li><a href="#tabs-2">tab2 菜单</a></li>
<li><a href="#tabs-3">tab3 菜单</a></li>
</ul>
<div id="tabs-1">
<p>tab1 菜单的内容。。。</p>
</div>
<div id="tabs-2">
<p>tab2 菜单的内容。。。</p>
</div>
<div id="tabs-3">
<p>tab3 菜单的内容。。。</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Default tab组件效果，方法很简单，没什么要说的，主要是注意id=tabs的div里面的结构，一定要符合例子的规范，否则会报错。</p>
</div><!-- End demo-description -->
</body>
</html>
2.竖直效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
//把tab标签页竖直显示。其原理就是对ul，li的css样式做改变
//我们可以参考例子所带的css，效果还可以。
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1 菜单</a></li>
<li><a href="#tabs-2">tab2 菜单</a></li>
<li><a href="#tabs-3">tab3 菜单</a></li>
</ul>
<div id="tabs-1">
<h2>tab1 菜单的题头</h2>
<p>tab1 菜单的内容。。。</p>
</div>
<div id="tabs-2">
<h2>tab2 菜单的题头</h2>
<p>tab2 菜单的内容。。。</p>
</div>
<div id="tabs-3">
<h2>tab3 菜单的题头</h2>
<p>tab3 菜单的内容。。。</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>竖直的tab标签页效果。<br>
//把tab标签页竖直显示。其原理就是对ul，li的css样式做改变
//我们可以参考例子所带的css，效果还可以。</p>
</div><!-- End demo-description -->
</body>
</html>
3.可拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Sortable</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1 菜单</a></li>
<li><a href="#tabs-2">tab2 菜单</a></li>
<li><a href="#tabs-3">tab3 菜单</a></li>
</ul>
<div id="tabs-1">
<p>tab1 菜单的内容。。。</p>
</div>
<div id="tabs-2">
<p>tab2 菜单的内容。。。</p>
</div>
<div id="tabs-3">
<p>tab3 菜单的内容。。。</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>可以拖拽的tab标签页效果。</p>
<p>
实现很简单，在tabs()方法后添加
.find( ".ui-tabs-nav" ).sortable({ axis: "x" });
就可以。
</p>
</div><!-- End demo-description -->
</body>
</html>
4.可折叠效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1 菜单</a></li>
<li><a href="#tabs-2">tab2 菜单</a></li>
<li><a href="#tabs-3">tab3 菜单</a></li>
</ul>
<div id="tabs-1">
<p><strong>tab1 菜单的题头</strong></p>
<p>tab1 菜单的内容。。。</p>
</div>
<div id="tabs-2">
<p><strong>tab2 菜单的题头</strong></p>
<p>tab3 菜单的内容。。。</p>
</div>
<div id="tabs-3">
<p><strong>tab3 菜单的题头</strong></p>
<p>tab3 菜单的内容。。。</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>可折叠的tab标签页效果。点击同一个tab页，点击一次打开，再点击一次就折叠</p>
$( "#tabs" ).tabs({
collapsible: true
});
</div><!-- End demo-description -->
</body>
</html>
分享到：
相关推荐
, 标签页（Tabs） , 工具提示框（Tooltip）等，新版本的UI将包含更多的微件。 效果库（Effects） 用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效（Effect） , 显示（Show） , 隐藏...
jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。 jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，...
jQuery UI滚动选项卡 这是一个纯jQuery UI小部件，用于扩展默认的jQuery UI选项卡。 它处理小部件创建事件中的所有标记增强功能，并且适用于默认的小部件HTML结构。 该插件是“可自定义的”默认窗口小部件，具有附加...
处理没有定义的选项的子元素（f67f929）对话框修正：支持弃用按钮选项（＃15016，6c754b4）菜单修正：支持数字键盘的键盘输入（＃15031，ac9ca9e）滑动补充：演示自定义手柄（＃15023，51461d5）jQueryUI简介jQuery...
本文实例为大家分享了jqueryUI tab标签页的具体代码，供大家参考，具体内容如下 var temp=1; var arr=[我的首页]; //×号点击关闭li $(#tabs).delegate( .ui-icon-close, click, function() { var panelId = $...
• 集成了jQuery UI的风琴盒、页标签特效、ajaxForm表单递交和validate表单验证功能，无需程序员学习这些功能，按常规方式编程即可自动调用。 • 保持了与jqueryui的完全兼容，可以自行前往www.jqueryui.com网站...
• 集成了jQuery UI的风琴盒、页标签特效、ajaxForm表单递交和validate表单验证功能，无需程序员学习这些功能，按常规方式编程即可自动调用。 • 保持了与jqueryui的完全兼容，可以自行前往www.jqueryui.com网站下载...
响应式手风琴选项卡选项卡式界面在较大的屏幕上运行良好，但在较小的设备上通常以奇怪... script src =" https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js " > </ script >< scr
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。 与extjs相似，都是基于JQuery的一个前台ui界面的插件，功能相对没extjs...
jQueryUI标准后台页面演示系统说明 系统实际使用步骤 1.复制（解压）文件夹到网站测试文档根目录（apache系统下一般是htdocs）,即可直接访问 2.修改config.php文件中的数组，即可快速生成界面结构 3.config.php中的$...
1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡...
1.标签页UI出现，但点击无反应，标签页UI并未随点击进行切换 先检查bootstrap.css，jQuery.js和bootstrap.js是否有正确引入，并保证引入顺序jQuery在前，bootstrap.js在后。再检查代码中是否有其他报错中止了JS。 2....
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大...
Tab,选项卡,标签切换 Simple Tabs 简单的Tabs——选项卡菜单切换插件，橘子香水原创，兼容IE6，7，FF1.5，FF3.0，ie8下样式有一点问题，刷新页面后仍然可以保持被激活的选项卡，其中样式借用了jquery的ui-...
JQuery移动。rplib library.ant.design_Web_3.0.rplib Mobile-android DSK。rplib mobile-iPhone-Horizontal。rplib mobile-iPhone-Ul.rplib 适度的鼠标光标。OSX widgets v101.rplib PC端自用元件库-v1.0-Joe.rplib...
溢出标签扩展 jQuery UI 选项卡以将不适合“溢出”下拉列表的选项卡组合在一起。 适用于 jQuery 1.9+（上次测试版本：2.1.3） 适用于最新的 Chrome、FireFix 和 IE 9+这是什么？ 该插件将自动检测标签容器中的可用...
经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
标签jQuery插件在选项卡中打开页面，基于Bootstrap2,3文件，演示，指南资源管理器开启 如果您认为该项目对您有所帮助，只需加星标即可产品特点jQuery插件用过的bootstrap2、3 ui框架选项卡中的多个打开页面，操作...