Commit 76a0033a authored by 季圣华's avatar 季圣华
Browse files

清空旧版本

parent df57ada9
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic Tabs - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-tabs" data-options="fit:true,border:false,tabWidth:80,tabHeight:35"> <div title="Java" style="padding:10px"> <p>Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is specifically designed to have as few implementation dependencies as possible.</p> <p>Java applications are typically compiled to bytecode (class file) that can run on any Java virtual machine (JVM) regardless of computer architecture.</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. Originally developed by IBM at their campus in south San Jose, California[1] in the 1950s for scientific and engineering applications.</p> </div> <div title="Perl" style="padding:10px"> <p>Perl is a family of high-level, general-purpose, interpreted, dynamic programming languages. The languages in this family include Perl 5 and Perl 6.</p> <p>Though Perl is not officially an acronym, there are various backronyms in use, such as: Practical Extraction and Reporting Language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions.</p> </div> </div> <style scoped> p{ line-height:150%; } </style></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Navigation Tabs - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-title">Devices</div> </div> </header> <div class="easyui-tabs" data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true"> <div style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/modem.png'/><br>Modem </div> <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 style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/scanner.png'/><br>Scanner </div> <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 style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/pda.png'/><br>Pda </div> <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 style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/tablet.png'/><br>Pda </div> <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> </div> <style scoped> .tt-inner{ display:inline-block; line-height:12px; padding-top:5px; } p{ line-height:150%; } </style></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Pill Tabs - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-tabs" data-options="fit:true,border:false,pill:true,justified:true,tabWidth:80,tabHeight:35"> <div title="Java" style="padding:10px"> <p>Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is specifically designed to have as few implementation dependencies as possible.</p> <p>Java applications are typically compiled to bytecode (class file) that can run on any Java virtual machine (JVM) regardless of computer architecture.</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. Originally developed by IBM at their campus in south San Jose, California[1] in the 1950s for scientific and engineering applications.</p> </div> <div title="Perl" style="padding:10px"> <p>Perl is a family of high-level, general-purpose, interpreted, dynamic programming languages. The languages in this family include Perl 5 and Perl 6.</p> <p>Though Perl is not officially an acronym, there are various backronyms in use, such as: Practical Extraction and Reporting Language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions.</p> </div> </div> <style scoped> p{ line-height:150%; } </style></body> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Basic Toolbar - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">Basic Toolbar</div>
<div class="m-left">
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true">Back</a>
</div>
<div class="m-right">
<a href="javascript:void(0)" class="easyui-linkbutton m-next" plain="true" outline="true">Next</a>
</div>
</div>
</header>
<ul class="easyui-datalist" data-options="
fit: true,
lines: true,
border: false,
textFormatter: function(value){
return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
},
onClickRow: function(index,row){
$('#p2-title').html(row.text);
$.mobile.go('#p2');
}
">
<li>Large</li>
<li>Spotted Adult Female</li>
<li>Venomless</li>
<li>Rattleless</li>
<li>Green Adult</li>
<li>Tailless</li>
<li>With tail</li>
<li>Adult Female</li>
</ul>
</div>
<div id="p2" class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span id="p2-title" class="m-title">Detail</span>
<div class="m-left">
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="$.mobile.back()">Back</a>
</div>
</div>
</header>
<div style="margin:50px 0 0;text-align:center">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.back()">Go Back</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Toolbar Button - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">Toolbar Button</div>
</div>
</header>
<footer>
<div class="m-buttongroup m-buttongroup-justified" style="width:100%">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top',plain:true">Picture</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">Clip Art</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">Shapes</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top',plain:true">SmartArt</a>
</div>
</footer>
<ul class="easyui-datalist" data-options="
fit: true,
lines: true,
border: false
">
<li>Large</li>
<li>Spotted Adult Female</li>
<li>Venomless</li>
<li>Rattleless</li>
<li>Green Adult</li>
<li>Tailless</li>
<li>With tail</li>
<li>Adult Female</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Menu on Toolbar - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">Menu on Toolbar</div>
<div class="m-left">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-man',plain:true"></a>
</div>
<div class="m-right">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"></a>
<a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',plain:true,hasDownArrow:false,menu:'#mm',menuAlign:'right'"></a>
</div>
</div>
</header>
<div id="mm" class="easyui-menu" style="width:150px;" data-options="itemHeight:30,noline:true">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>Toolbar</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<ul class="easyui-datalist" data-options="
fit: true,
lines: true,
border: false,
textFormatter: function(value){
return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
},
onClickRow: function(index,row){
$('#p2-title').html(row.text);
$.mobile.go('#p2');
}
">
<li>Large</li>
<li>Spotted Adult Female</li>
<li>Venomless</li>
<li>Rattleless</li>
<li>Green Adult</li>
<li>Tailless</li>
<li>With tail</li>
<li>Adult Female</li>
</ul>
</div>
<div id="p2" class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span id="p2-title" class="m-title">Detail</span>
<div class="m-left">
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="$.mobile.back()">Back</a>
</div>
</div>
</header>
<div style="margin:50px 0 0;text-align:center">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.back()">Go Back</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Basic Tree - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<div class="easyui-navpanel" style="padding:10px">
<header>
<div class="m-toolbar">
<div class="m-title">Basic Tree</div>
</div>
</header>
<ul class="easyui-tree" data-options="animate:true">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Drag Drop Tree Nodes - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<div class="easyui-navpanel" style="padding:10px">
<header>
<div class="m-toolbar">
<div class="m-title">Drag Drop Tree Nodes</div>
</div>
</header>
<ul class="easyui-tree" data-options="animate:true,dnd:true">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
{"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"}
]}
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Calendar - 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 Calendar</h2>
<p>Click to select date.</p>
<div style="margin:20px 0"></div>
<div class="easyui-calendar" style="width:250px;height:250px;"></div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Calendar - 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>Custom Calendar</h2>
<p>This example shows how to custom the calendar date by using 'formatter' function.</p>
<div style="margin:20px 0"></div>
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div>
<script>
var d1 = Math.floor((Math.random()*30)+1);
var d2 = Math.floor((Math.random()*30)+1);
function formatDay(date){
var m = date.getMonth()+1;
var d = date.getDate();
var opts = $(this).calendar('options');
if (opts.month == m && d == d1){
return '<div class="icon-ok md">' + d + '</div>';
} else if (opts.month == m && d == d2){
return '<div class="icon-search md">' + d + '</div>';
}
return d;
}
</script>
<style scoped="scoped">
.md{
height:16px;
line-height:16px;
background-position:2px center;
text-align:right;
font-weight:bold;
padding:0 2px;
color:red;
}
</style>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment