一)Form表单
1> validatebox验证框:
- 要求:
- 姓名：必填/1-6个字符/必填中文
- 邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn
- 代码:
<div style="margin:100px"></div>
用户名:
<input id="vv"/>
<script type="text/javascript">
$("#vv").validatebox({
required:true,
validType:["length[1,4]","zhongwen"]
});
</script>
<script type="text/javascript">
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
zhongwen : {
validator: function(value){//value表示在文本框中输入的内容
if(/^[\u3220-\uFA29]+$/.test(value)){
return true;
}
},
// 如果不符合规则, 则一下是提示信息
message: "用户名必须填中文"
}
});
</script>
2> combobox下拉列表框
- 设置下拉列表框默认值
你所在的城市：
<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>
- datebox日期选择框
- 功能:
- 显示yyyy-mm-dd格式，
- 添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
- 选中日期并显示选中的日期
- 代码:
- 功能:
入职时间：<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>
- numberspinner数字微调框
- 功能:
- 设置数字微调框中的值
- 获取数字微调框中的值
- 代码:
- 功能:
商品数量：<input type="text" size="2px" value="1"/><span></span>
<hr/>
<input id="ss" required="required" style="width:80px;">
<script type="text/javascript">
$("#ss").numberspinner({
value:1,
min:1,
max:100,
editable:true
});
</script>
<script type="text/javascript">
$("#ss").numberspinner({
onSpinUp:function(){
//获取numberspinner的当前值
var value = $("#ss").numberspinner("getValue");
//将numberspinner的当前值设置到商品数量文本框中
$("input:first").val(value).css("color","red");
//如果value值为100
if( value == 100 ){
$("span:first").html("商品已满，不能再购买了").css("color","blue");
$("input:first").attr("disabled","disabled");
}
},
onSpinDown:function(){
//获取numberspinner的当前值
var value = $("#ss").numberspinner("getValue");
//将numberspinner的当前值设置到商品数量文本框中
$("input:first").val(value).css("color","red");
//如果value值小于100
if( value < 100 ){
$("span:first").html("");
$("input:first").removeAttr("disabled");
}
}
});
</script>
- slider滑动条框
拖动滑块，将值同步显示到span标签中
二)Progressbar进度条
- 功能: 每隔1秒让进度条按随机数填充，直至充满进度条刻度
- 代码:
进度条：
<div id="p" style="width:400px;"></div>
<script type="text/javascript">
$("#p").progressbar({
width:"auto",
height:44,
value:0
});
</script>
<input type="button" value="开始" style="font-size:111px"/>
<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>
三)window窗口
- 功能: 单击按钮，打开或关闭一个窗口
- 代码:
<input id="open1" type="button" value="打开窗口1"/>
<input id="open2" type="button" value="打开窗口2"/>
<hr/>
<div id="win1"></div>
<div id="win2"></div>
<script type="text/javascript">
$("#open1").click(function(){
$("#win1").window({
title:"我的窗口1",
width:200,
height:300,
top:100,
left:400,
collapsible:false,
minimizable:false,
maximizable:false,
closable:true,
draggable:false,
resizable:false,
shadow:false,
modal:false,
href:"08_datebox.html"
});
});
$("#open2").click(function(){
$("#win2").window({
title:"我的窗口2",
width:200,
height:300,
top:100,
left:800,
collapsible:false,
minimizable:false,
maximizable:false,
closable:true,
draggable:false,
resizable:false,
shadow:false,
modal:false
});
});
</script>
四)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",
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:"07_combobox_2.html"
});
});
</script>
五)messager消息窗口
- 功能: 单击按钮，弹出警告框 / 确认框 / 显示框 / 输入框
- 代码:
<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("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){
alert(value);
});
}else if("显示框" == tip){
$.messager.show({
title:"我的显示框",
msg:"不要太区分Android和JavaEE了",
showType:"fade",
width:200,
height:200,
timeout:1000
});
}
});
</script>
六)tree树
- 功能:
- 选中树中某个子节点，弹出选中的内容
- 用树替代linkButton按钮
- 代码:
- html代码:
<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>
</ul>
</li>
</ul>
- js代码:
<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>
- json数据: 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":"第二条"
}
]
}
]
}
]
