jquery easyui选项卡Tabs菜单效果-三体教程
文章目录

jquery easyui选项卡Tabs菜单效果

编程的小伙伴应该都知道有一种菜单,像选项卡似的,点击可以切换。

但是你有见过还带关闭按钮的吗?

今天小编分享的就是jquery easyui选项卡(tabs)菜单的效果实例。

html代码<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手风琴菜单-jQuery EasyUI演示</title>
    <link rel="stylesheet" type="text/css" href="source/file/jqueryeasyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="source/file/jqueryeasyui/icon.css">
    <script type="text/javascript" src="source/file/js/jquery.min.js"></script>
    <script type="text/javascript" src="source/file/jqueryeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Tabs</h2>
	<p>单击选项卡以切换不同面板内容。</p>
	<div style="margin:20px 0 10px 0;"></div>
	<div class="easyui-tabs" style="width:500px;height:250px">
		<div title="About" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI教程</p>
			<ul>
				<li>jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。</li>
				<li>jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。 </li>
			</ul>
		</div>
		<div title="我的目录" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'source/file/jqueryeasyui/tree_data1.json',method:'get',animate:true"></ul>
		</div>
		<div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			这里是帮助内容。
		</div>
	</div>
</body>
</html>
亲自测试一下

jquery easyui选项卡Tabs菜单效果

如果设置的宽度不足以显示完所有的选项卡,则会在左右两边自动加上向前、向后的按钮。

jQuery EasyUI框架可以让我们非常容易的建立选项卡菜单。

easyui有着成熟完美的互动基本功能,使用它我们不需要编写冗长的javascript代码,只需定义一些html标记即可。

本文网址:http://www.santii.com/article/102.html

您可能还会对这些jQuery EasyUI文章感兴趣


数据更新时间:2018-05-26