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

升级easyUI到1.9.4版本

parent 0527b980
......@@ -11,13 +11,14 @@
</head>
<body>
<h2>Time Range</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The time value is constrained in specified range.</div>
</div>
<div style="margin:10px 0;">
<p>The time value is constrained in specified range.</p>
<div style="margin:20px 0;">
<span>From 08:30 to 18:00</span>
</div>
<input class="easyui-timespinner" data-options="min:'08:30',max:'18:00'" style="width:80px;"></input>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-timespinner" data-options="label:'Select Time:',labelPosition:'top',min:'08:30',max:'18:00'" style="width:100%;">
</div>
</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
......@@ -11,13 +11,10 @@
</head>
<body>
<h2>Ajax Tooltip</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tooltip content can be loaded via AJAX.</div>
</div>
<div style="margin:10px 0;"></div>
<!-- <a href="#" class="easyui-tooltip" data-options="-->
<!-- content: $('<div></div>'),-->
<p>The tooltip content can be loaded via AJAX.</p>
<div style="margin:20px 0;"></div>
<a href="#" class="easyui-tooltip" data-options="
content: $('<div></div>'),
onShow: function(){
$(this).tooltip('arrow').css('left', 20);
$(this).tooltip('tip').css('left', $(this).offset().left);
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Basic Tooltip</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Hover the links to display tooltip message.</div>
</div>
<div style="margin:10px 0;"></div>
<p>Hover the links to display tooltip message.</p>
<div style="margin:20px 0;"></div>
<p>The tooltip can use each elements title attribute.
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
</p>
......
......@@ -11,18 +11,17 @@
</head>
<body>
<h2>Custom Tooltip Content</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Access to each elements attribute to get the tooltip content.</div>
<p>Access to each elements attribute to get the tooltip content.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel">
<div id="pg" data-options="total:114"></div>
</div>
<div style="margin:10px 0;"></div>
<div id="pg" data-options="total:114" style="border:1px solid #ddd;"></div>
<script>
$(function(){
$('#pg').pagination().find('a.l-btn').tooltip({
content: function(){
var cc = $(this).find('span.l-btn-empty').attr('class').split(' ');
var cc = $(this).find('span.l-btn-icon').attr('class').split(' ');
var icon = cc[1].split('-')[1];
return icon + ' page';
}
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Custom Tooltip Style</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to change the tooltip style.</div>
</div>
<div style="margin:10px 0;"></div>
<p>This sample shows how to change the tooltip style.</p>
<div style="margin:s0px 0;"></div>
<div style="padding:10px 200px">
<div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
</div>
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Tooltip Position</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the drop-down list below to change where the tooltip appears.</div>
</div>
<div style="margin:10px 0;"></div>
<p>Click the drop-down list below to change where the tooltip appears.</p>
<div style="margin:20px 0;"></div>
<span>Select position:</span>
<select onchange="changePosition(this.value)">
<option value="bottom">Bottom</option>
......
......@@ -11,11 +11,8 @@
</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>
<p>This sample shows how to create a tooltip style toolbar.</p>
<div style="margin:20px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="
hideEvent: 'none',
......
......@@ -11,11 +11,8 @@
</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>
<p>This sample shows how to create a tooltip dialog.</p>
<div style="margin:20px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.
</div>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree 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>Tree Actions</h2>
<p>Click the buttons below to perform actions.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
<a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
<a href="#" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
</div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<script type="text/javascript">
function collapseAll(){
$('#tt').tree('collapseAll');
}
function expandAll(){
$('#tt').tree('expandAll');
}
function expandTo(){
var node = $('#tt').tree('find',113);
$('#tt').tree('expandTo', node.target).tree('select', node.target);
}
function getSelected(){
var node = $('#tt').tree('getSelected');
if (node){
var s = node.text;
if (node.attributes){
s += ","+node.attributes.p1+","+node.attributes.p2;
}
alert(s);
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Tree - 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>Animation Tree</h2>
<p>Apply 'animate' property to true to enable animation effect.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tree - 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 Tree</h2>
<p>Click the arrow on the left to expand or collapse nodes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree">
<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>CheckBox Tree - 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>CheckBox Tree</h2>
<p>Tree nodes with check boxes.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="getChecked()">GetChecked</a>
</div>
<div style="margin:10px 0">
<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck
<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
</div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,checkbox:true"></ul>
</div>
<script type="text/javascript">
function getChecked(){
var nodes = $('#tt').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Context Menu - 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>Tree Context Menu</h2>
<p>Right click on a node to display context menu.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
"></ul>
</div>
<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="expand()">Expand</div>
<div onclick="collapse()">Collapse</div>
</div>
<script type="text/javascript">
function append(){
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node?node.target:null),
data: [{
text: 'new item1'
},{
text: 'new item2'
}]
});
}
function removeit(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}
function collapse(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('collapse',node.target);
}
function expand(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('expand',node.target);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom CheckBox Tree - 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 CheckBox Tree</h2>
<p>Tree nodes with customized check boxes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="
url:'tree_data1.json',
method:'get',
animate:true,
checkbox:function(node){
if (node.id == 11 || node.id == 122){
return true;
}
}
"></ul>
</div>
</body>
</html>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>Number Range - jQuery EasyUI Demo</title>
<title>Drag Drop Tree Nodes - 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">
......@@ -10,12 +10,11 @@
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Number Range</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The value is constrained to a range between 10 and 90.</div>
<h2>Drag Drop Tree Nodes</h2>
<p>Press mouse down and drag a node to another position.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">
</body>
</html>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>Group ComboBox - jQuery EasyUI Demo</title>
<title>Editable Tree - 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">
......@@ -10,19 +10,18 @@
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Group ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>This example shows how to display combobox items in groups.</div>
</div>
<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
url: 'combobox_data2.json',
<h2>Editable Tree</h2>
<p>Click the node to begin edit, press enter key to stop edit or esc key to cancel edit.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group'
">
animate: true,
onClick: function(node){
$(this).tree('beginEdit',node.target);
}
"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formatting Tree Nodes - 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>Formatting Tree Nodes</h2>
<p>This example shows how to display extra information on nodes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="
url:'tree_data1.json',
method:'get',
animate:true,
formatter:function(node){
var s = node.text;
if (node.children){
s += '&nbsp;<span style=\'color:blue\'>(' + node.children.length + ')</span>';
}
return s;
}
">
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Node Icons - 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>Tree Node Icons</h2>
<p>This sample illustrates how to add icons to tree node.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data2.json',method:'get',animate:true"></ul>
</div>
</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