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

清空旧版本

parent df57ada9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Border in DataGrid - 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>Row Border in DataGrid</h2>
<p>This sample shows how to change the row border style of datagrid.</p>
<div style="margin:20px 0;">
<span>Border:</span>
<select onchange="changeBorder(this.value)">
<option value="lines-both">Both</option>
<option value="lines-no">No Border</option>
<option value="lines-right">Right Border</option>
<option value="lines-bottom">Bottom Border</option>
</select>
<span>Striped:</span>
<input type="checkbox" onclick="$('#dg').datagrid({striped:$(this).is(':checked')})">
</div>
<table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,fitColumns:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function changeBorder(cls){
$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);
}
</script>
<style type="text/css">
.lines-both .datagrid-body td{
}
.lines-no .datagrid-body td{
border-right:1px dotted transparent;
border-bottom:1px dotted transparent;
}
.lines-right .datagrid-body td{
border-bottom:1px dotted transparent;
}
.lines-bottom .datagrid-body td{
border-right:1px dotted transparent;
}
</style>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - 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>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
onClickCell: onClickCell,
onEndEdit: onEndEdit
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true
}
}">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="acceptit()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function(){
$('#dg').datagrid('selectRow', editIndex);
},0);
}
}
}
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function acceptit(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Row 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>DataGrid Row Style</h2>
<p>The rows which listprice value is less than 30 are highlighted.</p>
<div style="margin:20px 0;"></div>
<table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px"
data-options="
singleSelect: true,
iconCls: 'icon-save',
url: 'datagrid_data1.json',
method: 'get',
rowStyler: function(index,row){
if (row.listprice < 30){
return 'background-color:#6293BB;color:#fff;font-weight:bold;';
}
}
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Selection - 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>DataGrid Selection</h2>
<p>Choose a selection mode and select one or more rows.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
<a href="#" class="easyui-linkbutton" onclick="getSelections()">GetSelections</a>
</div>
<table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
data-options="singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<div style="margin:10px 0;">
<span>Selection Mode: </span>
<select onchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
<option value="0">Single Row</option>
<option value="1">Multiple Rows</option>
</select>
</div>
<script type="text/javascript">
function getSelected(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.alert('Info', row.itemid+":"+row.productid+":"+row.attr1);
}
}
function getSelections(){
var ss = [];
var rows = $('#dg').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
var row = rows[i];
ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>');
}
$.messager.alert('Info', ss.join('<br/>'));
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid with Toolbar - 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>DataGrid with Toolbar</h2>
<p>Put buttons on top toolbar of DataGrid.</p>
<div style="margin:20px 0;"></div>
<table class="easyui-datagrid" title="DataGrid with Toolbar" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
var toolbar = [{
text:'Add',
iconCls:'icon-add',
handler:function(){alert('add')}
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){alert('cut')}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){alert('save')}
}];
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform DataGrid from Table - 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>Transform DataGrid from Table</h2>
<p>Transform DataGrid from an existing, unformatted html table.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a>
</div>
<table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
<thead>
<tr>
<th data-options="field:'itemid'">Item ID</th>
<th data-options="field:'productid'">Product</th>
<th data-options="field:'listprice',align:'right'">List Price</th>
<th data-options="field:'attr1'">Attribute</th>
</tr>
</thead>
<tbody>
<tr>
<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
</tbody>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataList - 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 DataList</h2>
<p>The DataList can be created from the &lt;ul&gt; element.</p>
<div style="margin:20px 0;"></div>
<ul class="easyui-datalist" title="Basic DataList" lines="true" style="width:400px;height:250px">
<li value="AL">Alabama</li>
<li value="AK">Alaska</li>
<li value="AZ">Arizona</li>
<li value="AR">Arkansas</li>
<li value="CA">California</li>
<li value="CO">Colorado</li>
<li value="CT">Connecticut</li>
<li value="DE">Delaware</li>
<li value="FL">Florida</li>
<li value="GA">Georgia</li>
<li value="HI">Hawaii</li>
<li value="ID">Idaho</li>
<li value="IL">Illinois</li>
<li value="IN">Indiana</li>
<li value="IA">Iowa</li>
<li value="KS">Kansas</li>
<li value="KY">Kentucky</li>
<li value="LA">Louisiana</li>
<li value="ME">Maine</li>
<li value="MD">Maryland</li>
<li value="MA">Massachusetts</li>
<li value="MI">Michigan</li>
<li value="MN">Minnesota</li>
<li value="MS">Mississippi</li>
<li value="MO">Missouri</li>
<li value="MT">Montana</li>
<li value="NE">Nebraska</li>
<li value="NV">Nevada</li>
<li value="NH">New Hampshire</li>
<li value="NJ">New Jersey</li>
<li value="NM">New Mexico</li>
<li value="NY">New York</li>
<li value="NC">North Carolina</li>
<li value="ND">North Dakota</li>
<li value="OH">Ohio</li>
<li value="OK">Oklahoma</li>
<li value="OR">Oregon</li>
<li value="PA">Pennsylvania</li>
<li value="RI">Rhode Island</li>
<li value="SC">South Carolina</li>
<li value="SD">South Dakota</li>
<li value="TN">Tennessee</li>
<li value="TX">Texas</li>
<li value="UT">Utah</li>
<li value="VT">Vermont</li>
<li value="VA">Virginia</li>
<li value="WA">Washington</li>
<li value="WV">West Virginia</li>
<li value="WI">Wisconsin</li>
<li value="WY">Wyoming</li>
</ul>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkbox in DataList - 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>Checkbox in DataList</h2>
<p>Each item in the DataList has a checkbox.</p>
<div style="margin:20px 0"></div>
<div class="easyui-datalist" title="Checkbox in DataList" style="width:400px;height:250px" data-options="
url: 'datalist_data1.json',
method: 'get',
checkbox: true,
selectOnCheck: false,
onBeforeSelect: function(){return false;}
">
</div>
</body>
</html>
\ No newline at end of file
[
{"text":"Epson WorkForce 845","group":"Printer"},
{"text":"Canon PIXMA MG5320","group":"Printer"},
{"text":"HP Deskjet 1000 Printer","group":"Printer"},
{"text":"Cisco RV110W-A-NA-K9","group":"Firewall"},
{"text":"ZyXEL ZyWALL USG50","group":"Firewall"},
{"text":"NETGEAR FVS318","group":"Firewall"},
{"text":"Logitech Keyboard K120","group":"Keyboard"},
{"text":"Microsoft Natural Ergonomic Keyboard 4000","group":"Keyboard"},
{"text":"Logitech Wireless Touch Keyboard K400","group":"Keyboard"},
{"text":"Logitech Gaming Keyboard G110","group":"Keyboard"},
{"text":"Nikon COOLPIX L26 16.1 MP","group":"Camera"},
{"text":"Canon PowerShot A1300","group":"Camera"},
{"text":"Canon PowerShot A2300","group":"Camera"}
]
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group DataList - 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 DataList</h2>
<p>This example shows how to display items in groups.</p>
<div style="margin:20px 0"></div>
<div class="easyui-datalist" title="Group DataList" style="width:400px;height:250px" data-options="
url: 'datalist_data1.json',
method: 'get',
groupField: 'group'
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Selection DataList - 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>Multiple Selection DataList</h2>
<p>The multiple selection allows the user to select multiple items in a datalist.</p>
<div style="margin:20px 0"></div>
<div class="easyui-datalist" title="Multiple Selection DataList" style="width:400px;height:250px" data-options="
url: 'datalist_data1.json',
method: 'get',
singleSelect: false
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Binding to Remote Data - 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>Binding to Remote Data</h2>
<p>The DataList is bound to a remote data.</p>
<div style="margin:20px 0"></div>
<div class="easyui-datalist" title="Remote Data" style="width:400px;height:250px" data-options="
url: 'datalist_data1.json',
method: 'get'
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic 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>Basic DateBox</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-datebox" label="Start Date:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="End Date:" labelPosition="top" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateBox Buttons - 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>DateBox Buttons</h2>
<p>This example shows how to customize the datebox buttons underneath the calendar.</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="Date With 2 Buttons:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Date With 3 Buttons:" labelPosition="top" data-options="buttons:buttons" style="width:100%;">
</div>
</div>
<script>
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: 'MyBtn',
handler: function(target){
alert('click MyBtn');
}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clone 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>Clone DateBox</h2>
<p>Click the 'Clone' button to clone datebox components from the exiting datebox.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cloneDatebox()">Clone</a>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="dt" class="easyui-datebox" label="Select Date:" labelPosition="top" style="width:100%;">
</div>
<div id="cc" style="margin-top:10px"></div>
</div>
<script type="text/javascript">
function cloneDatebox(){
var dt = $('<input>').appendTo('#cc');
dt.datebox('cloneFrom', '#dt');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 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>Date Format</h2>
<p>Different date formats are applied to different DateBox components.</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="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>
<script type="text/javascript">
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateBox Events - 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>DateBox Events</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-datebox" data-options="label:'Select Date:',labelPosition:'top',onSelect:onSelect" style="width:100%;">
</div>
<div style="margin:10px 0">
<span>Selected Date: </span>
<span id="result"></span>
</div>
</div>
<script>
function onSelect(date){
$('#result').text(date)
}
</script>
</body>
</html>
\ No newline at end of file
<!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
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