first commit
This commit is contained in:
39
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/basic.html
Normal file
39
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/basic.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!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:400px;padding:30px 60px">
|
||||
<div style="margin-bottom:20px">
|
||||
<div>Email:</div>
|
||||
<input class="easyui-textbox" data-options="prompt:'Enter a email address...',validType:'email'" style="width:100%;height:32px">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<div>First Name:</div>
|
||||
<input class="easyui-textbox" style="width:100%;height:32px">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<div>Last Name:</div>
|
||||
<input class="easyui-textbox" style="width:100%;height:32px">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<div>Company:</div>
|
||||
<input class="easyui-textbox" style="width:100%;height:32px">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/button.html
Normal file
23
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/button.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!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 style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="buttonText:'SEARCH',prompt:'Search...'" style="width:250px;height:32px;">
|
||||
</div>
|
||||
<div style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="buttonText:'Search',buttonIcon:'icon-search',prompt:'Search...'" style="width:450px;height:24px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
<input id="tt" style="width:400px" data-options="
|
||||
prompt: 'Input something here!',
|
||||
icons:[{
|
||||
iconCls:'icon-search',
|
||||
handler: function(e){
|
||||
var v = $(e.data.target).textbox('getValue');
|
||||
alert('The inputed value is ' + (v ? v : 'empty'));
|
||||
}
|
||||
}]
|
||||
">
|
||||
<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>
|
||||
34
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/custom.html
Normal file
34
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/custom.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!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:400px;padding:30px 70px 20px 70px">
|
||||
<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>
|
||||
21
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/fluid.html
Normal file
21
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/fluid.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!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>
|
||||
<p>width: 50%</p>
|
||||
<input class="easyui-textbox" data-options="prompt:'Enter something here...'" style="width:50%;height:32px">
|
||||
<p>width: 30%</p>
|
||||
<input class="easyui-textbox" data-options="prompt:'Enter something here...'" style="width:30%;height:32px">
|
||||
</body>
|
||||
</html>
|
||||
45
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/icons.html
Normal file
45
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/icons.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<input id="tt" class="easyui-textbox" style="width:400px" data-options="
|
||||
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'));
|
||||
}
|
||||
}]
|
||||
">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
<!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>
|
||||
<input class="easyui-textbox" data-options="multiline:true" value="This TextBox will allow the user to enter multiple lines of text." style="width:300px;height:100px">
|
||||
</body>
|
||||
</html>
|
||||
29
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/size.html
Normal file
29
bin/WebRoot/JS/jquery-easyui-1.4.5/demo/textbox/size.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!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 style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search small...'" style="width:250px;height:22px;">
|
||||
</div>
|
||||
<div style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search large...'" style="width:250px;height:26px;">
|
||||
</div>
|
||||
<div style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search big...'" style="width:250px;height:32px;">
|
||||
</div>
|
||||
<div style="margin-bottom:40px">
|
||||
<input class="easyui-textbox" data-options="iconCls:'icon-search',iconWidth:28,prompt:'Search huge...'" style="width:250px;height:40px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user