Tab Position

当前位置：网站建设 > 技术支持

Tab Position

资料来源：网络整理时间：2023/2/14 0:18:13 共计：3611 浏览

Click the 'position' drop-down list and select an item to change the tab position.

Position:

jQuery EasyUI framework helps you build your web pages easily.

easyui is a collection of user-interface plugin based on jQuery.
easyui provides essential functionality for building modem, interactive, javascript applications.
using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
complete framework for HTML5 web page.
easyui save your time and scales while developing your products.
easyui is very easy but powerful.

About
My Documents
Help

源代码


	
	
		<!DOCTYPE html>
	

	
		<html>
	

	
		<head>
	

	
		 <meta charset="UTF-8">
	

	
		 <title>Tab Position - jQuery EasyUI Demo</title>
	

	
		 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	

	
		 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	

	
		 <link rel="stylesheet" type="text/css" href="../demo.css">
	

	
		 <script type="text/javascript" src="../../jquery.min.js"></script>
	

	
		 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	

	
		</head>
	

	
		<body>
	

	
		 <h2>Tab Position</h2>
	

	
		 <p>Click the 'position' drop-down list and select an item to change the tab position.</p>
	

	
		 <div style="margin:20px 0;">
	

	
		 <span>Position:</span>
	

	
		 <select onchange="$('#tt').tabs({tabPosition:this.value})">
	

	
		 <option value="top">Top</option>
	

	
		 <option value="bottom">Bottom</option>
	

	
		 <option value="left">Left</option>
	

	
		 <option value="right">Right</option>
	

	
		 </select>
	

	
		 </div>
	

	
		 <div id="tt" class="easyui-tabs" style="width:700px;height:250px">
	

	
		 <div title="About" style="padding:10px">
	

	
		 <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
	

	
		 <ul>
	

	
		 <li>easyui is a collection of user-interface plugin based on jQuery.</li>
	

	
		 <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
	

	
		 <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
	

	
		 <li>complete framework for HTML5 web page.</li>
	

	
		 <li>easyui save your time and scales while developing your products.</li>
	

	
		 <li>easyui is very easy but powerful.</li>
	

	
		 </ul>
	

	
		 </div>
	

	
		 <div title="My Documents" style="padding:10px">
	

	
		 <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
	

	
		 </div>
	

	
		 <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
	

	
		 This is the help content.
	

	
		 </div>
	

	
		 </div>
	

	
		 
	

	
		</body>
	

	
		</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：ie6或ie8下，UEditor中出错document.body为空或不是对象解决办法 | ·下一条：easyui left-tabs 左侧的tabs