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

升级easyUI到1.9.4版本

parent 0527b980
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TagBox with Autocomplete - 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>TagBox with Autocomplete</h2>
<p>The autocomplete is the built-in feature that allows the user to select a value from the drop-down list.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" label="Add a tag" style="width:100%" data-options="
url: 'tagbox_data1.json',
method: 'get',
value: '3',
valueField: 'id',
textField: 'text',
limitToList: true,
hasDownArrow: true,
prompt: 'Select a Language'
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TagBox - 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 TagBox</h2>
<p>The TagBox is created from a simple input element.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" value="Apple,Orange" label="Add a tag" style="width:100%">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TagBox with Button - 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>TagBox with Button</h2>
<p>The button can be attached to a tagbox.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" value="Apple,Orange" label="Add a tag" style="width:100%" data-options="
buttonText: 'Button',
onClickButton: function(){
alert('click button');
}
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format TagBox - 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 TagBox</h2>
<p>This example shows how to format the tagbox values.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" value="Apple,Orange" label="Add a tag" style="width:100%" data-options="
tagFormatter: function(value, row){
return '[' + value + ']';
}
">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom TagBox 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 TagBox Style</h2>
<p>This example shows how to apply different CSS styles to different tags.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" value="3" label="Add a tag" style="width:100%" data-options="
url: 'tagbox_data1.json',
method: 'get',
value: '3,4',
valueField: 'id',
textField: 'text',
limitToList: true,
prompt: 'Select a Language',
tagStyler: function(value){
if (value == 3){
return 'background:#ffd7d7;color:#c65353';
} else if (value == 4){
return 'background:#b8eecf;color:#45872c';
}
}
">
</div>
</body>
</html>
\ No newline at end of file
[{
"id":"1",
"text":"Java",
"desc":"Write once, run anywhere"
},{
"id":"2",
"text":"C#",
"desc":"One of the programming languages designed for the Common Language Infrastructure"
},{
"id":"3",
"text":"Ruby",
"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
},{
"id":"4",
"text":"Perl",
"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
},{
"id":"5",
"text":"Basic",
"desc":"A family of general-purpose, high-level programming languages"
}]
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate TagBox - 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>Validate TagBox</h2>
<p>This example shows how to validate the tagbox values.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input class="easyui-tagbox" value="Apple,Orange" label="Add a tag" style="width:100%" data-options="
validType: ['length[3,10]','uniquetag']
">
</div>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
uniquetag: {
validator: function(value, param){
var tb = $(this).closest('.tagbox').prev();
var values = tb.tagbox('getValues');
return $.inArray(value, values)==-1;
},
message: 'The tag value already exists.'
}
})
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TextBox - 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 TextBox</h2>
<p>The textbox allows a user to enter information.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Register" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Email:" labelPosition="top" data-options="prompt:'Enter a email address...',validType:'email'" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="First Name:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Last Name:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Company:" labelPosition="top" style="width:100%;">
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">Register</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TextBox with Button - 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>TextBox with Button</h2>
<p>The button can be attached to a textbox.</p>
<div style="margin:20px 0 40px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="buttonText:'SEARCH',prompt:'Search...'" style="width:100%;height:32px;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="buttonText:'Search',buttonAlign:'left',buttonIcon:'icon-search',prompt:'Search...'" style="width:100%;height:32px;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TextBox 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>TextBox with Clear Icon</h2>
<p>This example shows how to create an textbox with an icon to clear the input element itself.</p>
<div style="margin:20px 0 40px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="tt" style="width:100%;" data-options="
label: 'Email:',
labelPosition: 'top',
prompt: 'Input something here!',
value: 'my@email.com',
icons:[{
iconCls:'icon-search',
handler: function(e){
var v = $(e.data.target).textbox('getValue');
alert('The inputed value is ' + (v ? v : 'empty'));
}
}]
">
</div>
</div>
<script>
$.extend($.fn.textbox.methods, {
addClearBtn: function(jq, iconCls){
return jq.each(function(){
var t = $(this);
var opts = t.textbox('options');
opts.icons = opts.icons || [];
opts.icons.unshift({
iconCls: iconCls,
handler: function(e){
$(e.data.target).textbox('clear').textbox('textbox').focus();
$(this).css('visibility','hidden');
}
});
t.textbox();
if (!t.textbox('getText')){
t.textbox('getIcon',0).css('visibility','hidden');
}
t.textbox('textbox').bind('keyup', function(){
var icon = t.textbox('getIcon',0);
if ($(this).val()){
icon.css('visibility','visible');
} else {
icon.css('visibility','hidden');
}
});
});
}
});
$(function(){
$('#tt').textbox().textbox('addClearBtn', 'icon-clear');
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom TextBox - 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 TextBox</h2>
<p>This example shows how to custom a login form.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Login to system" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:10px">
<input class="easyui-textbox" style="width:100%;height:40px;padding:12px" data-options="prompt:'Username',iconCls:'icon-man',iconWidth:38">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" type="password" style="width:100%;height:40px;padding:12px" data-options="prompt:'Password',iconCls:'icon-lock',iconWidth:38">
</div>
<div style="margin-bottom:20px">
<input type="checkbox" checked="checked">
<span>Remember me</span>
</div>
<div>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:100%;">
<span style="font-size:14px;">Login</span>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid TextBox - 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 TextBox</h2>
<p>This example shows how to set the width of TextBox 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-textbox" data-options="label:'width: 100%',labelPosition:'top',prompt:'Enter something here...'" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="label:'width: 50%',labelPosition:'top',prompt:'Enter something here...'" style="width:50%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TextBox with Icons - 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>TextBox with Icons</h2>
<p>Click the icons on textbox to perform actions.</p>
<div style="margin:20px 0 40px 0;"></div>
<div style="margin:10px 0 20px 0">
<span>Select Icon Align: </span>
<select onchange="$('#tt').textbox({iconAlign:this.value})">
<option value="right">Right</option>
<option value="left">Left</option>
</select>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="tt" class="easyui-textbox" style="width:100%;" data-options="
label: 'Icons:',
labelPosition: 'top',
prompt: 'Input something here!',
iconWidth: 22,
icons: [{
iconCls:'icon-add',
handler: function(e){
$(e.data.target).textbox('setValue', 'Something added!');
}
},{
iconCls:'icon-remove',
handler: function(e){
$(e.data.target).textbox('clear');
}
},{
iconCls:'icon-search',
handler: function(e){
var v = $(e.data.target).textbox('getValue');
alert('The inputed value is ' + (v ? v : 'empty'));
}
}]
">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiline TextBox - 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>Multiline TextBox</h2>
<p>This example shows how to define a textbox for the user to enter multi-line text input.</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-textbox" label="Name:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Description:" labelPosition="top" multiline="true" value="This TextBox will allow the user to enter multiple lines of text." style="width:100%;height:120px">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TextBox Size - 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>TextBox Size</h2>
<p>The textbox can vary in size.</p>
<div style="margin:20px 0 40px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search small...'" style="width:100%;height:22px;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search large...'" style="width:100%;height:26px;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search big...'" style="width:100%;height:32px;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search huge...'" style="width:100%;height:40px;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TimePicker - 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 TimePicker</h2>
<p>Click drop-down button to choose time on a clock.</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-timepicker" label="Start Time:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-timepicker" label="End Time:" labelPosition="top" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,17 +11,18 @@
</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;">
<p>Click the buttons below to perform actions.</p>
<div style="margin:20px 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;">
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="dt" class="easyui-timespinner" label="Select Time:" labelPosition="top" value="01:20" style="width:100%;">
</div>
</div>
<script>
function getValue(){
var val = $('#dt').timespinner('getValue');
......
<!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>
<p>Click spin button to adjust 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-timespinner" label="Start Time:" labelPosition="top" value="01:20" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-timespinner" label="End Time:" labelPosition="top" value="14:45" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid 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>Fluid TimeSpinner</h2>
<p>This example shows how to set the width of TimeSpinner 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-timespinner" label="width: 100%" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-timespinner" 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>12 Hour 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>12 Hour Format</h2>
<p>Displays in a 12 hour format.</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-timespinner" label="Start Time:" labelPosition="top" value="01:20" hour12="true" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-timespinner" label="End Time:" labelPosition="top" value="14:45" hour12="true" style="width:100%;">
</div>
</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