升级easyUI到1.9.4版本

This commit is contained in:
季圣华
2020-02-15 00:37:43 +08:00
parent 0527b980ea
commit ab2872c1ed
1197 changed files with 96263 additions and 40643 deletions

View 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>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Row Editing DataGrid - 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>
<table id="dg" data-options="
header:'#hh',
iconCls: 'icon-edit',
singleSelect: true,
fit:true,
fitColumns:true,
border: false,
scrollbarSize: 0,
data: data,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'textbox'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
</tr>
</thead>
</table>
<div id="hh">
<div class="m-toolbar">
<div class="m-title">Row Editing</div>
<div class="m-right">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"></a>
</div>
</div>
</div>
<script type="text/javascript">
var data = [
{"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"}
];
$(function(){
$('#dg').datagrid({
data: data
});
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
</script>
</body>
</html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1,46 @@
<!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 Dialog - 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="position:relative">
<header>
<div class="m-toolbar">
<div class="m-title">Basic Dialog</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>
<div style="text-align:center;margin:50px 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:80px;height:30px" onclick="$('#dlg1').dialog('open').dialog('center')">Login</a>
</div>
<div id="dlg1" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Login'">
<div style="margin-bottom:10px">
<input class="easyui-textbox" prompt="Username" style="width:100%;height:30px">
</div>
<div>
<input class="easyui-textbox" type="password" prompt="Password" style="width:100%;height:30px">
</div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dlg1').dialog('close')">Sign in</a>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Message Dialog - 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="position:relative">
<header>
<div class="m-toolbar">
<div class="m-title">Message Dialog</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>
<div style="text-align:center;margin:50px 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:80px;height:30px" onclick="$('#dlg1').dialog('open').dialog('center')">Click me</a>
</div>
<div id="dlg1" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Information'">
<p>This is a message dialog.</p>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dlg1').dialog('close')">OK</a>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!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 Form - 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="position:relative;padding:20px">
<header>
<div class="m-toolbar">
<div class="m-title">Basic Form</div>
<div class="m-right">
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" outline="true" onclick="$('#ff').form('reset')" style="width:60px">Reset</a>
</div>
</div>
</header>
<form id="ff">
<div style="margin-bottom:10px">
<input class="easyui-textbox" label="Full name:" prompt="Full name" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input class="easyui-datebox" label="Birthday:" prompt="Birthday" data-options="editable:false,panelWidth:220,panelHeight:240,iconWidth:30" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input class="easyui-passwordbox" label="Password:" prompt="Password" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input class="easyui-numberbox" label="Number:" prompt="Number" style="width:100%">
</div>
<div style="margin-bottom:10px">
<label class="textbox-label">Switch:</label><!--
--><input class="easyui-switchbutton">
</div>
</form>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1,32 @@
<!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 Layout - 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">Layout</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" iconCls="icon-search" plain="true" outline="true">Search</a>
</div>
</div>
</header>
<footer style="padding:2px 3px">
<input class="easyui-textbox" style="width:100%;height:32px;" data-options="prompt:'Type something here',buttonText:'<span style=\'padding:0 15px\'>Send</span>'">
</footer>
</div>
</body>
</html>

View File

@@ -0,0 +1,39 @@
<!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 Menu - 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</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',menu:'#mm',menuAlign:'right',hasDownArrow:false"></a>
</div>
</div>
</header>
</div>
<div id="mm" class="easyui-menu" style="width:150px;">
<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>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Menubar - 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">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px">Home</a>
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit',outline:true" style="width:70px">Edit</a>
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help',outline:true" style="width:75px">Help</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px">About</a>
</div>
</div>
</header>
</div>
<div id="mm1" class="easyui-menu" style="width:150px;">
<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>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
</body>
</html>

View 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>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1,39 @@
<!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 Panel - 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">Navigation</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.go('#p2')">Goto Panel2</a>
</div>
</div>
<div id="p2" class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">Panel2</div>
<div class="m-left">
<a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a>
</div>
</div>
</header>
<div style="margin:50px 0 0;text-align:center">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$.mobile.back()">Go Back</a>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1 @@
<!doctype html>

View File

@@ -0,0 +1,63 @@
<!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>

View File

@@ -0,0 +1,45 @@
<!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>

View File

@@ -0,0 +1,76 @@
<!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>

View File

@@ -0,0 +1,56 @@
<!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>

View File

@@ -0,0 +1,56 @@
<!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>