欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  jQuery EasyUI插件的简单使用详细介绍说明(下)

JQuery 网络 327 0评论

2.EasyUI 使用——form表单


form表单组件主要有以下内容(如下图)     

1001990-20170510174904441-1544507660.png


2.1. validatebox验证框

1001990-20170510183932301-842494587.png

姓名:必填/1-4个字符/必填中文

邮箱:必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn

密码验证:

<div style="margin:100px">
用户名:&nbsp;<input id="vv" />   <!-- 因为在下面js代码中声明了这是个验证框【 $("#vv").validatebox({}) 】,所以可以不加class="",否则需要加上【参考 #pwd】   -->
邮&nbsp;&nbsp;箱:<input id="email" />
密&nbsp;&nbsp;码:<input id="pwd" name="pwd" type="password" class="easyui-validatebox"
data-options="required:true" />
验证密码:<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
required="required" validType="equals['#pwd']" />
</div>
<script type="text/javascript">
$("#vv").validatebox({//声明了这是个验证框,且增加语法限制
required : true,
validType : [ "length[1,4]", "zhongwen" ]
//设置了字符长度限制,中文规则自定义
});
$("#email").validatebox({
required : true,
validType : [ "length[1,30]", "email" ]   //email规则已经实现,无序自定义
});
</script>
<script type="text/javascript">
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
zhongwen : {
validator : function(value) {//value表示在文本框中输入的内容
if (/^[\u3220-\uFA29]+$/.test(value)) {
return true;
}
},
message : "用户名必须填中文"
},
equals : {
validator : function(value, param) {
return value == $(param[0]).val();
},
message : "密码不匹配"
}
});
</script>


2.2.combobox下拉列表框


2.1.1 直接设置多选项<select>...<option>...

你所在的城市:

<select id="cc" class="easyui-combobox" name="city" style="width:150px;">   
<option>aitem1</option>   
<option>bitem1</option>   
<option>bitem2</option>   
<option>citem1</option>   
<option>citem2</option>   
<option>citem3</option>   
<option>ditem1</option>   
<option>ditem2</option>   
<option>ditem3</option>   
<option>ditem4</option>   
</select>
<script type="text/javascript">
$(function(){
$("#cc").combobox("setValue","长沙");
});
</script>


2.2.2 当数据量过多时,此时再利用 select 就很不方便,此时应该将选项保存到json文件中来引入

你所在的城市:

<input id="cc" name="city" value="广州" />

<script type="text/javascript">
$("#cc").combobox({
//url表示引入json文件的路径
//textField表示在下拉框中看得见的内容,<option>长沙</option>
//valueField表示在下拉框中看不见的内容,用于向后台传递数据<option value="cs">长沙</option>
url : "combobox_data.json",
valueField : "id",
textField : "text"
});
</script>

combobox_data.json 文件

[
  {
"id":"gz",
"text":"广州"   
  },
  {
"id":"zs",
"text":"中山"   
  },
  {
"id":"fs",
"text":"佛山"
  },
  {
"id":"sz",
"text":"深圳",
"selected":true   
  },
  {
"id":"yj",
"text":"阳江"   
  }
]

因为链接到外面的 json文件,此时直接访问该文件可能只显示多选框而没有数据,需要将其发布到服务器上来得到期望的效果

1001990-20170510205336285-672977253.png


2.3. datebox日期选择框

默认显示yyyy-mm-dd格式,想要显示中文信息需要添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>

1001990-20170510205708535-1793485536.png

选中日期并显示选中的日期

入职时间:<input id="dd" type="text"></input>  

<script type="text/javascript">
$("#dd").datebox({
required:true
});
</script>
<script type="text/javascript">
$("#dd").datebox({
onSelect:function(date){
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate());
}
});
</script>


2.4. numberspinner数字微调框 

设置数字微调框中的值

商品数量:

<input type="text" size="2px" value="1" />
<span></span>
<hr />
<input id="ss" required="required" style="width:90px;">
<script type="text/javascript">
$("#ss").numberspinner({
value : 1,
min : 1,
max : 100,
editable : true
});
</script>

获取数字微调框中的值(上调或下调时及时显示),框内输入后敲击回车也及时显示框内数据

1001990-20170510214846832-188236541.png购买数量:

<input id="ss" class="easyui-numberspinner" style="width:100px" />

<script type="text/javascript">
$("#ss").numberspinner({
value : 1,
min : 1,
max : 100,
editable : true
//默认可编辑
});
</script>

你一共购买了

<span id="num">1</span>件商品。。。

<script type="text/javascript">
$("#ss").numberspinner({
onSpinUp : function() {
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
$("#num").text(value).css("color", "red");
//如果value值为100
if (value == 100) {
$("span:first").html("商品已满,不能再购买了").css("color", "blue");
$("input:first").attr("disabled", "disabled");
}
},
onSpinDown : function() {
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
$("#num").text(value).css("color", "blue");
//如果value值小于100
if (value < 100) {
$("span:first").html("");
$("input:first").removeAttr("disabled");
}
}
});
</script>
<script type="text/javascript">
$("#ss").keyup(function(xxx) {
//将浏览器产生的事件对象设置到myevent变量中
var myevent = xxx;
//获取按键的unicode码
var code = myevent.keyCode;
var value = $(this).val();
//如果按钮是回车
if (code == 13 && value<100 && value>1) {  //添加一些约束
$("#num").text(value).css("color", "red");
}   
});
</script>


2.5. slider滑动条框

拖动滑块,将值同步显示到span标签中

1001990-20170510214224832-1409913561.png

身高:

<span>150</span>
<span id="tip"></span>
<div style="margin:50px">
<input id="ss" class="easyui-slider" value="0"
style="width:600px;height:500px"
data-options="max:180,min:150,showTip:true,rule:[150,'|',160,'|',170,'|',180]" />
</div>
<script type="text/javascript">
$("#ss").slider({
onChange : function(newValue) {
$("span:first").text(newValue);
if (newValue == 180) {
$("#tip").text("身高可以");
} else if (newValue >= 170) {
$("#tip").text("国民平均");
} else if (newValue >= 160) {
$("#tip").text("还需努力");
}
}
});
</script>


2.6. progressbar进度条 

每隔1秒让进度条按随机数填充,直至充满进度条刻度(只能执行一次)

1001990-20170510215823691-1059889187.png进度条:

<div id="p" style="width:400px;"></div>

<script type="text/javascript">
$("#p").progressbar({
width : "auto",
height : 22,
value : 0
});
</script>

<input type="button" value="开始" style="font-size:11px" />

<script type="text/javascript">
var timeID = null;
//随机产生1-9之间的整数,包含1和9
function getNum() {
return Math.floor(Math.random() * 9) + 1;
}
$(":button").click(function() {
timeID = window.setInterval(function() {
//获取随机数,例如:9
var num = getNum();
//获取进度条当前值,例如:99
var value = $("#p").progressbar("getValue");
//如果随机数加当前值小于100的话
if (value + num < 100) {
  //填充进度条当前值
$("#p").progressbar("setValue", value + num);
} else {
//将进度条当前值设置为100
$("#p").progressbar("setValue", 100);
//停止定时器
window.clearInterval(timeID);
//将"开始"按钮生效
$(":button").removeAttr("disabled");
}
}, 200);
//将"开始"按钮失效
$(this).attr("disabled", "disabled");
});
</script>


2.7. window窗口

window窗口组件主要有以下内容(如下图)  

1001990-20170510230904129-461657792.png


2.7.1 创建复合布局窗口(简单)

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"   
data-options="iconCls:'icon-save',modal:true">   
<div class="easyui-layout" data-options="fit:true">   
<div data-options="region:'north',split:true" style="height:100px"></div>   
<div data-options="region:'center'">   
The Content.
</div>   
</div>   
</div>


2.7.2  实现功能:单击按钮,打开或关闭一个窗口

窗口的属性扩展自 panel(面板),窗口新增或重新定义的属性如下:

1001990-20170510220446832-1605569320.png

<input id="open1" type="button" value="打开窗口1" />
<hr />
<div id="win1"></div>
<script type="text/javascript">
$("#open1").click(function() {
$("#win1").window({
title : "我的窗口1",
width : 200,
height : 300,
top : 100,
left : 400,
collapsible : true,
minimizable : true,
maximizable : true,
closable : true,
draggable : true,
resizable : true,
shadow : true,
modal : true,
});
});
</script>

1001990-20170510222610738-326373771.png


2.8.dialog对话框 

单击按钮,打开或关闭一个对话框

<input id="open1" type="button" value="打开对话框1"/>
<hr/>
<div id="dd1"></div>
<script type="text/javascript">
$("#open1").click(function(){
$("#dd1").dialog({
width:300,
height:400, //显示效果中拖动且缩短了高度
left:400,
top:100,
title:"对话框1",
resizable:true,//可缩放
toolbar:[
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},
{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons:[
{
text:'确定',
handler:function(){alert('ok')}
},
{
text:'关闭',
handler:function(){
//关闭本对话框
$("#dd1").dialog("close");
}
}
],
href:"../themes/combobox.html"
});
});
</script>

1001990-20170510223213379-1404486636.png


2.9. messager消息窗口 

单击按钮,弹出 警告框/ 确认框/ 输入框/ 显示框

1001990-20170510224606801-429167963.png

<input type="button" value="警告框"/>
<input type="button" value="确认框"/>
<input type="button" value="输入框"/>
<input type="button" value="显示框"/>
<hr/>
<div style="margin:200px"></div>
<script type="text/javascript">
$(":button").click(function(){
var tip = $(this).val();
tip = $.trim(tip);
if("警告框" == tip){
$.messager.alert("我的警告框","不能浪费时间了","warning");
}else if("确认框" == tip){
$.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){
alert(flag);
});
}else if("输入框" == tip){
$.messager.prompt("我的输入框","你喜欢什么口味的雪碧?",function(value){
alert(value);
});
}else if("显示框" == tip){
$.messager.show({
title:"我的显示框",
msg:"我负责显示信息,2秒后我将消失",
showType:"fade",
width:200,
height:200,
timeout:2000  //2秒后消失
});
}
});
</script>


2.10. tree树 

选中树中某个子节点,弹出选中的内容 (用树替代linkButton按钮)

1001990-20170510230039238-1566142517.png


2.10.1 逻辑关系简单时

<ul id="ttt" class="easyui-tree" style="width:222px">
<li><span>第一章</span></li>
<li><span>第二章</span>
<ul>
<li><span>第一节</span></li>
<li><span>第二节</span>
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul></li>
 <li><span>第三节</span></li>
</ul></li>
</ul>


2.10.2 用到json时(需要发布到服务器)

<ul id="ttt"></ul>

<script type="text/javascript">
$("#ttt").tree({
url:"tree_data.json",
lines:true
});
</script>
<script type="text/javascript">
$("#ttt").tree({
onClick:function(node){
alert(node.text);
}
});
</script>


tree_data.json

[
  {
"id":1,
"text":"第一章" 
  },
  {
"id":2,
"text":"第二章",
"state":"closed",
"children":[
   {
 "id":21,
  "text":"第一节" 
   },
   {
   "id":22,
  "text":"第二节"
   },
   {
   "id":23,
  "text":"第三节",
  "state":"closed",
  "children":[
 {
  "id":231,
  "text":"第一条" 
 },
 {
"id":232,
  "text":"第二条" 
 }
  ]  
   },
   {
   "id":24,
  "text":"第四节"
   }
] 
  }
]


原文地址:https://www.cnblogs.com/zjfjava/p/6837577.html

转载请注明: ITTXX.CN--分享互联网 » jQuery EasyUI插件的简单使用详细介绍说明(下)

最后更新:2018-10-23 11:51:47

赞 (0) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽