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

清空旧版本

parent df57ada9
[{
"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
<!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>
<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>
<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');
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>
<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
<!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>
<p>The time value is constrained in specified range.</p>
<div style="margin:20px 0;">
<span>From 08:30 to 18:00</span>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-timespinner" data-options="label:'Select Time:',labelPosition:'top',min:'08:30',max:'18:00'" style="width:100%;">
</div>
</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
<!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>
<p>The tooltip content can be loaded via AJAX.</p>
<div style="margin:20px 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>
<p>Hover the links to display tooltip message.</p>
<div style="margin:20px 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
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