升级easyUI到1.9.4版本
This commit is contained in:
季圣华
35
erp_web/js/easyui/demo/textbox/basic.html
Normal file
35
erp_web/js/easyui/demo/textbox/basic.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>
|
||||
25
erp_web/js/easyui/demo/textbox/button.html
Normal file
25
erp_web/js/easyui/demo/textbox/button.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
68
erp_web/js/easyui/demo/textbox/clearicon.html
Normal file
68
erp_web/js/easyui/demo/textbox/clearicon.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!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>
|
||||
34
erp_web/js/easyui/demo/textbox/custom.html
Normal file
34
erp_web/js/easyui/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: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>
|
||||
25
erp_web/js/easyui/demo/textbox/fluid.html
Normal file
25
erp_web/js/easyui/demo/textbox/fluid.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
51
erp_web/js/easyui/demo/textbox/icons.html
Normal file
51
erp_web/js/easyui/demo/textbox/icons.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
25
erp_web/js/easyui/demo/textbox/multiline.html
Normal file
25
erp_web/js/easyui/demo/textbox/multiline.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
31
erp_web/js/easyui/demo/textbox/size.html
Normal file
31
erp_web/js/easyui/demo/textbox/size.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user