惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！
一头扎进EasyUI第6讲
、日历组件
<div class="easyui-calendar" style="width:180px;height:180px;"></div>
easyui-calendar：日历组件 、一周的第一天
<div style="margin:10px 0">
<select onchange="$('#cc').calendar({firstDay:this.value})">
<option value="">周一</option>
<option value="">周二</option>
<option value="">周三</option>
<option value="">周四</option>
<option value="">周五</option>
<option value="">周六</option>
<option value="">周日</option>
</select>
</div>
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
一头扎进EasyUI第7讲
、基本数字框组件
<input class="easyui-numberbox" required data-options=" onChange: function(value){$('#vv').text(value);}">
easyui-numberbox：数字框 、范围
<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">
min：最小
max：最大
precision：精度，小数点后几位 、格式化
<table>
<tr>
<td>美国数字格式：</td>
<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:','"></input></td>
</tr>
<tr>
<td>法国数字格式：</td>
<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:','"></input></td>
</tr>
<tr>
<td>货币:美元</td>
<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'"></input></td>
</tr>
<tr>
<td>货币:欧元</td>
<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:' ',prefix:'€'"></input></td>
</tr>
<tr>
<td></td>
<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:',',suffix:'€'"></input></td>
</tr>
</table>
precision：精度
groupSeparator：分组
decimalSeparator：十进制分隔符
prefix：前缀
suffix：后缀
一头扎进EasyUI第8讲
、基本数字微调器
<div style="margin:10px 0;"></div>
<input class="easyui-numberspinner" style="width:80px;" data-options="
onChange: function(value){
$('#vv').text(value);
}
"></input>
<div style="margin:10px 0;">
值: <span id="vv"></span>
</div>
easyui-numberspinner数字微调整器 、增量数
<input class="easyui-numberspinner" value="" data-options="increment:100" style="width:120px;"></input>
increment：增量 、数字范围
<input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>
一头扎进EasyUI第9讲
、基本验证框组件
<div class="easyui-panel" title="注册" style="width:400px;padding:10px">
<table>
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>电话:</td>
<td><input class="easyui-validatebox" data-options="required:true"></td>
</tr>
</table>
</div>
required 必填
validType 验证类型
length 长度 、定制验证框提示
<div class="easyui-panel" title="注册" style="width:400px;padding:10px">
<table>
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的用户名.',required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入一个有效的Email.',required:true,validType:'email'"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的URL.',required:true,validType:'url'"></td>
</tr>
<tr>
<td>电话:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的电话号码.',required:true"></td>
</tr>
</table>
</div>
<script>
$(function(){
$('input.easyui-validatebox').validatebox({
tipOptions: { // the options to create tooltip
showEvent: 'mouseenter',
hideEvent: 'mouseleave',
showDelay: ,
hideDelay: ,
zIndex: '',
onShow: function(){
if (!$(this).hasClass('validatebox-invalid')){
if ($(this).tooltip('options').prompt){
$(this).tooltip('update', $(this).tooltip('options').prompt);
} else {
$(this).tooltip('tip').hide();
}
} else {
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
},
onHide: function(){
if (!$(this).tooltip('options').prompt){
$(this).tooltip('destroy');
}
}
}
}).tooltip({
position: 'right',
content: function(){
var opts = $(this).validatebox('options');
return opts.prompt;
},
onShow: function(){
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
});
});
</script>
prompt提示
一头扎进EasyUI第10讲
、基本滑动器组件
<input class="easyui-slider" style="width:300px" data-options="showTip:true"> 、滑动器标尺
<input class="easyui-slider" style="width:300px" data-options="
showTip:true,
rule: [,'|',,'|',,'|',,'|',]
"> 、格式化提示信息
<div style="margin-top:20px;">
<input class="easyui-slider" value="" style="width:300px" data-options="
showTip: true,
rule: [,'|',,'|',,'|',,'|',],
tipFormatter: function(value){
return value+'px';
},
onChange: function(value){
$('#ff').css('font-size', value);
}">
</div>
<div id="ff" style="margin-top:50px;font-size:12px">www.java1234.com</div> 、垂直滑动器
<input class="easyui-slider" style="height:300px" data-options="
showTip: true,
mode: 'v',
reversed: false,
rule: [,'|',,'|',,'|',,'|',]
">