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

升级easyUI到1.9.4版本

parent 0527b980
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Collapse Title in 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>Custom Collapse Title in Layout</h2>
<p>Any components can display on the title bar of a collapsed panel.</p>
<div style="margin:20px 0;"></div>
<div id="cc" class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'east',split:true,hideCollapsedContent:false" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true,collapsed:true,
hideExpandTool: true,
expandMode: null,
hideCollapsedContent: false,
collapsedSize: 68,
collapsedContent: function(){
return $('#titlebar');
}
" title="West" style="width:100px;"></div>
<div data-options="region:'center',title:'Main Title'">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns: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',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="60">Status</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="titlebar" style="padding:2px">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'layout-button-right'" onclick="$('#cc').layout('expand','west')"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid 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>Fluid Layout</h2>
<p>Percentage width of region panel in a layout.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div id="p" data-options="region:'west'" title="West" style="width:30%;padding:10px">
<p>width: 30%</p>
</div>
<div data-options="region:'center'" title="Center">
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,21 +11,18 @@
</head>
<body>
<h2>Nested Layout</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The layout region panel contains another layout or other components.</div>
</div>
<div style="margin:10px 0;"></div>
<p>The layout region panel contains another layout or other components.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',iconCls:'icon-ok'" title="Center">
<div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true,border:false" style="height:50px"></div>
<div data-options="region:'west',split:true,border:false" style="width:100px"></div>
<div data-options="region:'center',border:false"></div>
<div data-options="region:'north',split:true" style="height:50px"></div>
<div data-options="region:'west',split:true" style="width:100px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</div>
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>No collapsible button in Layout</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The layout region panel has no collapsible button.</div>
</div>
<div style="margin:10px 0;"></div>
<p>The layout region panel has no collapsible button.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
......
......@@ -11,18 +11,23 @@
</head>
<body>
<h2>Basic LinkButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Buttons can be created from &lt;a/&gt; link.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;">
<p>Buttons can be created from &lt;a&gt; or &lt;button&gt; elements.</p>
<div style="margin:10px 0 40px 0;"></div>
<p>Basic Buttons</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
<a href="#" class="easyui-linkbutton">Text Button</a>
</div>
<p>Fixed Width Buttons</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:80px">Print</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:80px">Reload</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:80px">Help</a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid LinkButton - 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 LinkButton</h2>
<p>This example shows how to set the width of LinkButton to a percentage of its parent container.</p>
<div style="margin:10px 0 40px 0;"></div>
<p>width: 15%</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:15%">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:15%">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" style="width:15%">Cut</a>
<a href="#" class="easyui-linkbutton" style="width:15%">Text Button</a>
</div>
<p>width: 20%</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:20%">Search</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:20%">Print</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:20%">Reload</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:20%">Help</a>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,22 +11,19 @@
</head>
<body>
<h2>Button Group</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>In a button group only one button can be selected.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;border:1px solid #ddd;">
<p>In a button group only one button can be selected.</p>
<div style="margin:10px 0 40px 0;"></div>
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">Button 2</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 3</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 4</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 5</a>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;border:1px solid #ddd;">
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 1</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 2</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true,selected:true">Button 2</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 3</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 4</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 5</a>
......
......@@ -11,23 +11,22 @@
</head>
<body>
<h2>Icon Align on LinkButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Change the icon align to place icon on left or right of button.</div>
<p>Change the icon align to place icon on left, right, top or bottom of button.</p>
<div style="margin:10px 0 40px 0;"></div>
<div style="margin:10px 0 20px 0">
<span>Select Icon Align: </span>
<select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})">
<option value="left">Left</option>
<option value="right">Right</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
</select>
</div>
<div style="margin:10px 0;"></div>
<div id="button-bar">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
</div>
<div style="margin:10px 0">
<span>Select Icon Align: </span>
<select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})">
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,12 +11,9 @@
</head>
<body>
<h2>Plain LinkButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The link buttons have plain effect.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;border:1px solid #ddd;">
<p>The buttons with plain style have transparent background.</p>
<div style="margin:10px 0 40px 0;"></div>
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LinkButton Size - 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>LinkButton Size</h2>
<p>This sample shows how to display small buttons and large buttons.</p>
<div style="margin:10px 0 40px 0;"></div>
<p>Small Buttons</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
<a href="#" class="easyui-linkbutton">Text Button</a>
</div>
<p>Large Buttons</p>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style LinkButton - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/color.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>Style LinkButton</h2>
<p>This example shows how to style a linkbutton.</p>
<div style="margin:10px 0 40px 0;"></div>
<div style="margin:20px 0">
<a href="#" class="easyui-linkbutton c1" style="width:120px">Button1</a>
<a href="#" class="easyui-linkbutton c2" style="width:120px">Button2</a>
<a href="#" class="easyui-linkbutton c3" style="width:120px">Button3</a>
<a href="#" class="easyui-linkbutton c4" style="width:120px">Button4</a>
</div>
<div style="margin:20px 0">
<a href="#" class="easyui-linkbutton c5" style="width:120px">Button5</a>
<a href="#" class="easyui-linkbutton c6" style="width:120px">Button6</a>
<a href="#" class="easyui-linkbutton c7" style="width:120px">Button7</a>
<a href="#" class="easyui-linkbutton c8" style="width:120px">Button8</a>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,16 +11,13 @@
</head>
<body>
<h2>Toggle Button</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the button below to switch its selected state.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;">
<p>Click the button below to switch its selected state.</p>
<div style="margin:10px 0 40px 0;"></div>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',toggle:true">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',toggle:true">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',toggle:true,disabled:true">Cut</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',toggle:true,selected:true">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',toggle:true">Cut</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true">Text Button</a>
</div>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic MaskedBox - 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 MaskedBox</h2>
<p>The maskedbox enforces its structure as the user types.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Basic MaskedBox" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-maskedbox" mask="(999) 999-9999" label="Phone Number:" labelPosition="top" style="width:100%">
</div>
<div style="margin-bottom:20px">
<input class="easyui-maskedbox" mask="9999 9999 9999 9999" label="Credit Card:" labelPosition="top" style="width:100%">
</div>
<div style="margin-bottom:20px">
<input class="easyui-maskedbox" mask="99%" label="Percent:" labelPosition="top" style="width:100%">
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Basic Menu</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click on page to display menu.</div>
</div>
<div style="margin:10px 0;"></div>
<p>Right click on page to display menu.</p>
<div style="margin:20px 0;"></div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">New</div>
......
......@@ -11,30 +11,20 @@
</head>
<body>
<h2>Custom Menu Item</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click on page to display menu, move to the 'Open' item to display its custom sub content.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="mm" class="easyui-menu" style="width:120px;">
<p>Right click on page to display menu, move to the 'Open' item to display its custom sub content.</p>
<div style="margin:20px 0;"></div>
<div id="mm" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div class="menu-content" style="text-align:left;padding:10px">
<div style="font-weight:bold;font-size:16px">Select your Language:</div>
<ul style="margin:0;padding:0 0 0 40px">
<li><a href="javascript:void(0)">Java</a></li>
<li><a href="javascript:void(0)">Basic</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Fortran</a></li>
<li>
<span>Other</span>
<input>
</li>
<div style="font-weight:bold;font-size:14px;margin-bottom:10px">Select Your Language:</div>
<ul id="tt">
<li>Java</li>
<li>Basic</li>
<li>C++</li>
<li>Fortran</li>
</ul>
<div style="padding:10px 0 0 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
......@@ -44,6 +34,8 @@
</div>
<script>
$(function(){
$('#mm').menu();
$('#tt').tree();
$(document).bind('contextmenu',function(e){
e.preventDefault();
$('#mm').menu('show', {
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Menu Events</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click on page to display menu and click an item.</div>
</div>
<div style="margin:10px 0;"></div>
<p>Right click on page to display menu and click an item.</p>
<div style="margin:20px 0;"></div>
<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
<div data-options="name:'new'">New</div>
<div data-options="name:'save',iconCls:'icon-save'">Save</div>
......@@ -23,9 +20,11 @@
<div class="menu-sep"></div>
<div data-options="name:'exit'">Exit</div>
</div>
<div id="log" class="easyui-panel" title="Event Log" style="height:250px;padding:10px">
</div>
<script>
function menuHandler(item){
alert(item.name);
$('#log').prepend('<p>Click Item: '+item.name+'</p>');
}
$(function(){
$(document).bind('contextmenu',function(e){
......
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