Tab Position

发布：2015/8/21 14:17:21作者：管理员来源：本站浏览次数：1150

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>

　easyui left-tabs 左侧的tabs

ie6或ie8下，UEditor中出错document.body为空或不是对象解决办法　

html css position绝对定位与相对定位 position:absolute和margin：auto 连用实现元素水平垂直居中 Tab Position JQuery插件写法（以Tab插件为例子）

柏港建站平台

柏港 EasyUI

柏港为您推荐了一些相关资讯