Commit 9bad12b0 authored by 季圣华's avatar 季圣华
Browse files

升级代码结构,采用Maven来管理jar包(13)

parent 63ca1df4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX Content</title>
</head>
<body>
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Panel - 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 Panel</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The panel is a container for other components or elements.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
</div>
<div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, 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>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Panel 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 Panel Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right top buttons to perform actions with panel.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="Custom Panel Tools" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, 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>
</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>Load Panel Content - 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>Load Panel Content</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the refresh button on top right of panel to load content.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="p" class="easyui-panel" title="Load Panel Content" style="width:500px;height:200px;padding:10px;"
data-options="
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#p').panel('refresh', '_content.html');
}
}]
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Panel - 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>Nested Panel</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The panel can be placed inside containers and can contain other components.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="Nested Panel" style="width:500px;height:200px;padding:10px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width:100px;padding:10px">
Left Content
</div>
<div data-options="region:'center'" style="padding:10px">
Right Content
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Panel 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>Panel Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right top buttons to perform actions with panel.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand',true)">Expand</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a>
</div>
<div style="height:350px;border:1px solid #ccc;">
<div id="p" class="easyui-panel" title="Panel Tools" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, 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>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ProgressBar - 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 ProgressBar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the button below to show progress information.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="start()">Start</a>
</div>
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
<script>
function start(){
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
}
};
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic PropertyGrid - 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 PropertyGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click on row to change each property value.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showGroup()">ShowGroup</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="hideGroup()">HideGroup</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showHeader()">ShowHeader</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="hideHeader()">HideHeader</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getChanges()">GetChanges</a>
</div>
<table id="pg" class="easyui-propertygrid" style="width:300px" data-options="
url:'propertygrid_data1.json',
method:'get',
showGroup:true,
scrollbarSize:0
">
</table>
<script type="text/javascript">
function showGroup(){
$('#pg').propertygrid({
showGroup:true
});
}
function hideGroup(){
$('#pg').propertygrid({
showGroup:false
});
}
function showHeader(){
$('#pg').propertygrid({
showHeader:true
});
}
function hideHeader(){
$('#pg').propertygrid({
showHeader:false
});
}
function getChanges(){
var s = '';
var rows = $('#pg').propertygrid('getChanges');
for(var i=0; i<rows.length; i++){
s += rows[i].name + ':' + rows[i].value + ',';
}
alert(s)
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customize Columns of PropertyGrid - 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>Customize Columns of PropertyGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The columns of PropertyGrid can be changed.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-propertygrid" style="width:300px" data-options="
url: 'propertygrid_data1.json',
method: 'get',
showGroup: true,
scrollbarSize: 0,
columns: mycolumns
">
</table>
<script>
var mycolumns = [[
{field:'name',title:'MyName',width:100,sortable:true},
{field:'value',title:'MyValue',width:100,resizable:false}
]];
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Format - 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>Group Format</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The user can change the group information.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-propertygrid" style="width:300px" data-options="
url: 'propertygrid_data1.json',
method: 'get',
showGroup: true,
scrollbarSize: 0,
groupFormatter: groupFormatter
">
</table>
<script>
function groupFormatter(fvalue, rows){
return fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>';
}
</script>
</body>
</html>
\ No newline at end of file
{"total":7,"rows":[
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
{"name":"Address","value":"","group":"ID Settings","editor":"text"},
{"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},
{"name":"Birthday","value":"01/02/2012","group":"ID Settings","editor":"datebox"},
{"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}},
{"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
"type":"checkbox",
"options":{
"on":true,
"off":false
}
}}
]}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Resizable - 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 Resizable</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click on the edge of box and move the edge to resize the box.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid #ccc;">
<div style="padding:20px">Resize Me</div>
</div>
<div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle'" style="width:200px;height:150px;border:1px solid #ccc">
<div id="mytitle" style="background:#ddd;padding:5px;">Title</div>
<div style="padding:20px">Drag and Resize Me</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SearchBox - 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 SearchBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click search button or press enter key in input box to do searching.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
<script>
function doSearch(value){
alert('You input: ' + value);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Category - 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>Search Category</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Select a category and click search button or press enter key in input box to do searching.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
<script>
function doSearch(value,name){
alert('You input: ' + value+'('+name+')');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Slider - 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 Slider</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Drag the slider to change value.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="margin-top:20px;">
<input class="easyui-slider" style="width:300px" data-options="showTip:true">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format Tip Information - 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>Format Tip Information</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to format tip information.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="margin-top:20px;">
<input class="easyui-slider" value="12" style="width:300px" data-options="
showTip: true,
rule: [0,'|',25,'|',50,'|',75,'|',100],
tipFormatter: function(value){
return value+'px';
},
onChange: function(value){
$('#ff').css('font-size', value);
}">
</div>
<div id="ff" style="margin-top:50px;font-size:12px">jQuery EasyUI</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider Rule - 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>Slider Rule</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to define slider rule.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="margin-top:20px;">
<input class="easyui-slider" style="width:300px" data-options="
showTip:true,
rule: [0,'|',25,'|',50,'|',75,'|',100]
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Slider - 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>Vertical Slider</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to create a vertical slider.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-slider" style="height:300px" data-options="
showTip: true,
mode: 'v',
reversed: false,
rule: [0,'|',25,'|',50,'|',75,'|',100]
">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SplitButton 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>SplitButton 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="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('disable')">Disable Edit</a>
<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('enable')">Enable Edit</a>
</div>
<div style="padding:5px;border:1px solid #ddd;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
<a id="btn-edit" href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
</div>
<div id="mm1" 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>
<span>Toolbar</span>
<div style="width:150px;">
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
<div id="mm3" style="width:150px;">
<div>Help</div>
<div>Update</div>
<div>
<span>About</span>
<div class="menu-content" style="padding:10px;text-align:left">
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
<p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SplitButton - 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 SplitButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Move mouse over the arrow area of button to drop down menu.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;border:1px solid #ddd;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
</div>
<div id="mm1" 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>
<span>Toolbar</span>
<div style="width:150px;">
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
<div id="mm3" style="width:150px;">
<div>Help</div>
<div>Update</div>
<div>
<span>About</span>
<div class="menu-content" style="padding:10px;text-align:left">
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
<p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
</div>
</div>
</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