一头扎进EasyUI

惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！

一头扎进EasyUI第1讲

1、加载库文件和样式
     <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
     <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
     <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
     库文件和样式可以从官方网站下载

2、基本面板组件
     <div id="p" class="easyui-panel" title="基本面板组件" style="500px;height:200px;padding:10px;">    
     </div>
     面板：easyui-panel

3、打开关闭按钮
          <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
          <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
          按钮：easyui-linkbutton
          jQuery选择器：$('#p')
          panel的方法：panel('open')、panel('close')

4、四个按钮
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand',true)">展开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse',true)">折叠</a>
        不返回值：javascript:void(0) 

5、面板上的四个按钮
     <div id="p" class="easyui-panel" title="面板工具" style="500px;height:200px;padding:10px;"
                    data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
     data-options属性值集合
     iconCls:'icon-save',保存图标

6、定制工具
      <div class="easyui-panel" title="定制面板工具" style="500px;height:200px;padding:10px;"
               data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
     </div>
     <div id="tt">
          <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('添加')"></a>
          <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('编辑')"></a>
          <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('剪切')"></a>
          <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('帮助')"></a>
     </div>

7、加载内容
    <div id="p" class="easyui-panel" title="加载面板内容" style="500px;height:200px;padding:10px;"
               data-options="
                    tools:[{
                         iconCls:'icon-reload',
                         handler:function(){
                              $('#p').panel('refresh', '../panel/_content.html');
                         }
                    }]
               ">
     </div>
     刷新图标：iconCls:'icon-reload',
     文件路径： '../panel/_content.html'
     最后一项不要加,，浏览器不兼容
      handler:function(),把一个方法作为属性值

8、嵌套面板
     <div class="easyui-panel" title="嵌套面板" style="500px;height:200px;padding:10px;">
          <div class="easyui-layout" data-options="fit:true">
               <div data-options="region:'west',split:true" style="100px;padding:10px">
                    左边内容
               </div>
               <div data-options="region:'center'" style="padding:10px">
                    右边内容
               </div>
          </div>
     </div>
     region:'center'必须存在
     easyui-layout：布局
     fit:true：自适应屏幕
     split:true：左右伸缩

一头扎进EasyUI第2讲

1、基本消息组件
    <div style="margin:10px 0;">
          <a href="#" class="easyui-linkbutton" onclick="show()">普通消息显示</a>
          <a href="#" class="easyui-linkbutton" onclick="slide()">滑动消息显示</a>
          <a href="#" class="easyui-linkbutton" onclick="fade()">淡出消息显示</a>
          <a href="#" class="easyui-linkbutton" onclick="progress()">进度条显示</a>
     </div>

     <script type="text/javascript">
          function show(){
               $.messager.show({
                    title:'我的标题',
                    msg:'消息4秒后自动关闭.',
                    showType:'show'
               });
          }
          function slide(){
               $.messager.show({
                    title:'我的标题',
                    msg:'消息5秒后自动关闭.',
                    timeout:5000,
                    showType:'slide'
               });
          }
          function fade(){
               $.messager.show({
                    title:'我的标题',
                    msg:'消息不会自动关闭.',
                    timeout:0,
                    showType:'fade'
               });
          }
          function progress(){
               var win = $.messager.progress({
                    title:'请稍等...',
                    msg:'加载数据中...'
               });
               setTimeout(function(){
                    $.messager.progress('close');
               },5000)
          }
          title：标题
          msg：内容
          showType：方法
          timeout：时间
          $.messager.progress：进度条
          messager.show方法 在屏幕的右下方显示一个消息窗口 

2、提醒消息组件
     <div style="margin:10px 0;">
          <a href="#" class="easyui-linkbutton" onclick="alert1()">提醒消息</a>
          <a href="#" class="easyui-linkbutton" onclick="alert2()">错误消息</a>
          <a href="#" class="easyui-linkbutton" onclick="alert3()">信息消息</a>
          <a href="#" class="easyui-linkbutton" onclick="alert4()">问题消息</a>
          <a href="#" class="easyui-linkbutton" onclick="alert5()">警告消息</a>
     </div>
     <script>
          function alert1(){
               $.messager.alert('我的标题','这是一个消息!');
          }
          function alert2(){
               $.messager.alert('我的标题','这是一个错误消息!','error');
          }
          function alert3(){
               $.messager.alert('我的标题','这是一个信息消息!','info');
          }
          function alert4(){
               $.messager.alert('我的标题','这是一个问题消息!','question');
          }
          function alert5(){
               $.messager.alert('我的标题','这是一个警告消息!','warning');
          }
     </script>
     messager.alert方法 显示一个带进度条信息的窗口。
     'error''info''question''warning'图标
     中文本地化脚本：<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>

3、交互式消息组件
     <div style="margin:10px 0;">
          <a href="#" class="easyui-linkbutton" onclick="confirm1();">确认消息框</a>
          <a href="#" class="easyui-linkbutton" onclick="prompt1()">提示消息框</a>
     </div>
     <script>
          function confirm1(){
               $.messager.confirm('我的标题', '确认吗?', function(r){
                    if (r){
                         alert('确认: '+r);
                    }
               });
          }
          function prompt1(){
               $.messager.prompt('我的标题', '请输些东西', function(r){
                    if (r){
                         alert('你输入的是: '+r);
                    }
               });
          }
     </script>
     messager.confirm方法 显示一个带有确认和取消按钮的确认信息窗口。
     messager.prompt方法 显示一个带有确认和取消的输入信息窗口。

4、消息框位置
    <div style="margin:10px 0;">
          <p>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topLeft();">左上角</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">顶部左右居中</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topRight()">右上角</a>
          </p>
          <p>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerLeft()">左边上下居中</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="center()">上下左右居中</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerRight()">右边上下居中</a>
          </p>
          <p>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomLeft()">左下角</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomCenter()">底部左右居中</a>
               <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomRight()">右下角</a>
          </p>
     </div>
     <script>
          function topLeft(){
               $.messager.show({
                    title:'我的标题',
                    msg:'左上角',
                    showType:'show',
                    style:{
                         right:'',
                         left:0,
                         top:document.body.scrollTop+document.documentElement.scrollTop,
                         bottom:''
                    }
               });
          }
          function topCenter(){
               $.messager.show({
                    title:'我的标题',
                    msg:'顶部左右居中',
                    showType:'slide',
                    style:{
                         right:'',
                         top:document.body.scrollTop+document.documentElement.scrollTop,
                         bottom:''
                    }
               });
          }
          function topRight(){
               $.messager.show({
                    title:'我的标题',
                    msg:'右上角',
                    showType:'show',
                    style:{
                         left:'',
                         right:0,
                         top:document.body.scrollTop+document.documentElement.scrollTop,
                         bottom:''
                    }
               });
          }
          function centerLeft(){
               $.messager.show({
                    title:'我的标题',
                    msg:'左边上下居中',
                    showType:'fade',
                    style:{
                         left:0,
                         right:'',
                         bottom:''
                    }
               });
          }
          function center(){
               $.messager.show({
                    title:'我的标题',
                    msg:'上下左右居中',
                    showType:'fade',
                    style:{
                         right:'',
                         bottom:''
                    }
               });
          }
          function centerRight(){
               $.messager.show({
                    title:'我的标题',
                    msg:'右边上下居中',
                    showType:'fade',
                    style:{
                         left:'',
                         right:0,
                         bottom:''
                    }
               });
          }
          function bottomLeft(){
               $.messager.show({
                    title:'我的标题',
                    msg:'左下角',
                    showType:'show',
                    style:{
                         left:0,
                         right:'',
                         top:'',
                         bottom:-document.body.scrollTop-document.documentElement.scrollTop
                    }
               });
          }
          function bottomCenter(){
               $.messager.show({
                    title:'我的标题',
                    msg:'底部左右居中',
                    showType:'slide',
                    style:{
                         right:'',
                         top:'',
                         bottom:-document.body.scrollTop-document.documentElement.scrollTop
                    }
               });
          }
          function bottomRight(){
               $.messager.show({
                    title:'我的标题',
                    msg:'右下角',
                    showType:'show'
               });
          }
     </script>
     

一头扎进EasyUI第3讲

1、基本日期框组件
     <input class="easyui-datebox"></input>
     easyui-datebox：日期框

2、日期格式化
   <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
     <script type="text/javascript">
          function myformatter(date){
               var y = date.getFullYear();
               var m = date.getMonth()+1;
               var d = date.getDate();
               return y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d);
          }
          function myparser(s){
               if (!s) return new Date();
               var ss = (s.split('/'));
               var y = parseInt(ss[0],10);
               var m = parseInt(ss[1],10);
               var d = parseInt(ss[2],10);
               if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                    return new Date(y,m-1,d);
               } else {
                    return new Date();
               }
          }
     </script>
     formatter:一个格式化日期的函数
     parser:一个解析日期的字符串

3、日期框验证
      <input class="easyui-datebox" required></input> 
      required必填选项

4、日期框事件
     <div style="margin:10px 0">
          <span>选择的日期是: </span>
          <span id="result"></span>
     </div>
     <script>
          function onSelect(date){
               $('#result').text(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
          }
     </script>
     日期框onSelect事件

一头扎进EasyUI第4讲

1、基本日期时间框组件
     <input class="easyui-datetimebox" required style="150px">
     easyui-datetimebox:日期时间框

2、初始化
     <input class="easyui-datetimebox" value="2013-11-11 2:3:56" style="150px">
     value:初始化值

3、显示秒
        <div style="margin:10px 0;">
<span>显示秒: </span>
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
</div>
<input id="dt" class="easyui-datetimebox" style="150px">
        onchange复选框
        showSeconds显示秒方法
        $(this).is(':checked')是否为true

一头扎进EasyUI第5讲

1、时间微调器组件
      <input class="easyui-timespinner" style="80px;">
     easyui-timespinner：时间微调器组件

2、时间范围
     <input class="easyui-timespinner" data-options="min:'08:30',max:'18:00'" style="80px;"></input>
    min:'08:30',max:'18:00' 

3、设置
     <div style="margin:10px 0;">
          <a href="#" class="easyui-linkbutton" onclick="getValue()">获取值</a>
          <a href="#" class="easyui-linkbutton" onclick="setValue()">设置值</a>
          <a href="#" class="easyui-linkbutton" onclick="disable()">禁用</a>
          <a href="#" class="easyui-linkbutton" onclick="enable()">启用</a>
     </div>
     <input id="dt" class="easyui-timespinner" style="80px;">
     <script>
          function getValue(){
               var val = $('#dt').timespinner('getValue');
               alert(val);
          }
          function setValue(){
               $('#dt').timespinner('setValue', '09:45');
          }
          function disable(){
               $('#dt').timespinner('disable');
          }
          function enable(){
               $('#dt').timespinner('enable');
          }
     </script>