首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(3)jquery easyui常用form控件的使用

2013-09-28 
(三)jquery easyui常用form控件的使用?easyui为我们提供的简单的验证功能,验证方法包括:数据格式的验证,长

(三)jquery easyui常用form控件的使用

?easyui为我们提供的简单的验证功能,验证方法包括:数据格式的验证,长度的验证,是否为必输项的验证,将需要验证的属性配置到data-options中即可。

1 数据格式验证:

(1):必输项:

????????? <input name="name" data-options="required:true"></input>

?(2)格式的验证:

??????? ?<input name="email" data-options="validType:'email'"></input>

<input name="email" data-options="required:true,validType:'url'"></input>

(3)长度范围的验证:

????? <input data-options="validType:'length[1,3]'">

(4)numerbox:

????? <input id="nn" data-options="min:5.5,max:20,precision:2,required:true"/>

????? method:$('#mm').numberbox(setValue,getValue)

(5)numberspinner:

???? <input id="ss" data-options="min:10,max:100,required:true" style="width:80px;"></input>
???? <input value="1000" data-options="increment:100" style="width:120px;"></input>

(6)combo

?<div id="sp">
??<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
??<input type="radio" name="lang" value="01"><span>Java</span><br/>
??<input type="radio" name="lang" value="02"><span>C#</span><br/>
??<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
??<input type="radio" name="lang" value="04"><span>Basic</span><br/>
??<input type="radio" name="lang" value="05"><span>Fortran</span>
?</div>

js:??$(function(){
???$('#cc').combo({
????required:true,
????editable:false
???});
???$('#sp').appendTo($('#cc').combo('panel'));
???$('#sp input').click(function(){
????var v = $(this).val();
????var s = $(this).next('span').text();
????$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
???});
??});

(7)combobox:

I: <select id="cc" name="state" style="width:200px;" data-options="required:true">
??<option value="AL">Alabama</option>
??<option value="AK">Alaska</option>
??<option value="AZ">Arizona</option>
?</select>

II:?<input
???name="language"
???data-options="
?????url:'combobox_data.json',
?????valueField:'id',
?????textField:'text',
?????multiple:true,
?????panelHeight:'auto'
???">

method:??function loadData(){
???$('#cc').combobox({
????url:'combobox_data.json',
????valueField:'id',
????textField:'text'
???});
??}
??function setValue(){
???$('#cc').combobox('setValue','CO');
??}
??function getValue(){
???var val = $('#cc').combobox('getValue');//如果是多选,则调用方法:getValues,return:val1,val2,val3
???alert(val);
??}
??function disable(){
???$('#cc').combobox('disable');
??}
??function enable(){
???$('#cc').combobox('enable');
??}

?

(8)datepicker

??? <input data-options="formatter:formatDate">

??? js:function formatterDate(data){

?? ? var year = date.getFullYear();

???? var month = date.getMonth + 1;

??? ?var date = date.getDate();

??? if(month < 10){

????? month = '0' + month;

?}

?? return year + '-' + month + '-' + date;

?}

热点排行