jquery-ui标签页组件（tabs）学习

最新推荐文章于 2024-06-25 10:53:47 发布
最新推荐文章于 2024-06-25 10:53:47 发布
阅读量6.1k 收藏 3
点赞数
分类专栏： jquery-ui 组件 文章标签： tabs stylesheet div class function css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lushuaiyin/article/details/7394136
版权

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>


 


 

 

 

索隆
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JQuery学习——标签页（Tabs）
Isringring的博客
09-17 6502
标签页（Tabs）通常用于把内容分成多个部分，以便节省空间，就像折叠面板（accordion）一样。 $("#tabs").tabs({ tabPosition:'right', //标签页的位置在右边 fit:true, //标签页容器的尺寸适应他的父容器 width:"100%", //设置标签页容器的宽度 height:"380",...
jquery.ui.tabs.js
12-05
jquery的UI的选项卡tabs插件jquery.ui.tabs.js
jQuery UI 实例 - 标签页（Tabs）
unber的博客
04-11 1336
一种多面板的单内容区，每个面板与列表中的标题相关。如需了解更多有关 tabs 部件的细节，请查看 API 文档。
JavaScript创建标签式组件
最新发布
分享学习网络的点点滴滴
06-25 311
● 接着我们通过条件保护来设定，当我们获取的元素为null时候，直接返回不执行后面的代码。● 接着我们要移除所有的活跃样式，这些活跃样式大家看一下之前的html和css代码。注：clicked.dataset.tab是为了获取class中的data数据。● 接着我们需要通过点击事件来获取我们点击的那个button的信息。● 当然我们首先将我们需要的元素存储到变量中，方便后面使用。● 接下来就是我们点击哪个按钮，就给哪个按钮创建活跃样式。我们本篇将实现下面的这个标签式组件。● 接着就是激活内容。
基于jQuery简单实用的Tabs选项卡插件
weixin_30527323的博客
05-14 122
jQuery庞大的插件库总是让人欢喜让人忧，如何从庞大的插件库里挑出适合自己的插件，总是让很多缺少经验的朋友头疼的事！今天为大家推荐几款简单实用的Tabs选项卡插件，推荐理由：简单易用灵活，样式美观，开源免费！ 1.jQuery UI Tabs 在线DEMO：http://jqueryui.com/tabs/ jquery ui tabs由jquery团队开发，使用方便灵活，可实现多种效果，...
jquery.UI.tabs
weixin_30539625的博客
08-02 96
今天对jquery UI的tabs进行了进一步的了解，目的是想把死板的切换效果变得动感点，不过经过这进一步的了解，发现它并不合适或都说并不能实现我想要的效果，我想要的效果就是类似淘宝商城的banner那样，它的名称就是叫做tabs，所以我想，也就是因为它的定位是标签页、选项卡，所以不能改装成banner大图轮换那样的效果。我想我应该把其它plug来实现banner大图轮换效果。随便贴过程中找到的技...
jquery-ui.css、jquery-ui.js下载
11-05
5. **Tabs** - 实现标签页式布局，切换不同内容区域。 6. **Autocomplete** - 自动补全功能，常见于搜索框或输入框，提高用户体验。 7. **Sortable** - 使得列表项可以拖放排序，适用于任务管理或项目列表。 8. **...
jquery-ui-1.10.4.custom
03-07
4. **小部件（Widgets）**: 包括日历（Datepicker）、对话框（Dialog）、进度条（Progressbar）、滑块（Slider）、下拉选择器（Selectmenu）、可折叠面板（Accordion）、标签页（Tabs）等，这些都是常见的网页元素和...
jquery-ui-1.12.1.custom.zip下载
10-28
"custom" 指的是这是一个自定义版本，意味着它可能只包含了开发者所需的特定组件，而非完整的 jQuery UI 包含的所有功能。 jQuery UI 的核心组件包括： 1. **Widgets（控件）**：如 Datepicker（日期选择器）、...
jquery tab插件(共七个)
07-17
jquery tab插件(共七个)在网上收集的各种tab插件
jquerytabSelect简易的tab选项卡组件
08-12
jquery-tabSelect 简易的tab选项卡组件
JQueryUI组件 JS下载
02-07
**jQueryUI组件详解** jQueryUI 是一个基于jQuery库的扩展，它提供了一整套用户界面组件，如对话框、滑块、进度条、日期选择器等，极大地简化了网页交互和用户界面的设计。这个下载包包含了jQueryUI的核心组件以及...
jquery-ui-1.10.4.custom.zip
04-28
, 标签页（Tabs） , 工具提示框（Tooltip）等，新版本的UI将包含更多的微件。 效果库（Effects） 用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效（Effect） , 显示（Show） , 隐藏...
jquery的tab插件
weixin_33916256的博客
11-07 101
原文：[url]http://www.sunsean.com/idTabs/[/url] 我改了下，去掉一些没用的，修改了下样式。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
jQuery-UI学习tabs
牧梦
03-13 858
tabs.jsp jQuery对话框 $(function(){ $("#tabs").tabs({ //ajaxOptions:{}, //在tab内容载入时额外需要的Ajax选项 cache:false, //是否缓存远程tab内容，默认为false event:"click", //切换条件，也可以设为mouseover，hover
jQuery封装的tab组件（可选自动+可选延迟处理+按需加载）
深蓝旭的博客
08-01 229
效果图 tab2.html <!DOCTYPE html> <html lang="zh-CN"><!-- 设置简体中文 --> <head> <meta charset="UTF-8"> <title>tab2按需加载</title> <link rel="stylesheet" href="../css/base.css"> <link rel="style...
【Javascript】【jQuery】使用jQueryUI实现标签页（TabPage）
天天向上 Up Up Up (*^▽^*)
05-10 1361
运行效果 页面代码 <link rel="stylesheet" type="text/css" href="../css/jquery-ui.css"/> <script type="text/javascript" src="../js/jquery-3.4.0.js"></script> <script type="tex...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值