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

升级easyUI到1.9.4版本

parent 0527b980
<!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
......@@ -11,11 +11,8 @@
</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>
<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>
......
......@@ -11,11 +11,8 @@
</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>
<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>
......
......@@ -11,11 +11,8 @@
</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>
<p>This sample shows how to add a dropdown menu over a tab strip.</p>
<div style="margin:20px 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>
......@@ -35,7 +32,7 @@
This is the help content.
</div>
</div>
<div id="mm" style="width:120px">
<div id="mm">
<div>Welcome</div>
<div>Help Contents</div>
<div data-options="iconCls:'icon-search'">Search</div>
......
......@@ -11,11 +11,8 @@
</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>
<p>The tab strips have fixed width and height.</p>
<div style="margin:20px 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>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid 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>Fluid Tabs</h2>
<p>This example shows how to set the width of Tabs to a percentage of its parent container.</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-tabs" style="width:100%;height:250px">
<div title="About" style="padding:10px">
<p>The tabs has a width of 100%.</p>
</div>
<div title="Title2"></div>
<div title="Title3"></div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,11 +11,8 @@
</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>
<p>Move mouse over the tab strip to open the tab panel.</p>
<div style="margin:20px 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>
......
......@@ -11,11 +11,8 @@
</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>
<p>The tab panel can contain sub tabs or other components.</p>
<div style="margin:20px 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">
......
......@@ -11,11 +11,8 @@
</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>
<p>Click the mini-buttons on the tab strip to perform actions.</p>
<div style="margin:20px 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>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs 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>Tabs Style</h2>
<p>Click the options below to change the tabs style.</p>
<div style="margin:20px 0;">
<input id="plain" type="checkbox" onclick="setTabs()"><span>plain</span><br>
<input id="narrow" type="checkbox" onclick="setTabs()"><span>narrow</span><br>
<input id="pill" type="checkbox" onclick="setTabs()"><span>pill</span><br>
<input id="justified" type="checkbox" onclick="setTabs()"><span>justified</span>
</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 setTabs(){
$('#tt').tabs({
plain: $('#plain').is(':checked'),
narrow: $('#narrow').is(':checked'),
pill: $('#pill').is(':checked'),
justified: $('#justified').is(':checked')
})
}
</script>
</body>
</html>
\ No newline at end of file
......@@ -11,22 +11,19 @@
</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>
<p>The tab strip can display big images.</p>
<div style="margin:20px 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">-->
<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">-->
<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">-->
<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">-->
<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>
......
......@@ -11,11 +11,8 @@
</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;">
<p>Click the 'position' drop-down list and select an item to change the tab position.</p>
<div style="margin:20px 0;">
<span>Position:</span>
<select onchange="$('#tt').tabs({tabPosition:this.value})">
<option value="top">Top</option>
......
......@@ -11,11 +11,8 @@
</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>
<p>Click the buttons on the top right of tabs header to add or remove tab panel.</p>
<div style="margin:20px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
......
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