一、概述

     jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

     jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点:

(1)基于jquery用户界面插件的集合。

(2)为一些当前用于交互的js应用提供必要的功能。

(3)EasyUI支持两种渲染方式分别为javascript方式，$('#p').panel({...})和html标记方式，class="easyui-panel"。

(4)支持HTML5(通过data-options属性)。

 

二、加载UI组件的方式

     有两种加载方式: 使用class方式加载、使用JS调用加载。

1.使用class方式加载

     格式:easyui-组件名

                
     
                    这里是内容          
     
    

效果:

     

 

2.使用JS调用加载

JS代码

$(function(){				$("#myDialog").dialog({			title:'JS调用',			width:400,			height:200		});	});

HTML代码

                
     
                    现在使用JS调用          
     
    

结果:

    

 

三、DRAGGABLE(拖动)组件

1.属性列表

 

$("#myDiv").draggable({			revert:'true',		});

 

2.事件

 

$("#myDiv").draggable({						//在拖动之前触发，返回false将取消拖动。			onBeforeDrag:function(e){				alert("拖动前...");				return false;			},						//在开始拖动时触发			onBeforeDrag:function(e){				alert("拖动时...");			},						//在拖动过程中触发			onDrag:function(e){				alert("拖动ing...");			},						//在拖动时停止触发			onStopDrag:function(e){				alert("拖动停止了...");			},				});

 

3.方法

//禁止拖动		$("#myDiv").draggable("disable");				//允许拖放		$("#myDiv").draggable("enable");

 

四、Droppable(放置)组件

     所谓放置，就将一个物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。

1.属性

    以上属性表面上看上去是没有变化的，但是如果disabled为true，不会触发任何效果。

 

2.事件

 

HTML代码

     
           One
     
          
     
           Two
     

JS代码

$("#divTwo").draggable();				$("#divOne").droppable({						accept:"#divTwo",			disabled:true,						//被拖拽元素到放置区内的时候触发			onDragOver : function (e, source) {				$(this).css("background", "blue");			},						//在被拖拽元素经过放置区的时候触发			onDragEnter : function (e, source) {				$(this).css("background", "orange");			},						//在被拖拽元素离开放置区的时候触发			onDragLeave : function (e, source) {				$(this).css("background'", "green");			},						//在被拖拽元素放入到放置区的时候触发			onDrop : function (e, source) {				$(this).css("background", "maroon");			},					});

结果:

    

 

3.方法

 

五、Resizeable(调整大小)组件

     调整大小就是可以对元素可以拖着调整大小，这个组件不依赖于其他组件。

1.属性

 

2.事件

$('#rr').resizable({					onStartResize : function (e) {				console.log("开始改变大小时！");			},						onResize : function (e) {				console.log("调整大小时期触发！");				//return false;			},						onStopResize : function (e) {				console.log("停止调整大小时触发！");			},		});	});

 

3.方法