EasyUi

我们可以在easyui的官网下载它，下载完成后，将文件导入项目，我么需要引入五个重要的文件

我们首先使用easyui实现一个小的对话框：

实现的效果：

Parser 解析器：Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用 它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动 解析的情况。 手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。默认解析器是打开的 如果设置为 false 此时组件不被解析，样式就会丢失！ 解析指定 ui 组件解析时，必须要设置父类容器才可以解析到。

easyui-draggable 拖动组件，具有这个属性的元素都可以被拖动。

$("#draggable").draggable({

//edge:500

//axis:"h", // 纵轴v 横轴 h

//disabled:false,//是否可以进行拖动

//deltaX:200,

revert:true, //拖动停止时返回起始位置

handle:"#zt"//当然也可以在这里面定义事件//true时 拖动执行 false 时取消拖动 onBeforeDrag:function(e){ alert("返回true时,在拖动前触发该事件.."); return true; }, //拖动时触发 onStartDrag:function(e){ alert("拖动时触发。。。"); }, //拖动停止时触发 onStopDrag:function(e){ alert("拖动停止时触发！"); }

});

easyui-resizable 可调整大小

maxWidth ， maxHeight 可用于限定大小！

easyui-linkbutton 按钮组件

$("#btn").linkbutton({

iconCls:"icon-search"

});

$("#btn").linkbutton('disable');

easyui-panel 面板组件

collapsible boolean 定义是否显示可折叠按钮。 false minimizable boolean 定义是否显示最小化按钮。 false maximizable boolean 定义是否显示最大化按钮。 false closable boolean 定义是否显示关闭按钮。

$("#p").panel({

iconCls:"icon-help",

/*width:800,

height:400,*/

/*fit:true, // 子容器自适应父容器的大小*/

border:true,

collapsible:true,

minimizable:true,

maximizable:true,

closable:true,

tools:[

{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-edit',

handler:function(){alert('edit')}

}

],

collapsed:true, // 默认面板折叠

href:"js/data.json",

loadingMessage:"正在加载中...",

extractor:function(data){

// 解析json格式的数据

data = eval("("+data+")");

console.log(data);

var html = "姓名：";

return html;

},

onExpand:function(){

alert("数据加载完毕！");

}

});

easyui-tabs 选项卡

easyui-accordion 手风琴组件

easyui-layout 布局组件

//此处在body中添加class easyui-layout 然后在创建五个div，分别对应不同的位置，可根据自己的需要删除添加div

easyui-layout，tabs，accordions联合组成的简单页面