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

删除目录WebRoot

parent 177828ce
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested 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>Nested Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tab panel can contain sub tabs or other components.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
<div title="Sub Tabs" style="padding:10px;">
<div class="easyui-tabs" data-options="fit:true,plain:true">
<div title="Title1" style="padding:10px;">Content 1</div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
</div>
<div title="Ajax" data-options="href:'_content.html',closable:true" style="padding:10px"></div>
<div title="Iframe" data-options="closable:true" style="overflow:hidden">
<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
</div>
<div title="DataGrid" data-options="closable:true" style="padding:10px">
<table class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true">
<thead>
<tr>
<th data-options="field:'f1',width:100">Title1</th>
<th data-options="field:'f2',width:100">Title2</th>
<th data-options="field:'f3',width:100">Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d11</td>
<td>d12</td>
<td>d13</td>
</tr>
<tr>
<td>d21</td>
<td>d22</td>
<td>d23</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs Strip 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>Tabs Strip Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the mini-buttons on the tab strip to perform actions.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" data-options="tools:'#p-tools'" 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="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
<div id="p-tools">
<a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>
<a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>
<a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs with Images - 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 Images</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tab strip can display big images.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" data-options="tabWidth:100,tabHeight:60" style="width:700px;height:250px">
<!-- <div title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>" style="padding:10px">-->
<p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p>
</div>
<!-- <div title="<span class='tt-inner'><img src='images/scanner.png'/><br>Scanner</span>" style="padding:10px">-->
<p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p>
</div>
<!-- <div title="<span class='tt-inner'><img src='images/pda.png'/><br>Pda</span>" style="padding:10px">-->
<p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p>
</div>
<!-- <div title="<span class='tt-inner'><img src='images/tablet.png'/><br>Tablet</span>" style="padding:10px">-->
<p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p>
</div>
</div>
<style scoped="scoped">
.tt-inner{
display:inline-block;
line-height:12px;
padding-top:5px;
}
.tt-inner img{
border:0;
}
</style>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab Position - 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>Tab Position</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the 'position' drop-down list and select an item to change the tab position.</div>
</div>
<div style="margin:10px 0;">
<span>Position:</span>
<select onchange="$('#tt').tabs({tabPosition:this.value})">
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</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>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs 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>Tabs Tools</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons on the top right of tabs header to add or remove tab panel.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
<script type="text/javascript">
var index = 0;
function addPanel(){
index++;
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">Content'+index+'</div>',
closable: true
});
}
function removePanel(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>
</body>
</html>
\ No newline at end of file
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TimeSpinner 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>TimeSpinner 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="getValue()">GetValue</a>
<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<input id="dt" class="easyui-timespinner" style="width:80px;">
<script>
function getValue(){
var val = $('#dt').timespinner('getValue');
alert(val);
}
function setValue(){
$('#dt').timespinner('setValue', '09:45');
}
function disable(){
$('#dt').timespinner('disable');
}
function enable(){
$('#dt').timespinner('enable');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TimeSpinner - 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 TimeSpinner</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click spin button to adjust time.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-timespinner" style="width:80px;">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Time Range - 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>Time Range</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The time value is constrained in specified range.</div>
</div>
<div style="margin:10px 0;">
<span>From 08:30 to 18:00</span>
</div>
<input class="easyui-timespinner" data-options="min:'08:30',max:'18:00'" style="width:80px;"></input>
</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>Dialog Content</title>
</head>
<body>
<div style="padding:5px;">
<div style="padding:5px 10px">
<div>User Name:</div>
<input style="width:160px">
</div>
<div style="padding:5px 10px">
<div>Password:</div>
<input type="password" style="width:160px">
</div>
<div style="padding:5px 10px;text-align:center">
<a href="javascript:void(0)" class="easyui-linkbutton">Login</a>
<a href="javascript:void(0)" class="easyui-linkbutton">Cancel</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Tooltip - 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>Ajax Tooltip</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tooltip content can be loaded via AJAX.</div>
</div>
<div style="margin:10px 0;"></div>
<!-- <a href="#" class="easyui-tooltip" data-options="-->
<!-- content: $('<div></div>'),-->
onShow: function(){
$(this).tooltip('arrow').css('left', 20);
$(this).tooltip('tip').css('left', $(this).offset().left);
},
onUpdate: function(cc){
cc.panel({
width: 500,
height: 'auto',
border: false,
href: '_content.html'
});
}
">Hove me</a> to display tooltip content via AJAX.
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tooltip - 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 Tooltip</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Hover the links to display tooltip message.</div>
</div>
<div style="margin:10px 0;"></div>
<p>The tooltip can use each elements title attribute.
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Tooltip 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>Custom Tooltip Content</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Access to each elements attribute to get the tooltip content.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="pg" data-options="total:114" style="border:1px solid #ddd;"></div>
<script>
$(function(){
$('#pg').pagination().find('a.l-btn').tooltip({
content: function(){
var cc = $(this).find('span.l-btn-empty').attr('class').split(' ');
var icon = cc[1].split('-')[1];
return icon + ' page';
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Tooltip 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>Custom Tooltip Style</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to change the tooltip style.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:10px 200px">
<div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
</div>
<div style="padding:10px 200px">
<div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
</div>
<script>
$(function(){
$('#pp1').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
$('#pp2').tooltip({
position: 'bottom',
content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#fff000',
borderColor: '#ff0000',
boxShadow: '1px 1px 3px #292929'
});
},
onPosition: function(){
$(this).tooltip('tip').css('left', $(this).offset().left);
$(this).tooltip('arrow').css('left', 20);
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip Position - 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>Tooltip Position</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the drop-down list below to change where the tooltip appears.</div>
</div>
<div style="margin:10px 0;"></div>
<span>Select position:</span>
<select onchange="changePosition(this.value)">
<option value="bottom">Bottom</option>
<option value="top">Top</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
<div style="padding:10px 200px">
<div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
</div>
<script type="text/javascript">
function changePosition(pos){
$('#pp').tooltip({
position: pos
});
}
</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