升级easyUI到1.9.4版本
This commit is contained in:
季圣华
18
erp_web/js/easyui/demo/accordion/_content.html
Normal file
18
erp_web/js/easyui/demo/accordion/_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>
|
||||
51
erp_web/js/easyui/demo/accordion/actions.html
Normal file
51
erp_web/js/easyui/demo/accordion/actions.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion Actions - 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>Accordion Actions</h2>
|
||||
<p>Click the buttons below to add or remove accordion items.</p>
|
||||
<div style="margin:20px 0 10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
|
||||
</div>
|
||||
<div id="aa" class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function selectPanel(){
|
||||
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
|
||||
if (s){
|
||||
$('#aa').accordion('select',s);
|
||||
}
|
||||
});
|
||||
}
|
||||
var idx = 1;
|
||||
function addPanel(){
|
||||
$('#aa').accordion('add',{
|
||||
title:'Title'+idx,
|
||||
content:'<div style="padding:10px">Content'+idx+'</div>'
|
||||
});
|
||||
idx++;
|
||||
}
|
||||
function removePanel(){
|
||||
var pp = $('#aa').accordion('getSelected');
|
||||
if (pp){
|
||||
var index = $('#aa').accordion('getPanelIndex',pp);
|
||||
$('#aa').accordion('remove',index);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
erp_web/js/easyui/demo/accordion/ajax.html
Normal file
28
erp_web/js/easyui/demo/accordion/ajax.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading Accordion Content with AJAX - 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>Loading Accordion Content with AJAX</h2>
|
||||
<p>Click AJAX panel header to load content via AJAX.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
erp_web/js/easyui/demo/accordion/basic.html
Normal file
52
erp_web/js/easyui/demo/accordion/basic.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Accordion - 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 Accordion</h2>
|
||||
<p>Click on panel header to show its content.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px 0;">
|
||||
<ul class="easyui-tree">
|
||||
<li>
|
||||
<span>Foods</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Fruits</span>
|
||||
<ul>
|
||||
<li>apple</li>
|
||||
<li>orange</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Vegetables</span>
|
||||
<ul>
|
||||
<li>tomato</li>
|
||||
<li>carrot</li>
|
||||
<li>cabbage</li>
|
||||
<li>potato</li>
|
||||
<li>lettuce</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
erp_web/js/easyui/demo/accordion/datagrid_data1.json
Normal file
12
erp_web/js/easyui/demo/accordion/datagrid_data1.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
33
erp_web/js/easyui/demo/accordion/expandable.html
Normal file
33
erp_web/js/easyui/demo/accordion/expandable.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Keep Expandable Panel in Accordion - 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>Keep Expandable Panel in Accordion</h2>
|
||||
<p>Keep a expandable panel and prevent it from collapsing.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;">
|
||||
<input class="easyui-searchbox" prompt="Enter something here" style="width:300px;">
|
||||
</div>
|
||||
<div title="About" data-options="selected:true" style="padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Title1" style="padding:10px">
|
||||
<p>Content1</p>
|
||||
</div>
|
||||
<div title="Title2" style="padding:10px">
|
||||
<p>Content2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
erp_web/js/easyui/demo/accordion/fluid.html
Normal file
33
erp_web/js/easyui/demo/accordion/fluid.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid Accordion - 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 Accordion</h2>
|
||||
<p>This example shows how to set the width of accordion to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:100%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 100%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
|
||||
<div class="easyui-accordion" style="width:50%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 50%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
erp_web/js/easyui/demo/accordion/horizontal.html
Normal file
52
erp_web/js/easyui/demo/accordion/horizontal.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Horizontal Accordion - 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>Horizontal Accordion</h2>
|
||||
<p>You can easily set the 'halign' property to create a horizontal accordion.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" halign="left" style="width:700px;height:300px;">
|
||||
<div title="About" titleDirection="up" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" titleDirection="up" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="TreeMenu" titleDirection="up" style="padding:10px;">
|
||||
<ul class="easyui-tree">
|
||||
<li>
|
||||
<span>Foods</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Fruits</span>
|
||||
<ul>
|
||||
<li>apple</li>
|
||||
<li>orange</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Vegetables</span>
|
||||
<ul>
|
||||
<li>tomato</li>
|
||||
<li>carrot</li>
|
||||
<li>cabbage</li>
|
||||
<li>potato</li>
|
||||
<li>lettuce</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
erp_web/js/easyui/demo/accordion/multiple.html
Normal file
34
erp_web/js/easyui/demo/accordion/multiple.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Accordion Panels - 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>Multiple Accordion Panels</h2>
|
||||
<p>Enable 'multiple' mode to expand multiple panels at one time.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;">
|
||||
<div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
|
||||
</div>
|
||||
<div title="Java" style="padding:10px;">
|
||||
<p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
|
||||
</div>
|
||||
<div title="C#" style="padding:10px;">
|
||||
<p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
|
||||
</div>
|
||||
<div title="Ruby" style="padding:10px;">
|
||||
<p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
|
||||
</div>
|
||||
<div title="Fortran" style="padding:10px;">
|
||||
<p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
erp_web/js/easyui/demo/accordion/tools.html
Normal file
48
erp_web/js/easyui/demo/accordion/tools.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion 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>Accordion Tools</h2>
|
||||
<p>Click the tools on top right of panel to perform actions.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one ore more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="DataGrid" style="padding:10px" data-options="
|
||||
selected:true,
|
||||
tools:[{
|
||||
iconCls:'icon-reload',
|
||||
handler:function(){
|
||||
$('#dg').datagrid('reload');
|
||||
}
|
||||
}]">
|
||||
<table id="dg" class="easyui-datagrid"
|
||||
data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product ID</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:150">Attribute</th>
|
||||
<th data-options="field:'status',width:50,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user