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

升级easyUI到1.9.4版本

parent 0527b980
...@@ -11,13 +11,16 @@ ...@@ -11,13 +11,16 @@
</head> </head>
<body> <body>
<h2>Date Format</h2> <h2>Date Format</h2>
<div class="demo-info"> <p>Different date formats are applied to different DateBox components.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Different date formats are applied to different DateBox components.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Default Format:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Customized Format:" labelPosition="top" data-options="formatter:myformatter,parser:myparser" style="width:100%;">
</div>
</div> </div>
<div style="margin:10px 0;"></div>
<input class="easyui-datebox"></input>
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
<script type="text/javascript"> <script type="text/javascript">
function myformatter(date){ function myformatter(date){
var y = date.getFullYear(); var y = date.getFullYear();
......
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
</head> </head>
<body> <body>
<h2>DateBox Events</h2> <h2>DateBox Events</h2>
<div class="demo-info"> <p>Click the calendar image on the right side.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Click the calendar image on the right side.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
</div> <div style="margin-bottom:20px">
<div style="margin:10px 0;"></div> <input class="easyui-datebox" data-options="label:'Select Date:',labelPosition:'top',onSelect:onSelect" style="width:100%;">
<input class="easyui-datebox" data-options="onSelect:onSelect"></input> </div>
<div style="margin:10px 0"> <div style="margin:10px 0">
<span>Selected Date: </span> <span>Selected Date: </span>
<span id="result"></span> <span id="result"></span>
</div>
</div> </div>
<script> <script>
function onSelect(date){ function onSelect(date){
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid DateBox - 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 DateBox</h2>
<p>This example shows how to set the width of DateBox 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-datebox" label="width: 100%" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="width: 50%" labelPosition="top" style="width:50%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Restrict Date Range in DateBox - 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>Restrict Date Range in DateBox</h2>
<p>This example shows how to restrict the user to select only ten days from now.</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 id="dd" label="Select Date:" labelPosition="top" style="width:100%;">
</div>
</div>
<script>
$(function(){
$('#dd').datebox().datebox('calendar').calendar({
validator: function(date){
var now = new Date();
var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()+10);
return d1<=date && date<=d2;
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared Calendar in DateBox - 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>Shared Calendar in DateBox</h2>
<p>Multiple datebox components can share a calendar and use it to pick dates.</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-datebox" data-options="label:'Start Date:',labelPosition:'top',sharedCalendar:'#cc'" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" data-options="label:'End Date:',labelPosition:'top',sharedCalendar:'#cc'" style="width:100%;">
</div>
</div>
<div id="cc" class="easyui-calendar"></div>
</body>
</html>
\ No newline at end of file
...@@ -11,12 +11,16 @@ ...@@ -11,12 +11,16 @@
</head> </head>
<body> <body>
<h2>Validate DateBox</h2> <h2>Validate DateBox</h2>
<div class="demo-info"> <p>When the selected date is greater than specified date. The field validator will raise an error.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>When the selected date is greater than specified date. The field validator will raise an error.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Required Date:" labelPosition="top" required style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="End Date:" labelPosition="top" required data-options="validType:'md[\'10/11/2015\']'" style="width:100%;">
</div>
</div> </div>
<div style="margin:10px 0;"></div>
<input class="easyui-datebox" required data-options="validType:'md[\'10/11/2012\']'"></input>
<script> <script>
$.extend($.fn.validatebox.defaults.rules, { $.extend($.fn.validatebox.defaults.rules, {
md: { md: {
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeBox - 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 DateTimeBox</h2>
<p>Click the calendar image on the right side.</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-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Description:" labelPosition="top" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid DateTimeBox - 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 DateTimeBox</h2>
<p>This example shows how to set the width of DateTimeBox 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-datetimebox" label="width: 100%" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="width: 80%" labelPosition="top" style="width:80%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
</head> </head>
<body> <body>
<h2>Initialize Value for DateTime</h2> <h2>Initialize Value for DateTime</h2>
<div class="demo-info"> <p>The value is initialized when DateTimeBox has been created.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>The value is initialized when DateTimeBox has been created.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" value="10/11/2015 2:3:56" style="width:100%;">
</div>
</div> </div>
<div style="margin:10px 0;"></div>
<input class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:150px">
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -11,15 +11,15 @@ ...@@ -11,15 +11,15 @@
</head> </head>
<body> <body>
<h2>Display Seconds</h2> <h2>Display Seconds</h2>
<div class="demo-info"> <p>The user can decide to display seconds part or not.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>The user can decide to display seconds part or not.</div>
</div>
<div style="margin:10px 0;">
<span>Show Seconds: </span> <span>Show Seconds: </span>
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})"> <input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
</div> </div>
<input id="dt" class="easyui-datetimebox" style="width:150px"> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="dt" class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeSpinner - 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 DateTimeSpinner</h2>
<p>Click spin button to adjust date and time.</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-datetimespinner" label="Start Time:" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="End Time:" labelPosition="top" value="6/25/2015 20:23" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateTimeSpinner with Clear Icon - 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>DateTimeSpinner with Clear Icon</h2>
<p>A clear icon can be attached to the datetimespinner. Click it to clear the entered value.</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-datetimespinner" value="6/24/2015 17:23:40" style="width:100%;" data-options="
showSeconds: true,
prompt: 'Input date time here!',
icons:[{
iconCls:'icon-clear',
handler: function(e){
$(e.data.target).datetimespinner('clear');
}
}],
label: 'Start Time:',
labelPosition: 'top'
">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid DateTimeSpinner - 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 DateTimeSpinner</h2>
<p>The width of datetimespinner is set in percentages.</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-datetimespinner" label="width: 100%" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="width: 80%" labelPosition="top" value="6/25/2015 20:23" style="width:80%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format DateTimeSpinner - 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 DateTimeSpinner</h2>
<p>The DataTimeSpinner value can be formatted by specifying the 'formatter' and 'parser' functions.</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-datetimespinner" label="mm/dd/yyyy hh:mm" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" value="6/24/2015" data-options="label:'mm/dd/yyyy',labelPosition:'top',formatter:formatter1,parser:parser1" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" value="2015-6" data-options="label:'yyyy-mm',labelPosition:'top',formatter:formatter2,parser:parser2,selections:[[0,4],[5,7]]" style="width:100%;">
</div>
</div>
<script type="text/javascript">
function formatter1(date){
if (!date){return '';}
return $.fn.datebox.defaults.formatter.call(this, date);
}
function parser1(s){
if (!s){return null;}
return $.fn.datebox.defaults.parser.call(this, s);
}
function formatter2(date){
if (!date){return '';}
var y = date.getFullYear();
var m = date.getMonth() + 1;
return y + '-' + (m<10?('0'+m):m);
}
function parser2(s){
if (!s){return null;}
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
if (!isNaN(y) && !isNaN(m)){
return new Date(y,m-1,1);
} else {
return new Date();
}
}
</script>
</body>
</html>
\ No newline at end of file
*{
font-size:12px;
}
body { body {
font-family:helvetica,tahoma,verdana,sans-serif; font-family:verdana,helvetica,arial,sans-serif;
padding:3px; padding:20px;
font-size:13px; font-size:12px;
margin:0; margin:0;
} }
h2 { h2 {
...@@ -14,13 +11,14 @@ h2 { ...@@ -14,13 +11,14 @@ h2 {
margin-bottom:15px; margin-bottom:15px;
} }
.demo-info{ .demo-info{
background:#FFFEE6; padding:0 0 12px 0;
color:#8F5700;
padding:12px;
} }
.demo-tip{ .demo-tip{
width:16px; display:none;
height:16px;
margin-right:8px;
float:left;
} }
.label-top{
display: block;
height: 22px;
line-height: 22px;
vertical-align: middle;
}
\ No newline at end of file
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Basic Dialog</h2> <h2>Basic Dialog</h2>
<div class="demo-info"> <p>Click below button to open or close dialog.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>Click below button to open or close dialog.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div> </div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Complex Toolbar on Dialog</h2> <h2>Complex Toolbar on Dialog</h2>
<div class="demo-info"> <p>This sample shows how to create complex toolbar on dialog.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>This sample shows how to create complex toolbar on dialog.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div> </div>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid Dialog - 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 Dialog</h2>
<p>This example shows how to set the width of Dialog to a percentage of its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-dialog" title="Fluid Dialog" style="width:80%;height:200px;max-width:800px;padding:10px" data-options="
iconCls:'icon-save',
onResize:function(){
$(this).dialog('center');
}">
<p>width: 80%; height: 200px</p>
</div>
</body>
</html>
\ No newline at end of file
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Toolbar and Buttons</h2> <h2>Toolbar and Buttons</h2>
<div class="demo-info"> <p>The toolbar and buttons can be added to dialog.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>The toolbar and buttons can be added to dialog.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div> </div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Basic Draggable</h2> <h2>Basic Draggable</h2>
<div class="demo-info"> <p>Move the boxes below by clicking on it with mouse.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Move the boxes below by clicking on it with mouse.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div> <div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px"> <div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div> <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
......
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