This commit is contained in:
季圣华
18
WebRoot/js/easyui-1.3.5/demo/tabs/_content.html
Normal file
18
WebRoot/js/easyui-1.3.5/demo/tabs/_content.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, 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>
|
||||
</body>
|
||||
</html>
|
||||
39
WebRoot/js/easyui-1.3.5/demo/tabs/autoheight.html
Normal file
39
WebRoot/js/easyui-1.3.5/demo/tabs/autoheight.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Auto Height for Tabs - 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>Auto Height for Tabs</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The tabs height is auto adjusted according to tab panel content.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-tabs" style="width:700px;height:auto">
|
||||
<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>
|
||||
39
WebRoot/js/easyui-1.3.5/demo/tabs/basic.html
Normal file
39
WebRoot/js/easyui-1.3.5/demo/tabs/basic.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Tabs - 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>Basic Tabs</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click tab strip to swap tab panel content.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div 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>
|
||||
58
WebRoot/js/easyui-1.3.5/demo/tabs/dropdown.html
Normal file
58
WebRoot/js/easyui-1.3.5/demo/tabs/dropdown.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs with DropDown - 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>Tabs with DropDown</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to add a dropdown menu over a tab strip.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="tt" 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" style="padding:10px">
|
||||
This is the help content.
|
||||
</div>
|
||||
</div>
|
||||
<div id="mm" style="width:120px">
|
||||
<div>Welcome</div>
|
||||
<div>Help Contents</div>
|
||||
<div data-options="iconCls:'icon-search'">Search</div>
|
||||
<div>Dynamic Help</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
var p = $('#tt').tabs().tabs('tabs')[2];
|
||||
var mb = p.panel('options').tab.find('a.tabs-inner');
|
||||
mb.menubutton({
|
||||
menu:'#mm',
|
||||
iconCls:'icon-help'
|
||||
}).click(function(){
|
||||
$('#tt').tabs('select',2);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
WebRoot/js/easyui-1.3.5/demo/tabs/fixedwidth.html
Normal file
40
WebRoot/js/easyui-1.3.5/demo/tabs/fixedwidth.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fixed Tab Width - 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>Fixed Tab Width</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The tab strips have fixed width and height.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-tabs" data-options="tabWidth:112" style="width:700px;height:250px">
|
||||
<div title="Home" style="padding:10px">
|
||||
<p>Home Content.</p>
|
||||
</div>
|
||||
<div title="Maps" style="padding:10px">
|
||||
<p>Maps Content.</p>
|
||||
</div>
|
||||
<div title="Journal" style="padding:10px">
|
||||
<p>Journal Content.</p>
|
||||
</div>
|
||||
<div title="History" style="padding:10px">
|
||||
<p>History Content.</p>
|
||||
</div>
|
||||
<div title="References" style="padding:10px">
|
||||
<p>References Content.</p>
|
||||
</div>
|
||||
<div title="Contact" data-options="tabWidth:110" style="padding:10px">
|
||||
<p>Contact Content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
WebRoot/js/easyui-1.3.5/demo/tabs/hover.html
Normal file
49
WebRoot/js/easyui-1.3.5/demo/tabs/hover.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hover Tabs - 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>Hover Tabs</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Move mouse over the tab strip to open the tab panel.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></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>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var tabs = $('#tt').tabs().tabs('tabs');
|
||||
for(var i=0; i<tabs.length; i++){
|
||||
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
|
||||
$('#tt').tabs('select', e.data.index);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/modem.png
Normal file
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/modem.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/pda.png
Normal file
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/pda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/scanner.png
Normal file
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/scanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/tablet.png
Normal file
BIN
WebRoot/js/easyui-1.3.5/demo/tabs/images/tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
57
WebRoot/js/easyui-1.3.5/demo/tabs/nestedtabs.html
Normal file
57
WebRoot/js/easyui-1.3.5/demo/tabs/nestedtabs.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nested Tabs - 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>Nested Tabs</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The tab panel can contain sub tabs or other components.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
|
||||
<div title="Sub Tabs" style="padding:10px;">
|
||||
<div class="easyui-tabs" data-options="fit:true,plain:true">
|
||||
<div title="Title1" style="padding:10px;">Content 1</div>
|
||||
<div title="Title2" style="padding:10px;">Content 2</div>
|
||||
<div title="Title3" style="padding:10px;">Content 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Ajax" data-options="href:'_content.html',closable:true" style="padding:10px"></div>
|
||||
<div title="Iframe" data-options="closable:true" style="overflow:hidden">
|
||||
<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
|
||||
</div>
|
||||
<div title="DataGrid" data-options="closable:true" style="padding:10px">
|
||||
<table class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'f1',width:100">Title1</th>
|
||||
<th data-options="field:'f2',width:100">Title2</th>
|
||||
<th data-options="field:'f3',width:100">Title3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>d11</td>
|
||||
<td>d12</td>
|
||||
<td>d13</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>d21</td>
|
||||
<td>d22</td>
|
||||
<td>d23</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/tabs/striptools.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/tabs/striptools.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs Strip Tools - 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>Tabs Strip Tools</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the mini-buttons on the tab strip to perform actions.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-tabs" style="width:700px;height:250px">
|
||||
<div title="About" data-options="tools:'#p-tools'" 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="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
|
||||
This is the help content.
|
||||
</div>
|
||||
</div>
|
||||
<div id="p-tools">
|
||||
<a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>
|
||||
<a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>
|
||||
<a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
WebRoot/js/easyui-1.3.5/demo/tabs/tabimage.html
Normal file
44
WebRoot/js/easyui-1.3.5/demo/tabs/tabimage.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs with Images - 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>Tabs with Images</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The tab strip can display big images.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-tabs" data-options="tabWidth:100,tabHeight:60" style="width:700px;height:250px">
|
||||
<!-- <div title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>" style="padding:10px">-->
|
||||
<p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p>
|
||||
</div>
|
||||
<!-- <div title="<span class='tt-inner'><img src='images/scanner.png'/><br>Scanner</span>" style="padding:10px">-->
|
||||
<p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p>
|
||||
</div>
|
||||
<!-- <div title="<span class='tt-inner'><img src='images/pda.png'/><br>Pda</span>" style="padding:10px">-->
|
||||
<p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p>
|
||||
</div>
|
||||
<!-- <div title="<span class='tt-inner'><img src='images/tablet.png'/><br>Tablet</span>" style="padding:10px">-->
|
||||
<p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p>
|
||||
</div>
|
||||
</div>
|
||||
<style scoped="scoped">
|
||||
.tt-inner{
|
||||
display:inline-block;
|
||||
line-height:12px;
|
||||
padding-top:5px;
|
||||
}
|
||||
.tt-inner img{
|
||||
border:0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
48
WebRoot/js/easyui-1.3.5/demo/tabs/tabposition.html
Normal file
48
WebRoot/js/easyui-1.3.5/demo/tabs/tabposition.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the 'position' drop-down list and select an item to change the tab position.</div>
|
||||
</div>
|
||||
<div style="margin:10px 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>
|
||||
44
WebRoot/js/easyui-1.3.5/demo/tabs/tabstools.html
Normal file
44
WebRoot/js/easyui-1.3.5/demo/tabs/tabstools.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs Tools - 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>Tabs Tools</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons on the top right of tabs header to add or remove tab panel.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
|
||||
</div>
|
||||
<div id="tab-tools">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var index = 0;
|
||||
function addPanel(){
|
||||
index++;
|
||||
$('#tt').tabs('add',{
|
||||
title: 'Tab'+index,
|
||||
content: '<div style="padding:10px">Content'+index+'</div>',
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
function removePanel(){
|
||||
var tab = $('#tt').tabs('getSelected');
|
||||
if (tab){
|
||||
var index = $('#tt').tabs('getTabIndex', tab);
|
||||
$('#tt').tabs('close', index);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
WebRoot/js/easyui-1.3.5/demo/tabs/tree_data1.json
Normal file
49
WebRoot/js/easyui-1.3.5/demo/tabs/tree_data1.json
Normal file
@@ -0,0 +1,49 @@
|
||||
[{
|
||||
"id":1,
|
||||
"text":"My Documents",
|
||||
"children":[{
|
||||
"id":11,
|
||||
"text":"Photos",
|
||||
"state":"closed",
|
||||
"children":[{
|
||||
"id":111,
|
||||
"text":"Friend"
|
||||
},{
|
||||
"id":112,
|
||||
"text":"Wife"
|
||||
},{
|
||||
"id":113,
|
||||
"text":"Company"
|
||||
}]
|
||||
},{
|
||||
"id":12,
|
||||
"text":"Program Files",
|
||||
"children":[{
|
||||
"id":121,
|
||||
"text":"Intel"
|
||||
},{
|
||||
"id":122,
|
||||
"text":"Java",
|
||||
"attributes":{
|
||||
"p1":"Custom Attribute1",
|
||||
"p2":"Custom Attribute2"
|
||||
}
|
||||
},{
|
||||
"id":123,
|
||||
"text":"Microsoft Office"
|
||||
},{
|
||||
"id":124,
|
||||
"text":"Games",
|
||||
"checked":true
|
||||
}]
|
||||
},{
|
||||
"id":13,
|
||||
"text":"index.html"
|
||||
},{
|
||||
"id":14,
|
||||
"text":"about.html"
|
||||
},{
|
||||
"id":15,
|
||||
"text":"welcome.html"
|
||||
}]
|
||||
}]
|
||||
Reference in New Issue
Block a user