一头扎进EasyUI2

最新推荐文章于 2025-11-27 18:15:00 发布

转载最新推荐文章于 2025-11-27 18:15:00 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cnmotive/p/3141534.html

本文深入讲解了EasyUI框架中多种组件的使用方法，包括日历组件、数字框、数字微调器、验证框、滑动器等，详细介绍了各组件的属性设置与交互功能。

惯例广告一发，对于初学真，真的很有用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]
               ">

转载于:https://www.cnblogs.com/cnmotive/p/3141534.html