Commit 76a0033a authored by 季圣华's avatar 季圣华
Browse files

清空旧版本

parent df57ada9
<!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>
<p>Click search button or press enter key in input box to do searching.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">
</div>
<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>
<p>Select a category and click search button or press enter key in input box to do searching.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:100%">
</div>
<div id="mm">
<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>Fluid 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>Fluid SearchBox</h2>
<p>This example shows how to set the width of SearchBox to a percentage of its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-searchbox" data-options="label:'width: 100%',labelPosition:'top',prompt:'Please Input Value',menu:'#mm'" style="width:100%">
</div>
<div style="margin-bottom:20px">
<input class="easyui-searchbox" data-options="label:'width: 80%',labelPosition:'top',prompt:'Please Input Value'" style="width:80%">
</div>
</div>
<div id="mm">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SideMenu - 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 SideMenu</h2>
<p>Collapse the side menu to display the main icon.</p>
<div style="margin:20px 0;">
<a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a>
</div>
<div id="sm" class="easyui-sidemenu" data-options="data:data"></div>
<script type="text/javascript">
var data = [{
text: 'Item1',
iconCls: 'icon-sum',
state: 'open',
children: [{
text: 'Option1'
},{
text: 'Option2'
},{
text: 'Option3',
children: [{
text: 'Option31'
},{
text: 'Option32'
}]
}]
},{
text: 'Item2',
iconCls: 'icon-more',
children: [{
text: 'Option4'
},{
text: 'Option5'
},{
text: 'Option6'
}]
}];
function toggle(){
var opts = $('#sm').sidemenu('options');
$('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
opts = $('#sm').sidemenu('options');
$('#sm').sidemenu('resize', {
width: opts.collapsed ? 60 : 200
})
}
</script>
</body>
</html>
\ No newline at end of file
@import 'http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
.sidemenu .accordion .panel-title{
color: #b8c7ce;
}
.sidemenu .accordion .accordion-header{
background: #222d32;
color: #b8c7ce;
}
.sidemenu .accordion .accordion-body{
background: #2c3b41;
color: #8aa4af;
}
.sidemenu .accordion .accordion-header-selected{
background: #1e282c;
}
.sidemenu .accordion .accordion-collapse{
background: transparent;
}
.sidemenu .tree-node-hover{
background: #2c3b41;
color: #fff;
}
.sidemenu .tree-node-selected{
background: #2c3b41;
color: #fff;
}
.sidemenu .accordion-header .panel-icon{
font-size: 16px;
}
.sidemenu .accordion-header .panel-tool{
display: none;
}
.sidemenu .accordion-header::after,
.sidemenu .tree-node-nonleaf::after{
display: inline-block;
vertical-align: top;
border-style: solid;
transform:rotate(45deg);
width: 4px;
height: 4px;
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-width: 0 1px 1px 0;
}
.sidemenu .accordion-header-selected::after{
transform:rotate(-135deg);
}
.sidemenu .tree-node-nonleaf::after{
transform:rotate(-135deg);
}
.sidemenu .tree-node-nonleaf-collapsed::after{
transform:rotate(45deg);
}
.sidemenu-collapsed .accordion-header::after{
display: none;
}
.sidemenu-tooltip .accordion{
border-color: #1e282c;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SideMenu Style - 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>SideMenu Style</h2>
<p>Collapse the side menu to display the main icon.</p>
<div style="margin:20px 0;">
<a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a>
</div>
<div id="sm" class="easyui-sidemenu" data-options="data:data"></div>
<link rel="stylesheet" type="text/css" href="sidemenu_style.css">
<script type="text/javascript">
var data = [{
text: 'Forms',
iconCls: 'fa fa-wpforms',
state: 'open',
children: [{
text: 'Form Element'
},{
text: 'Wizard'
},{
text: 'File Upload'
}]
},{
text: 'Mail',
iconCls: 'fa fa-at',
selected: true,
children: [{
text: 'Inbox'
},{
text: 'Sent'
},{
text: 'Trash',
children: [{
text: 'Item1'
},{
text: 'Item2'
}]
}]
},{
text: 'Layout',
iconCls: 'fa fa-table',
children: [{
text: 'Panel'
},{
text: 'Accordion'
},{
text: 'Tabs'
}]
}];
function toggle(){
var opts = $('#sm').sidemenu('options');
$('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
opts = $('#sm').sidemenu('options');
$('#sm').sidemenu('resize', {
width: opts.collapsed ? 60 : 200
})
}
</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>
<p>Drag the slider to change value.</p>
<div style="margin:20px 0 50px 0;"></div>
<input class="easyui-slider" style="width:300px" data-options="showTip:true">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid 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>Fluid Slider</h2>
<p>This example shows how to set the width of Slider to a percentage of its parent container.</p>
<div style="margin:20px 0 50px 0;"></div>
<p>width: 50%</p>
<input class="easyui-slider" value="50" data-options="showTip:true" style="width:50%;">
<p>width: 30%</p>
<input class="easyui-slider" value="50" data-options="showTip:true" style="width:30%;">
</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>
<p>This sample shows how to format tip information.</p>
<div style="margin:20px 0 50px 0;"></div>
<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 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>Non Linear 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>Non Linear Slider</h2>
<p>This example shows how to create a slider with a non-linear scale.</p>
<div style="margin:20px 0 50px 0;"></div>
<div style="padding:2px">
<input class="easyui-slider" style="width:400px" data-options="
showTip:true,
rule: [0,'PI/4','PI/2'],
min:0,
max:300,
tipFormatter:function(value){
return (value/300.0).toFixed(4);
},
converter:{
toPosition:function(value,size){
var opts = $(this).slider('options');
return Math.asin(value/opts.max)/(Math.PI)*2*size;
},
toValue:function(pos,size){
var opts = $(this).slider('options');
return Math.sin(pos/size*Math.PI/2)*opts.max;
}
},
onChange:function(v){
var opts = $(this).slider('options');
var pos = opts.converter.toPosition.call(this, v, opts.width);
var p = $('<div class=point></div>').appendTo('#cc');
p.css('top', v);
p.css(opts.reversed?'right':'left', pos);
}
">
</div>
<div style="margin-bottom:30px"></div>
<div id="cc" class="easyui-panel" style="position:relative;width:404px;height:304px;">
</div>
<style scoped="scoped">
.point{
position:absolute;
width:2px;
height:2px;
font-size:0;
background:red;
}
</style>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Range 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>Range Slider</h2>
<p>This sample shows how to define a range slider.</p>
<div style="margin:20px 0 50px 0;"></div>
<input class="easyui-slider" style="width:300px" data-options="
showTip: true,
range: true,
value: [20,60],
rule: [0,'|',25,'|',50,'|',75,'|',100]
">
</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>
<p>This sample shows how to define slider rule.</p>
<div style="margin:20px 0 50px 0;"></div>
<input class="easyui-slider" style="width:300px" data-options="
showTip:true,
rule: [0,'|',25,'|',50,'|',75,'|',100]
">
</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>
<p>This sample shows how to create a vertical slider.</p>
<div style="margin:20px 0 50px 0;"></div>
<div style="margin:0 50px">
<input class="easyui-slider" style="height:300px" data-options="
showTip: true,
mode: 'v',
reversed: false,
rule: [0,'|',25,'|',50,'|',75,'|',100]
">
</div>
</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>
<p>Click the buttons below to perform actions.</p>
<div style="margin:20px 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 class="easyui-panel" style="padding:5px;">
<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>
<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>
<p>Move mouse over the arrow area of button to drop down menu.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px;">
<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>
<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>SwitchButton 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>SwitchButton Actions</h2>
<p>Click the buttons below to perform actions.</p>
<div style="margin:20px 0;"></div>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="$('#sb').switchbutton('disable')">Disable</a>
<a href="#" class="easyui-linkbutton" onclick="$('#sb').switchbutton('enable')">Enable</a>
</div>
<input id="sb" class="easyui-switchbutton" checked style="width:100px;height:30px">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SwitchButton - 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 SwitchButton</h2>
<p>Click the switchbutton to change its state.</p>
<div style="margin:20px 0;"></div>
<div style="margin-bottom:20px">
<input class="easyui-switchbutton" checked label="Receive mail:" labelWidth="120" tabindex="1">
</div>
<div style="margin-bottom:20px">
<input class="easyui-switchbutton" checked label="Shared network:" labelWidth="120" tabindex="2">
</div>
<div style="margin-bottom:20px">
<input class="easyui-switchbutton" label="Subscribed:" labelWidth="120" tabindex="3">
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Auto Height for Tabs - 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>Auto Height for Tabs</h2>
<p>The tabs height is auto adjusted according to tab panel content.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-tabs" style="width:700px;height:auto">
<div title="About" style="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>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tabs - 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 Tabs</h2>
<p>Click tab strip to swap tab panel content.</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="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>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</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