一头扎进EasyUI2
惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！
一头扎进EasyUI第6讲
1、日历组件 <div class="easyui-calendar" style="width:180px;height:180px;"></div> easyui-calendar：日历组件 2、一周的第一天 <div style="margin:10px 0"> <select onchange="$('#cc').calendar({firstDay:this.value})"> <option value="1">周一</option> <option value="2">周二</option> <option value="3">周三</option> <option value="4">周四</option> <option value="5">周五</option> <option value="6">周六</option> <option value="0">周日</option> </select> </div> <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
一头扎进EasyUI第7讲
1、基本数字框组件 <input class="easyui-numberbox" required data-options=" onChange: function(value){$('#vv').text(value);}"> easyui-numberbox：数字框 2、范围 <input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true"> min：最小 max：最大 precision：精度，小数点后几位 3、格式化 <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讲
1、基本数字微调器 <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数字微调整器 2、增量数 <input class="easyui-numberspinner" value="1000" data-options="increment:100" style="width:120px;"></input> increment：增量 3、数字范围 <input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>
一头扎进EasyUI第9讲
1、基本验证框组件 <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 长度 2、定制验证框提示 <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: 0, hideDelay: 0, 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讲
1、基本滑动器组件 <input class="easyui-slider" style="width:300px" data-options="showTip:true"> 2、滑动器标尺 <input class="easyui-slider" style="width:300px" data-options=" showTip:true, rule: [0,'|',25,'|',50,'|',75,'|',100] "> 3、格式化提示信息 <div style="margin-top:20px;"> <input class="easyui-slider" value="12" style="width:300px" data-options=" showTip: true, rule: [0,'|',25,'|',50,'|',75,'|',100], 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> 4、垂直滑动器 <input class="easyui-slider" style="height:300px" data-options=" showTip: true, mode: 'v', reversed: false, rule: [0,'|',25,'|',50,'|',75,'|',100] ">
