jQueryEasyUI--传统前端框架“重温记”

写在前面：jQuery EasyUI 是一个基于 jQuery 的前端ui框架，集成了各种用户界面插件。可能有些同学觉得都什么年代了这个应该快被淘汰了，但不可否认的是仍有许多it公司用jQueryEasyUI来快速开发后台管理系统,因为相较与一些mvvm框架构建的ui系统jQuery EasyUI兼容性更好，适合一些兼容性较高的场景使用，也非常适合一些主要从事后端工作的同学快速搭建前端页面。同时它提供建立现代化的具有交互性的 javascript 应用的必要的功能，使用 easyui，不需要写太多 javascript 代码，一般情况下只需要使用一些 html 标记来定义用户界面。

一.jQuery EasyUI快速入门demo

首先先下载easyui
然后直接上代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="jquery.easyui.min.js"></script>
</head>
<body>
  <div class='easyui-draggable'>拖动<div>
</body>
</html>

只要一行代码easyui-draggable这个div元素就能实现鼠标拖动效果了。

二.jQuery EasyUI优缺点
　jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。
jQuery EasyUI特点：

1.基于jquery用户界面插件的集合;
2.为一些当前用于交互的js应用提供必要的功能;
3.EasyUI支持两种渲染方式分别为javascript方式（如：4.$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）;
5.支持HTML5（通过data-options属性）;
6.开发产品时可节省时间和资源;
7.简单，但很强大;
8.支持扩展，可根据自己的需求扩展控件;
9.目前各项不足正以版本递增的方式不断完善.

二.jQuery EasyUI基础组件

1.Draggable
　通过标签创建一个可拖动的元素。需要给标签添加一个class类，值为easyui-draggable.

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">    <div id="title" style="background:#ccc;">title</div></div>

也可以通过javascript来创建。

<div id="dd" style="width:100px;height:100px;"> 
<div id="title" style="background:#ccc;">title</div> 
</div> 
$('#dd').draggable({ 
handle:'#title' 
});

draggable的一个重要属性proxy，在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象。

$('#dd2').draggable({  // 克隆一个元素让它可以移动
        proxy:'clone'
    });
$('#dd3').draggable({
        proxy:function(source){
            var p = $('<div class="proxy">proxy</div>');
            p.appendTo('body');
            return p;
        }
    });

2.Droppable
　　通过标签创建一个可放置的元素。需要给标签添加一个class类，值为easyui-droppable。

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>

也可以通过javascript创建。

<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({ 
accept:'#d1,#d3'  //可以接受d1、d3
});

3.SearchBox
　搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。

![运行结果.png . . .]

1. 使用标签创建。添加'easyui-searchbox'类到< input >标签。

<input id="ss" class="easyui-searchbox" style="width:300px" 
　　　　data-options="searcher:qq,prompt:'Please Input Value'"></input>

2.通过javascript创建

<input id="ss"></input> 
<div id="mm" style="width:120px"> 
<div data-options="name:'all',iconCls:'icon-ok'">All News</div> 
<div data-options="name:'sports'">Sports News</div> 
</div> 
$('#ss').searchbox({ 
searcher:function(value,name){ 
alert(value + "," + name) 
}, 
menu:'#mm', 
prompt:'Please Input Value' 
});

我们可以通过它的setValue与getValue来设置或都返回一个搜索值。

$('#ss').searchbox('setValue','123');
$('#ss').searchbox('getValue',"");

4.Resizable
　　我们通过给< div >标签添加class="easyui-resizable" 属性来创建一个可以调整大小的窗口。

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>

也可以通过javascript来创建。

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> 
$('#rr').resizable({ 
maxWidth:800,  //当调整大小时候的最大宽度
maxHeight:600  //当调整大小时候的最大高度
});

5.pagination
　　分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。

image.png

分页控件可以通过标签来创建，我们通过设置< div >标签的class=‘easyui-pagination’来创建。

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

我们更多的是通过javascript来创建。

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 
$('#pp').pagination({ 
total:2000,   //总记录数，在分页控件创建时初始的值。
pageSize:10 　//页面大小
});

6.ProgressBar
进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。

创建进度条比较简单，可以用下面的两种方式来创建。

1.从标签创建更加简单，添加'easyui-progressbar'类到< div >标签。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div> 
　　2.使用Javascript创建进度条。

<div id="p" style="width:400px;"></div> 
$('#p').progressbar({ 
value: 60 
});

获取当前值和设置一个新的值到进度条控件。

var value = $('#p').progressbar('getValue');  //获取进度条的值
if (value < 100){ 
    value += Math.floor(Math.random() * 10); 
    $('#p').progressbar('setValue', value);  //设置进度条的值
}

7.Tooltip
　当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

1.通过标签创建提示框，给元素添加一个"easyui-tooltip"的类名，无需任何Javascript代码。

<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2.通过Javascript创建提示框。

<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({    
      position: 'right',   //显示的位置 
      content: '<span style="color:#fff">This is the tooltip message.</span>',   // 显示的内容 
      onShow: function(){        
          $(this).tooltip('tip').css({            
                  backgroundColor: '#666',            
                  borderColor: '#666'        
           });    
}});

8.综合案例
　我们这一节的课的主要内容讲的是实现对学校课程表的安排。主要是通过拖放组件来完成。如下图所示完成后的样式：

课程表格.png

首先我们先来实现学校所有的课程：

<div class="left">
            <table>
                <tr><td><div class="item">English</div></td></tr>
                <tr><td><div class="item">Science</div></td></tr>
                <tr><td><div class="item">Music</div></td></tr>
                <tr><td><div class="item">History</div></td></tr>
                <tr><td><div class="item">Computer</div></td></tr>
                <tr><td><div class="item">Mathematics</div></td></tr>
                <tr><td><div class="item">Arts</div></td></tr>
                <tr><td><div class="item">Ethics</div></td></tr>
            </table>
        </div>

显示时间表

<div class="right">
            <table>
                <tr>
                    <td class="blank"></td>
                    <td class="title">Monday</td>
                    <td class="title">Tuesday</td>
                    <td class="title">Wednesday</td>
                    <td class="title">Thursday</td>
                    <td class="title">Friday</td>
                </tr>
                <tr>
                    <td class="time">08:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">09:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <!-.............-->
            </table>
        </div>

拖动在左侧的学校科目

$('.left .item').draggable({
        revert:true,
        proxy:'clone'
    });

放置学校科目在时间表单元格上

$('.right td.drop').droppable({
        onDragEnter:function(){
            $(this).addClass('over');
        },
        onDragLeave:function(){
            $(this).removeClass('over');
        },
        onDrop:function(e,source){
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')){
                $(this).append(source);
            } else {
                var c = $(source).clone().addClass('assigned');
                $(this).empty().append(c);
                c.draggable({
                    revert:true
                });
            }
        }
    });

三.菜单和按钮

1.Menu
　　菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。

通过标签创建菜单，给< div >标签添加一个名为'easyui-menu'的类。每个菜单项都通过< div >标签创建。我们可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类菜单项将会生成一个菜单分割线。如下代码：

<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div icon="icon-save">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
　　当菜单创建之后是不显示的，调用 'show' 方法显示它或者调用 'hide' 方法隐藏它。

如下代码：

$('#mm').menu('show', {
left: 200,
top: 100
});
　　如下图效果：

运行结果.png

2.LinkButton
　　通常情况下，使用 < button > 元素来创建按钮，而链接按钮（LinkButton）则是使用 < a > 元素来创建的。所以实际上一个链接按钮（LinkButton）就是一个显示为按钮样式的 < a > 元素。


　　为了创建链接按钮（LinkButton），我们要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到 < a > 元素。
<a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

也可以使用Javascript创建按钮。
<a id="btn" href="javascript:void(0)">easyui</a>
$('#btn').linkbutton({
iconCls: 'icon-search'
});

可以通过jquery来绑定按钮事件。

$(function(){ 
 $('#btn').bind('click', function(){ 
 alert('easyui'); 
 }); 
}); 

　　也可以通过*disable*与*enable*来禁用或启用按钮。
$('#btn').linkbutton('disable'); //禁用按钮
$('#btn').linkbutton('enable'); //启用按钮

3.MenuButton

　菜单按钮（Menu Button）包含一个按钮（button）和一个菜单（menu）组件，当点击或移动鼠标到按钮上，将显示一个对应的菜单。

![运行结果.png](http://upload-images.jianshu.io/upload_images/6344593-cae9cb5b22f85ee5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

为了定义一个菜单按钮（Menu Button），您应该定义一个链接按钮（Link Button）和一个菜单（menu），如下代码：

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>   
<div id="mm" style="width:150px;">   
    <div data-options="iconCls:'icon-undo'">Undo</div>   
    <div data-options="iconCls:'icon-redo'">Redo</div>   
    <div class="menu-sep"></div>   
    <div>Cut</div>   
    <div>Copy</div>   
    <div>Paste</div>   
    <div class="menu-sep"></div>   
    <div data-options="iconCls:'icon-remove'">Delete</div>   
    <div>Select All</div>   
</div>

也可以使用javascript创建菜单按钮。如下代码：

<a href="javascript:void(0)" id="mb">Edit</a>   
<div id="mm" style="width:150px"> 
  <div>Cut</div>   
  <div>Copy</div>   
  <div>Paste</div>
  <!--........-->
</div>

js代码如下：

$('#mb').menubutton({    
    iconCls: 'icon-edit',    
    menu: '#mm'   
});

4.Split Button

分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。

运行结果.png

使用标签创建分割按钮。

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"   
        data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>   
<div id="mm" style="width:100px;">   
    <div data-options="iconCls:'icon-ok'">Ok</div>   
    <div data-options="iconCls:'icon-cancel'">Cancel</div>   
</div>

使用Javascript创建分割按钮。

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>   
<div id="mm" style="width:100px;">

...
</div>

$('#sb').splitbutton({    
    iconCls: 'icon-ok',    
    menu: '#mm'   
});

三.布局

1.panel
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

运行结果.png

下面就来介绍一下如何创建面板：

1. 通过标签创建面板

通过标签创建更简单。添加'easyui-panel'类到< div >标签。

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>

2. js创建面板与它右上角的工具栏

<div id="p" style="padding:10px;">    
    <p>panel content.</p>    
    <p>panel content.</p>    
</div>    

$('#p').panel({    
  width:500,    
  height:150,    
  title: 'My Panel',    
  tools: [{    
    iconCls:'icon-add',    
    handler:function(){alert('new')}    
  },{    
    iconCls:'icon-save',    
    handler:function(){alert('save')}    
  }]    
});

可以通过调用'move'方法移动面板到新的位置。

$('#p').panel('move',{    
  left:100,    
  top:100    
});

2.tabs

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

运行结果.png

我们可以通过以下方法来创建tabs
　　1. 通过标签创建选项卡
　　通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<　div　>标签添加一个类'easyui-tabs'。每个选项卡面板都通过子< div >标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
 <div title="Tab1" style="padding:20px;"> 
 tab1 
 </div> 
 <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">

tab2

 </div> 
 <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;"> 
 tab3 
 </div> 
</div>

2. 通过Javascript创建选项卡
　　下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({ 
 border:false, 
 onSelect:function(title){ 
 alert(title+' is selected'); 
 } 
});

添加新的选项卡面板
　　以下代码是添加一个新的选项卡，并添加一个菜单图标。

$('#tt').tabs('add',{ 
 title:'New Tab', 
 content:'Tab Body', 
 closable:true, 
 tools:[{ 
 iconCls:'icon-mini-refresh', 
 handler:function(){ 
 alert('refresh'); 
 } 
 }] 
});

获取选择的选项卡
　　我们可以通过以下方法获取选项卡，如下代码：

// get the selected tab panel and its tab object 
var pp = $('#tt').tabs('getSelected'); 
var tab = pp.panel('options').tab; // the corresponding tab object

关于选项卡的属性与方法还有很多,有兴趣的同学请看官网这里。

3.Accordion
　　折叠面板（Accordion）包含一系列的面板（panel）。 所有面板（panel）的头部（header）都是可见的，但是一次仅仅显示一个面板（panel）的 body 内容。 当用户点击面板（panel）的头部（header）时，该面板（panel）的 body 内容将可见，同时其他面板（panel）的 body 内容将隐藏不可见。

运行结果.png

　　通过标签创建折叠面板，给< div >标签添加一个名为'easyui-accordion'的类。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> 
 <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> 
 <h3 style="color:#0099FF;">Accordion for jQuery</h3> 
 <p>Accordion is a part of easyui framework for jQuery. 
 It lets you define your accordion component on web page more easily.</p> 
 </div> 
 <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> 
 content2 
 </div> 
 <div title="Title3"> 
 content3 
 </div> 
</div>

我们可以调用'getSelected'方法获取当前面板，此外我们还可以调用'refresh'方法重新载入新内容。

var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
if (pp){ 
 pp.panel('refresh','new_content.php'); // 调用'refresh'方法刷新 
}

关于折叠面板的属性与方法还有很多,有兴趣的同学请看这里。

3.边框布局

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

north 区域可以用来显示网站的标语。
south 区域可以用来显示版权以及一些说明。
west 区域可以用来显示导航菜单。
east 区域可以用来显示一些推广的项目。
center 区域可以用来显示主要的内容。

运行结果.png

1. 通过标签创建布局
　　为< div >标签增加名为'easyui-layout'的类。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 
 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 
 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 
 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> 
 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 
</div>

2. 使用完整页面创建布局

<body class="easyui-layout"> 
 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 
 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 
 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> 
</body>

3. 创建嵌套布局
　　嵌套在内部的布局面板的左侧面板是折叠的。

<body class="easyui-layout"> 
 <div data-options="region:'north'" style="height:100px"></div> 
 <div data-options="region:'center'"> 
 <div class="easyui-layout" data-options="fit:true"> 
 <div data-options="region:'west',collapsed:true" style="width:180px"></div> 
 <div data-options="region:'center'"></div> 
 </div> 
 </div> 
</body>

我们可以用以下方法折叠布局面板

$('#cc').layout(); 
// collapse the west panel 
$('#cc').layout('collapse','west');

如下js代码添加西侧区域面板和工具菜单按钮。

$('#cc').layout('add',{ 
 region: 'west', 
 width: 180, 
 title: 'West Title', 
 split: true, 
 tools: [{ 
 iconCls:'icon-add', 
 handler:function(){alert('add')} 
 },{ 
 iconCls:'icon-remove', 
 handler:function(){alert('remove')} 
 }] 
});

关于布局面板的属性与方法还有很多，我们就不多做介绍了，有兴趣的同学请看这里。

四.表单

1.ValidateBox

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。

运行结果.png

通过标签创建验证框。　为< input >标签增加名为'easyui-validatebox'的类。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />

使用Javascript创建验证框。

<input id="vv" /> 
<script>
$('#vv').validatebox({ 
 required: true, 
 validType: 'email' 
}); 
</script>

验证规则
　　验证规则是根据使用需求和验证类型属性来定义的，这些规则已经实现：
email：匹配E-Mail的正则表达式规则。
url：匹配URL的正则表达式规则。
length[0,100]：允许在x到x之间个字符。
remote['http:／／.../action.do','paramName']：发送ajax请求需要验证的值，当成功时返回true。

自定义验证规则，需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。例如，定义一个最小长度(minLength)的自定义验证：

$.extend($.fn.validatebox.defaults.rules, { 
 minLength: { 
 validator: function(value, param){ 
 return value.length >= param[0]; 
 }, 
 message: 'Please enter at least {0} characters.' 
 } 
});

现在就可以在输入框中限制最小长度为5的自定义最小长度验证了：
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

关于validatebox的属性与方法还有很多，有兴趣的同学请看这里。

2.ComboBox

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

运行结果.png

下面我们就来介绍一下如何创建下拉列表框：
　　1.通过< select >元素创建一个预定义结构的下拉列表框。我们要给该元素添加一个“easyui-combobox”的类。**

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> 
 <option value="aa">aitem1</option> 
 <option>bitem2</option> 
 <option>bitem3</option> 
 <option>ditem4</option> 
 <option>eitem5</option> 
</select>

2.通过< input >标签创建下拉列表框。我们要给该元素添加一个“easyui-combobox”的类。**
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'" />

3.通过javascript创建下拉列表框。

<input id="cc" name="dept" value="aa"> 
$('#cc').combobox({ 
 url:'combobox_data.json', 
 valueField:'id', 
 textField:'text' 
});

我们可以通过setValue设置组件的值，可以通过setText设置输入的文本，可以通过getValue与getText获取组件的值与输入的文本。
$('#cc').combobox('setValue',12); //设置值
$('#cc').combobox('getText',''); // 获取输入文本

关于combobox的属性与方法还有很多,有兴趣的同学请看这里。

3.Combo

自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。

运行结果.png

自定义下拉框使用Javascript创建一个< select >或< input >元素。

<input id="cc" value="001">
$('#cc').combo({    
    required:true,    
    multiple:true   
});

我们可以通过setValue设置组件的值，可以通过setText设置输入的文本，可以通过getValue与getText获取组件的值与输入的文本。

$('#cc').combo('setValue',12);  //设置值
$('#cc').combo('getText','');   // 获取输入文本

3.ComboTree

树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作。

运行结果.png

有两种方法可以创建下拉树控件。
　　1.使用标签创建树形下拉框。要为该元素添加easyui-combotree的类。

<select id="cc" class="easyui-combotree" style="width:200px;" 
 data-options="url:'get_data.php',required:true"></select>

2.使用Javascript创建树形下拉框。

<input id="cc" value="01"> 
$('#cc').combotree({ 
 url: 'get_data.php', 
 required: true 
});

这其中的url为远程数据的链接。
我们可以通过loadData方法来初始化树形下拉框:

$('#cc').combotree('loadData', [{
 id: 1,
 text: 'Languages',
 children: [{
 id: 11,
 text: 'Java'
 },{
 id: 12,
 text: 'C++'
 }]
}]);

关于comboTree的属性与方法还有很多，有兴趣的同学请看这里。

4.DateBox

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

运行结果.png

有两种方式可以创建日期输入框：

1.使用标签创建日期输入框。我们要为input标签添加一个“easyui-datebox”的类。

<input id="dd" type="text" class="easyui-datebox" required="required"></input>

2.使用Javascript创建日期输入框。

<input id="dd" type="text"></input> 
$('#dd').datebox({    
    required:true   
});

我们可以通过"setValue"方法来设置datebox的值，通过“getValue”获取datebox的值。

$('#dd').datebox('setValue','01/01/2016'); 
$('#dd').datebox('getValue','');

5.DateTimeBox

和日期输入框类似，日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框，它在下拉面板中添加了一个时间微调器。

运行结果.png

datetimebox的创建方法与datebox类似，也有两种方法，

1.使用标签创建日期时间输入框。我们要为input标签添加一个“easyui-datetimebox”的类。

<input class="easyui-datetimebox" name="birthday"     
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

2.使用Javascript创建日期时间输入框。

<input id="dt" type="text" name="birthday"></input> 
$('#dt').datetimebox({    
    value: '3/4/2010 2:3',    
    required: true,    
    showSeconds: false   
});

我们可以通过"setValue"方法来设置datetimebox的值，通过“getValue”获取datetimebox的值。

$('#dt').datetimebox('setValue','01/01/2016 12:00:00'); 
$('#dt').datetimebox('getValue','');

6.Calendar

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置。

运行结果.png

　使用标签创建日历。我们需要将< div >标签的类的值设置为easyui-calendar。

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

使用Javascript创建日历。

<div id="cc" style="width:180px;height:180px;"></div>  
$('#cc').calendar({
    current:new Date()
});

7.TimeSpinner

时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间。

通过input标签来创建，需要我们将它的class属性值设置为easyui-timespinner。

<input id="ss" class="easyui-timespinner"  style="width:80px;"   
        required="required" data-options="min:'08:30',showSeconds:true" />

还可以通过Javascript创建时间微调组件。

<input id="ss" style="width:80px;">  
$('#ss').timespinner({    
    min: '08:30',    
    required: true,    
    showSeconds: true   
});

设置时间微调组件的值。 代码如下：

$('#ss').timespinner('setValue', '17:45');  // 设置时间微调组件的值
var v=$('#ss').timespinner('getValue');  // 获取时间微调组件的值
alert(v);

8.Slider

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

运行结果.png

我们使用< input >标签来创建滑动条，设置它的class属性为easyui-slider。

<input class="easyui-slider" value="12" style="width:300px"
data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />
　　也允许使用< div >创建滑动条，但是'value'属性是无效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

还可以使用javascript来创建。

<div id="ss" style="height:200px"></div>  
$('#ss').slider({    
    mode: 'v',    
    tipFormatter: function(value){    
        return value + '%';    
    }    
});

我们可以通过"setValue"方法来设置slider的值，通过“getValue”获取slider的值。

$('#ss').slider('setValue',25); 
$('#ss').slider('getValue','');

还有一个常用的onchange事件，在值发生变化时触发。

$('#ss').slider({    
    mode: 'v',     // 设置水平h 还是垂直v
    tipFormatter: function(value){    //格式化滑动条
        return value + '%';    
    },
    onChange: function(value){
        alert(value);
    }
});

另外还可以通过max与min属性设置滑动条的最大与最小值。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,702评论 22赞 664
  • jQueryEasyUI实现房贷计算器详细教程3--EasyUI部分
    1.从载入EasyUI开始 读者需要到EasyUI官网中下载包含原文件和demo的压缩包，并解压到之前编写的代码目...
    老皮丘阅读 1,693评论 0赞 6
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 4,928评论 0赞 66
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • 爸爸
    我的爸爸是一名特警，每天的工作特别多。尽管这样，他还是抽空就伴我。 当我爸爸一回家我就看见爸爸已经快苍白的头发，我...
    篮球手阅读 238评论 0赞 0