升级easyUI到1.9.4版本
This commit is contained in:
季圣华
18
erp_web/js/easyui/demo/tabs/_content.html
Normal file
18
erp_web/js/easyui/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>
|
||||
36
erp_web/js/easyui/demo/tabs/autoheight.html
Normal file
36
erp_web/js/easyui/demo/tabs/autoheight.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>
|
||||
<p>The tabs height is auto adjusted according to tab panel content.</p>
|
||||
<div style="margin:20px 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>
|
||||
36
erp_web/js/easyui/demo/tabs/basic.html
Normal file
36
erp_web/js/easyui/demo/tabs/basic.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>
|
||||
<p>Click tab strip to swap tab panel content.</p>
|
||||
<div style="margin:20px 0 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>
|
||||
55
erp_web/js/easyui/demo/tabs/dropdown.html
Normal file
55
erp_web/js/easyui/demo/tabs/dropdown.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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>
|
||||
<p>This sample shows how to add a dropdown menu over a tab strip.</p>
|
||||
<div style="margin:20px 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">
|
||||
<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>
|
||||
37
erp_web/js/easyui/demo/tabs/fixedwidth.html
Normal file
37
erp_web/js/easyui/demo/tabs/fixedwidth.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
<p>The tab strips have fixed width and height.</p>
|
||||
<div style="margin:20px 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>
|
||||
24
erp_web/js/easyui/demo/tabs/fluid.html
Normal file
24
erp_web/js/easyui/demo/tabs/fluid.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid Tabs</h2>
|
||||
<p>This example shows how to set the width of Tabs to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-tabs" style="width:100%;height:250px">
|
||||
<div title="About" style="padding:10px">
|
||||
<p>The tabs has a width of 100%.</p>
|
||||
</div>
|
||||
<div title="Title2"></div>
|
||||
<div title="Title3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
erp_web/js/easyui/demo/tabs/hover.html
Normal file
46
erp_web/js/easyui/demo/tabs/hover.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>
|
||||
<p>Move mouse over the tab strip to open the tab panel.</p>
|
||||
<div style="margin:20px 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
erp_web/js/easyui/demo/tabs/images/modem.png
Normal file
BIN
erp_web/js/easyui/demo/tabs/images/modem.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
erp_web/js/easyui/demo/tabs/images/pda.png
Normal file
BIN
erp_web/js/easyui/demo/tabs/images/pda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
erp_web/js/easyui/demo/tabs/images/scanner.png
Normal file
BIN
erp_web/js/easyui/demo/tabs/images/scanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
erp_web/js/easyui/demo/tabs/images/tablet.png
Normal file
BIN
erp_web/js/easyui/demo/tabs/images/tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
54
erp_web/js/easyui/demo/tabs/nestedtabs.html
Normal file
54
erp_web/js/easyui/demo/tabs/nestedtabs.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
<p>The tab panel can contain sub tabs or other components.</p>
|
||||
<div style="margin:20px 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>
|
||||
39
erp_web/js/easyui/demo/tabs/striptools.html
Normal file
39
erp_web/js/easyui/demo/tabs/striptools.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!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>
|
||||
<p>Click the mini-buttons on the tab strip to perform actions.</p>
|
||||
<div style="margin:20px 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>
|
||||
51
erp_web/js/easyui/demo/tabs/style.html
Normal file
51
erp_web/js/easyui/demo/tabs/style.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs Style - 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 Style</h2>
|
||||
<p>Click the options below to change the tabs style.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<input id="plain" type="checkbox" onclick="setTabs()"><span>plain</span><br>
|
||||
<input id="narrow" type="checkbox" onclick="setTabs()"><span>narrow</span><br>
|
||||
<input id="pill" type="checkbox" onclick="setTabs()"><span>pill</span><br>
|
||||
<input id="justified" type="checkbox" onclick="setTabs()"><span>justified</span>
|
||||
</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 setTabs(){
|
||||
$('#tt').tabs({
|
||||
plain: $('#plain').is(':checked'),
|
||||
narrow: $('#narrow').is(':checked'),
|
||||
pill: $('#pill').is(':checked'),
|
||||
justified: $('#justified').is(':checked')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
erp_web/js/easyui/demo/tabs/tabimage.html
Normal file
41
erp_web/js/easyui/demo/tabs/tabimage.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!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>
|
||||
<p>The tab strip can display big images.</p>
|
||||
<div style="margin:20px 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>
|
||||
45
erp_web/js/easyui/demo/tabs/tabposition.html
Normal file
45
erp_web/js/easyui/demo/tabs/tabposition.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
41
erp_web/js/easyui/demo/tabs/tabstools.html
Normal file
41
erp_web/js/easyui/demo/tabs/tabstools.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!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>
|
||||
<p>Click the buttons on the top right of tabs header to add or remove tab panel.</p>
|
||||
<div style="margin:20px 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
erp_web/js/easyui/demo/tabs/tree_data1.json
Normal file
49
erp_web/js/easyui/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