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

删除目录WebRoot

parent 177828ce
<!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
<!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>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tabs height is auto adjusted according to tab panel content.</div>
</div>
<div style="margin:10px 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>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click tab strip to swap tab panel content.</div>
</div>
<div style="margin: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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs with DropDown - 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>Tabs with DropDown</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to add a dropdown menu over a tab strip.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" 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" style="padding:10px">
This is the help content.
</div>
</div>
<div id="mm" style="width:120px">
<div>Welcome</div>
<div>Help Contents</div>
<div data-options="iconCls:'icon-search'">Search</div>
<div>Dynamic Help</div>
</div>
<script>
$(function(){
var p = $('#tt').tabs().tabs('tabs')[2];
var mb = p.panel('options').tab.find('a.tabs-inner');
mb.menubutton({
menu:'#mm',
iconCls:'icon-help'
}).click(function(){
$('#tt').tabs('select',2);
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fixed Tab Width - 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>Fixed Tab Width</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tab strips have fixed width and height.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" data-options="tabWidth:112" style="width:700px;height:250px">
<div title="Home" style="padding:10px">
<p>Home Content.</p>
</div>
<div title="Maps" style="padding:10px">
<p>Maps Content.</p>
</div>
<div title="Journal" style="padding:10px">
<p>Journal Content.</p>
</div>
<div title="History" style="padding:10px">
<p>History Content.</p>
</div>
<div title="References" style="padding:10px">
<p>References Content.</p>
</div>
<div title="Contact" data-options="tabWidth:110" style="padding:10px">
<p>Contact Content.</p>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover 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>Hover Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Move mouse over the tab strip to open the tab panel.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" 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>
<script type="text/javascript">
$(function(){
var tabs = $('#tt').tabs().tabs('tabs');
for(var i=0; i<tabs.length; i++){
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
$('#tt').tabs('select', e.data.index);
});
}
});
</script>
</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