This commit is contained in:
季圣华
18
WebRoot/js/easyui-1.3.5/demo/accordion/_content.html
Normal file
18
WebRoot/js/easyui-1.3.5/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>
|
||||
54
WebRoot/js/easyui-1.3.5/demo/accordion/actions.html
Normal file
54
WebRoot/js/easyui-1.3.5/demo/accordion/actions.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to add or remove accordion items.</div>
|
||||
</div>
|
||||
<div style="margin: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>
|
||||
31
WebRoot/js/easyui-1.3.5/demo/accordion/ajax.html
Normal file
31
WebRoot/js/easyui-1.3.5/demo/accordion/ajax.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click AJAX panel header to load content via AJAX.</div>
|
||||
</div>
|
||||
<div style="margin: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>
|
||||
55
WebRoot/js/easyui-1.3.5/demo/accordion/basic.html
Normal file
55
WebRoot/js/easyui-1.3.5/demo/accordion/basic.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click on panel header to show its content.</div>
|
||||
</div>
|
||||
<div style="margin: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;">
|
||||
<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
WebRoot/js/easyui-1.3.5/demo/accordion/datagrid_data1.json
Normal file
12
WebRoot/js/easyui-1.3.5/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"}
|
||||
]}
|
||||
36
WebRoot/js/easyui-1.3.5/demo/accordion/expandable.html
Normal file
36
WebRoot/js/easyui-1.3.5/demo/accordion/expandable.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Keep a expandable panel and prevent it from collapsing.</div>
|
||||
</div>
|
||||
<div style="margin: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;height:25px;">
|
||||
</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>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/accordion/multiple.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/accordion/multiple.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Enable 'multiple' mode to expand multiple panels at one time.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;">
|
||||
<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>
|
||||
51
WebRoot/js/easyui-1.3.5/demo/accordion/tools.html
Normal file
51
WebRoot/js/easyui-1.3.5/demo/accordion/tools.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the tools on top right of panel to perform actions.</div>
|
||||
</div>
|
||||
<div style="margin: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