Commit c1aac18b authored by 季圣华's avatar 季圣华
Browse files

删除目录WebRoot

parent 177828ce
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip as Toolbar - 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>Tooltip as Toolbar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to create a tooltip style toolbar.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="
hideEvent: 'none',
content: function(){
return $('#toolbar');
},
onShow: function(){
var t = $(this);
t.tooltip('tip').focus().unbind().bind('blur',function(){
t.tooltip('hide');
});
}
">Hover me</a> to display toolbar.</p>
</div>
<div style="display:none">
<div id="toolbar">
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip Dialog - 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>Tooltip Dialog</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to create a tooltip dialog.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.
</div>
<script>
$(function(){
$('#dd').tooltip({
content: $('<div></div>'),
showEvent: 'click',
onUpdate: function(content){
content.panel({
width: 200,
border: false,
title: 'Login',
href: '_dialog.html'
});
},
onShow: function(){
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TreeGrid 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>TreeGrid Actions</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons below to perform actions.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
</div>
<table id="tg" class="easyui-treegrid" title="TreeGrid Actions" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
<th data-options="field:'persons',width:60,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:80">End Date</th>
<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
function collapseAll(){
$('#tg').treegrid('collapseAll');
}
function expandAll(){
$('#tg').treegrid('expandAll');
}
function expandTo(){
$('#tg').treegrid('expandTo',21).treegrid('select',21);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TreeGrid - 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 TreeGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>TreeGrid allows you to expand or collapse group rows.</div>
</div>
<div style="margin:10px 0;"></div>
<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
url: 'treegrid_data1.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="220">Name</th>
<th data-options="field:'size'" width="100" align="right">Size</th>
<th data-options="field:'date'" width="150">Modified Date</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination in TreeGrid - 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>Client Side Pagination in TreeGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to implement client side pagination in TreeGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="tg" class="easyui-treegrid" title="Client Side Pagination" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name',
loadFilter: pagerFilter,
pagination: true,
pageSize: 2,
pageList: [2,5,10]
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
<th data-options="field:'persons',width:60,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:80">End Date</th>
<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
function pagerFilter(data){
if ($.isArray(data)){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var state = dg.data('treegrid');
var opts = dg.treegrid('options');
var pager = dg.treegrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.treegrid('loadData',data);
}
});
if (!data.topRows){
data.topRows = [];
data.childRows = [];
for(var i=0; i<data.rows.length; i++){
var row = data.rows[i];
row._parentId ? data.childRows.push(row) : data.topRows.push(row);
}
data.total = (data.topRows.length);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));
return data;
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TreeGrid ContextMenu - 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>TreeGrid ContextMenu</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click to display the context menu.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name',
onContextMenu: onContextMenu
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
<th data-options="field:'persons',width:60,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:80">End Date</th>
<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
</tr>
</thead>
</table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
<div class="menu-sep"></div>
<div onclick="collapse()">Collapse</div>
<div onclick="expand()">Expand</div>
</div>
<script type="text/javascript">
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
function onContextMenu(e,row){
e.preventDefault();
$(this).treegrid('select', row.id);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
var idIndex = 100;
function append(){
idIndex++;
var d1 = new Date();
var d2 = new Date();
d2.setMonth(d2.getMonth()+1);
var node = $('#tg').treegrid('getSelected');
$('#tg').treegrid('append',{
parent: node.id,
data: [{
id: idIndex,
name: 'New Task'+idIndex,
persons: parseInt(Math.random()*10),
begin: $.fn.datebox.defaults.formatter(d1),
end: $.fn.datebox.defaults.formatter(d2),
progress: parseInt(Math.random()*100)
}]
})
}
function removeIt(){
var node = $('#tg').treegrid('getSelected');
if (node){
$('#tg').treegrid('remove', node.id);
}
}
function collapse(){
var node = $('#tg').treegrid('getSelected');
if (node){
$('#tg').treegrid('collapse', node.id);
}
}
function expand(){
var node = $('#tg').treegrid('getSelected');
if (node){
$('#tg').treegrid('expand', node.id);
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Editable TreeGrid - 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>Editable TreeGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Select one node and click edit button to perform editing.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a>
</div>
<table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name',
showFooter: true
">
<thead>
<tr>
<th data-options="field:'name',width:180,editor:'text'">Task Name</th>
<th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th>
<th data-options="field:'begin',width:80,editor:'datebox'">Begin Date</th>
<th data-options="field:'end',width:80,editor:'datebox'">End Date</th>
<th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
var editingId;
function edit(){
if (editingId != undefined){
$('#tg').treegrid('select', editingId);
return;
}
var row = $('#tg').treegrid('getSelected');
if (row){
editingId = row.id
$('#tg').treegrid('beginEdit', editingId);
}
}
function save(){
if (editingId != undefined){
var t = $('#tg');
t.treegrid('endEdit', editingId);
editingId = undefined;
var persons = 0;
var rows = t.treegrid('getChildren');
for(var i=0; i<rows.length; i++){
var p = parseInt(rows[i].persons);
if (!isNaN(p)){
persons += p;
}
}
var frow = t.treegrid('getFooterRows')[0];
frow.persons = persons;
t.treegrid('reloadFooter');
}
}
function cancel(){
if (editingId != undefined){
$('#tg').treegrid('cancelEdit', editingId);
editingId = undefined;
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TreeGrid with Footer - 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>TreeGrid with Footer</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Show summary information on TreeGrid footer.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="tg"></table>
<script type="text/javascript">
$(function(){
$('#tg').treegrid({
title:'TreeGrid with Footer',
iconCls:'icon-ok',
width:700,
height:250,
rownumbers: true,
animate:true,
collapsible:true,
fitColumns:true,
url:'treegrid_data2.json',
method: 'get',
idField:'id',
treeField:'name',
showFooter:true,
columns:[[
{title:'Task Name',field:'name',width:180},
{field:'persons',title:'Persons',width:60,align:'right'},
{field:'begin',title:'Begin Date',width:80},
{field:'end',title:'End Date',width:80},
{field:'progress',title:'Progress',width:120,
formatter:function(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
}
]]
});
})
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reports using TreeGrid - 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>Reports using TreeGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Using TreeGrid to show complex reports.</div>
</div>
<div style="margin:10px 0;"></div>
<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
url: 'treegrid_data3.json',
method: 'get',
rownumbers: true,
showFooter: true,
idField: 'id',
treeField: 'region'
">
<thead frozen="true">
<tr>
<th field="region" width="200">Region</th>
</tr>
</thead>
<thead>
<tr>
<th colspan="4">2009</th>
<th colspan="4">2010</th>
</tr>
<tr>
<th field="f1" width="60" align="right">1st qrt.</th>
<th field="f2" width="60" align="right">2st qrt.</th>
<th field="f3" width="60" align="right">3st qrt.</th>
<th field="f4" width="60" align="right">4st qrt.</th>
<th field="f5" width="60" align="right">1st qrt.</th>
<th field="f6" width="60" align="right">2st qrt.</th>
<th field="f7" width="60" align="right">3st qrt.</th>
<th field="f8" width="60" align="right">4st qrt.</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]
\ No newline at end of file
{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}
{"total":9,"rows":[
{"id":1,"region":"Wyoming"},
{"id":11,"region":"Albin","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":12,"region":"Canon","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":13,"region":"Egbert","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":2,"region":"Washington"},
{"id":21,"region":"Bellingham","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":22,"region":"Chehalis","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":23,"region":"Ellensburg","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":24,"region":"Monroe","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2}
],"footer":[
{"region":"Total","f1":14000,"f2":12600,"f3":13321,"f4":15281,"f5":14931,"f6":13461,"f7":14126,"f8":12866}
]}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ValidateBox - 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 ValidateBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>It's easy to add validate logic to a input box.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="Register" style="width:400px;padding:10px">
<table>
<tr>
<td>User Name:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input class="easyui-validatebox" data-options="required:true"></td>
</tr>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom ValidateBox Tooltip - 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 ValidateBox Tooltip</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to display another tooltip message on a valid textbox.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="Register" style="width:400px;padding:10px">
<table>
<tr>
<td>User Name:</td>
<td><input class="easyui-validatebox" data-options="prompt:'Enter User Name.',required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="prompt:'Enter a valid email.',required:true,validType:'email'"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="prompt:'Enter your URL.',required:true,validType:'url'"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input class="easyui-validatebox" data-options="prompt:'Enter your phone number.',required:true"></td>
</tr>
</table>
</div>
<script>
$(function(){
$('input.easyui-validatebox').validatebox({
tipOptions: { // the options to create tooltip
showEvent: 'mouseenter',
hideEvent: 'mouseleave',
showDelay: 0,
hideDelay: 0,
zIndex: '',
onShow: function(){
if (!$(this).hasClass('validatebox-invalid')){
if ($(this).tooltip('options').prompt){
$(this).tooltip('update', $(this).tooltip('options').prompt);
} else {
$(this).tooltip('tip').hide();
}
} else {
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
},
onHide: function(){
if (!$(this).tooltip('options').prompt){
$(this).tooltip('destroy');
}
}
}
}).tooltip({
position: 'right',
content: function(){
var opts = $(this).validatebox('options');
return opts.prompt;
},
onShow: function(){
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Window - 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 Window</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Window can be dragged freely on screen.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">
The window content.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Window 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>Custom Window Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right top buttons to perform actions.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="Custom Window Tools" data-options="iconCls:'icon-save',minimizable:false,tools:'#tt'" style="width:500px;height:200px;padding:10px;">
The window content.
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline Window - 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>Inline Window</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The inline window stay inside its parent.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div style="position:relative;width:500px;height:300px;border:1px solid #ccc;overflow:auto;">
<div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true" style="width:250px;height:150px;padding:10px">
This window stay inside its parent
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Window - 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>Modal Window</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the open button below to open the modal window.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">
The window content.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window Layout - 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>Window Layout</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Using layout on window.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:5px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'east',split:true" style="width:100px"></div>
<div data-options="region:'center'" style="padding:10px;">
jQuery EasyUI framework help you build your web page easily.
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="javascript:alert('ok')">Ok</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')">Cancel</a>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
/**
* jQuery EasyUI 1.3.5
*
* Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
*
* Licensed under the GPL or commercial licenses
* To use it on other terms please contact us: info@jeasyui.com
* http://www.gnu.org/licenses/gpl.txt
* http://www.jeasyui.com/license_commercial.php
*
*/
(function(){
var _1={draggable:{js:"jquery.draggable.js"},droppable:{js:"jquery.droppable.js"},resizable:{js:"jquery.resizable.js"},linkbutton:{js:"jquery.linkbutton.js",css:"linkbutton.css"},progressbar:{js:"jquery.progressbar.js",css:"progressbar.css"},tooltip:{js:"jquery.tooltip.js",css:"tooltip.css"},pagination:{js:"jquery.pagination.js",css:"pagination.css",dependencies:["linkbutton"]},datagrid:{js:"jquery.datagrid.js",css:"datagrid.css",dependencies:["panel","resizable","linkbutton","pagination"]},treegrid:{js:"jquery.treegrid.js",css:"tree.css",dependencies:["datagrid"]},propertygrid:{js:"jquery.propertygrid.js",css:"propertygrid.css",dependencies:["datagrid"]},panel:{js:"jquery.panel.js",css:"panel.css"},window:{js:"jquery.window.js",css:"window.css",dependencies:["resizable","draggable","panel"]},dialog:{js:"jquery.dialog.js",css:"dialog.css",dependencies:["linkbutton","window"]},messager:{js:"jquery.messager.js",css:"messager.css",dependencies:["linkbutton","window","progressbar"]},layout:{js:"jquery.layout.js",css:"layout.css",dependencies:["resizable","panel"]},form:{js:"jquery.form.js"},menu:{js:"jquery.menu.js",css:"menu.css"},tabs:{js:"jquery.tabs.js",css:"tabs.css",dependencies:["panel","linkbutton"]},menubutton:{js:"jquery.menubutton.js",css:"menubutton.css",dependencies:["linkbutton","menu"]},splitbutton:{js:"jquery.splitbutton.js",css:"splitbutton.css",dependencies:["menubutton"]},accordion:{js:"jquery.accordion.js",css:"accordion.css",dependencies:["panel"]},calendar:{js:"jquery.calendar.js",css:"calendar.css"},combo:{js:"jquery.combo.js",css:"combo.css",dependencies:["panel","validatebox"]},combobox:{js:"jquery.combobox.js",css:"combobox.css",dependencies:["combo"]},combotree:{js:"jquery.combotree.js",dependencies:["combo","tree"]},combogrid:{js:"jquery.combogrid.js",dependencies:["combo","datagrid"]},validatebox:{js:"jquery.validatebox.js",css:"validatebox.css",dependencies:["tooltip"]},numberbox:{js:"jquery.numberbox.js",dependencies:["validatebox"]},searchbox:{js:"jquery.searchbox.js",css:"searchbox.css",dependencies:["menubutton"]},spinner:{js:"jquery.spinner.js",css:"spinner.css",dependencies:["validatebox"]},numberspinner:{js:"jquery.numberspinner.js",dependencies:["spinner","numberbox"]},timespinner:{js:"jquery.timespinner.js",dependencies:["spinner"]},tree:{js:"jquery.tree.js",css:"tree.css",dependencies:["draggable","droppable"]},datebox:{js:"jquery.datebox.js",css:"datebox.css",dependencies:["calendar","combo"]},datetimebox:{js:"jquery.datetimebox.js",dependencies:["datebox","timespinner"]},slider:{js:"jquery.slider.js",dependencies:["draggable"]},tooltip:{js:"jquery.tooltip.js"},parser:{js:"jquery.parser.js"}};
var _2={"af":"easyui-lang-af.js","ar":"easyui-lang-ar.js","bg":"easyui-lang-bg.js","ca":"easyui-lang-ca.js","cs":"easyui-lang-cs.js","cz":"easyui-lang-cz.js","da":"easyui-lang-da.js","de":"easyui-lang-de.js","el":"easyui-lang-el.js","en":"easyui-lang-en.js","es":"easyui-lang-es.js","fr":"easyui-lang-fr.js","it":"easyui-lang-it.js","jp":"easyui-lang-jp.js","nl":"easyui-lang-nl.js","pl":"easyui-lang-pl.js","pt_BR":"easyui-lang-pt_BR.js","ru":"easyui-lang-ru.js","sv_SE":"easyui-lang-sv_SE.js","tr":"easyui-lang-tr.js","zh_CN":"easyui-lang-zh_CN.js","zh_TW":"easyui-lang-zh_TW.js"};
var _3={};
function _4(_5,_6){
var _7=false;
var _8=document.createElement("script");
_8.type="text/javascript";
_8.language="javascript";
_8.src=_5;
_8.onload=_8.onreadystatechange=function(){
if(!_7&&(!_8.readyState||_8.readyState=="loaded"||_8.readyState=="complete")){
_7=true;
_8.onload=_8.onreadystatechange=null;
if(_6){
_6.call(_8);
}
}
};
document.getElementsByTagName("head")[0].appendChild(_8);
};
function _9(_a,_b){
_4(_a,function(){
document.getElementsByTagName("head")[0].removeChild(this);
if(_b){
_b();
}
});
};
function _c(_d,_e){
var _f=document.createElement("link");
_f.rel="stylesheet";
_f.type="text/css";
_f.media="screen";
_f.href=_d;
document.getElementsByTagName("head")[0].appendChild(_f);
if(_e){
_e.call(_f);
}
};
function _10(_11,_12){
_3[_11]="loading";
var _13=_1[_11];
var _14="loading";
var _15=(easyloader.css&&_13["css"])?"loading":"loaded";
if(easyloader.css&&_13["css"]){
if(/^http/i.test(_13["css"])){
var url=_13["css"];
}else{
var url=easyloader.base+"themes/"+easyloader.theme+"/"+_13["css"];
}
_c(url,function(){
_15="loaded";
if(_14=="loaded"&&_15=="loaded"){
_16();
}
});
}
if(/^http/i.test(_13["js"])){
var url=_13["js"];
}else{
var url=easyloader.base+"plugins/"+_13["js"];
}
_4(url,function(){
_14="loaded";
if(_14=="loaded"&&_15=="loaded"){
_16();
}
});
function _16(){
_3[_11]="loaded";
easyloader.onProgress(_11);
if(_12){
_12();
}
};
};
function _17(_18,_19){
var mm=[];
var _1a=false;
if(typeof _18=="string"){
add(_18);
}else{
for(var i=0;i<_18.length;i++){
add(_18[i]);
}
}
function add(_1b){
if(!_1[_1b]){
return;
}
var d=_1[_1b]["dependencies"];
if(d){
for(var i=0;i<d.length;i++){
add(d[i]);
}
}
mm.push(_1b);
};
function _1c(){
if(_19){
_19();
}
easyloader.onLoad(_18);
};
var _1d=0;
function _1e(){
if(mm.length){
var m=mm[0];
if(!_3[m]){
_1a=true;
_10(m,function(){
mm.shift();
_1e();
});
}else{
if(_3[m]=="loaded"){
mm.shift();
_1e();
}else{
if(_1d<easyloader.timeout){
_1d+=10;
setTimeout(arguments.callee,10);
}
}
}
}else{
if(easyloader.locale&&_1a==true&&_2[easyloader.locale]){
var url=easyloader.base+"locale/"+_2[easyloader.locale];
_9(url,function(){
_1c();
});
}else{
_1c();
}
}
};
_1e();
};
easyloader={modules:_1,locales:_2,base:".",theme:"default",css:true,locale:null,timeout:2000,load:function(_1f,_20){
if(/\.css$/i.test(_1f)){
if(/^http/i.test(_1f)){
_c(_1f,_20);
}else{
_c(easyloader.base+_1f,_20);
}
}else{
if(/\.js$/i.test(_1f)){
if(/^http/i.test(_1f)){
_4(_1f,_20);
}else{
_4(easyloader.base+_1f,_20);
}
}else{
_17(_1f,_20);
}
}
},onProgress:function(_21){
},onLoad:function(_22){
}};
var _23=document.getElementsByTagName("script");
for(var i=0;i<_23.length;i++){
var src=_23[i].src;
if(!src){
continue;
}
var m=src.match(/easyloader\.js(\W|$)/i);
if(m){
easyloader.base=src.substring(0,m.index);
}
}
window.using=easyloader.load;
if(window.jQuery){
jQuery(function(){
easyloader.load("parser",function(){
jQuery.parser.parse();
});
});
}
})();
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