一款很是推荐的用户界面插件----EasyUI（转载）

 

 

  前  言

　    easyui是一种基于jQuery的用户界面插件集合。

       easyui为建立现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不须要写不少代码，你只须要经过编写一些简单HTML标记，就能够定义用户界面。

easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。

 

1、声明组件的方法

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上创建程序页面。 有两个方法声明的 UI 组件:

1. 直接在 HTML 声明组件;

<div class="easyui-dialog" style="width:450px;height:220px" data-options="title:'My Dialog'"> 我建立的对话框 </div>

2. 编写 JavaScript 代码来建立组件。

<input id="a" style="width:230px" />

$('#a').combobox({
        url: ...,
        required: true, valueField: 'id', textField: 'text' });

 

2、组件的使用

 

1EasyUI窗口

1)建立简单窗口

建立一个窗口（window）很是简单，咱们建立一个 DIV 标记：

<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> 内容区 </div>

运行结果以下：

一行简单的代码就能够快速地搭建一个窗口，而且还不用写javascript，是否是很是好用。。

 

若是您但愿建立一个隐藏的窗口（window），记得设置 'closed' 属性为 'true' 值，您能够调用 'open' 方法来打开窗口（window）：

<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300px;height:100px;padding:5px;"> 内容区 </div>

$('#win').window('open');

下面咱们来建立一个简单的登陆窗口：

<div id="win" class="easyui-window" title="Login" style="width:300px;height:180px;"> <form style="padding:10px 20px 10px 40px;"> <p>Name: <input type="text"></p> <p>Pass: <input type="password"></p> <div style="padding:5px;text-align:center;"> <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a> <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a> </div> </form> </div>

效果如图所示：

2)自定义窗口工具栏

默认状况下，窗口（window）有四个工具：collapsible、minimizable、maximizable 和 closable。好比咱们定义如下窗口（window）：

<div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;"> window content </div>

如需自定义工具，设置该工具为 true 或者 false。好比咱们但愿定义一个窗口（window），仅仅拥有一个可关闭的工具。您应该设置任何其余工具为 false。咱们能够在标记中或者经过 jQuery 代码定义 tools 属性。如今咱们使用 jQuery 代码来定义窗口（window）：

$('#win').window({
        collapsible:false, minimizable:false, maximizable:false });

 

若是咱们但愿添加自定义的工具到窗口（window），咱们可使用 tools 属性。做为实例演示，咱们添加两个工具到窗口（window）：

$('#win').window({
        collapsible:false, minimizable:false, maximizable:false, tools:[{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-remove', handler:function(){ alert('remove'); } }] });

 

 

3)建立对话框

对话框（Dialog）是一个特殊的窗口（window），能够包含在顶部的工具栏和在底部的按钮。默认状况下，对话框（Dialog）不能改变大小，可是用户能够设置 resizable 属性为 true，使其能够改变大小。

对话框（Dialog）很是简单，能够从 DIV 标记建立，以下所示：

<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" title="My Dialog" iconCls="icon-ok" toolbar="#dlg-toolbar" buttons="#dlg-buttons"> Dialog Content. </div>

准备工具栏（Toolbar）和按钮（Button）

<div id="dlg-toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a> </div>

 

2EasyUI布局

1)为网页建立边框布局

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

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

为了应用布局（layout），您应该肯定一个布局（layout）容器，而后定义一些区域。布局（layout）必须至少须要一个 center 区域，如下是一个布局（layout）实例：

<div class="easyui-layout" style="width:400px;height:200px;"> <div region="west" split="true" title="Navigator" style="width:150px;"> <p style="padding:5px;margin:0;">Select language:</p> <ul> <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li> <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li> <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li> <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li> </ul> </div> <div id="content" region="center" title="Language" style="padding:5px;"> </div> </div>

咱们在一个<div> 容器中建立了一个边框布局（border layout），布局（layout）把容器切割为两个部分，左边是导航菜单，右边是主要内容。

最后咱们写一个 onclick 事件处理函数来检索数据，'showcontent' 函数很是简单：

function showcontent(language){ $('#content').html('Introduction to ' + language + ' language'); }

 

2)在面板中建立复杂布局

面板（Panel）容许您建立用于多种用途的自定义布局。在本实例中，咱们使用面板（panel）和布局（layout）插件来建立一个 msn 消息框。

 

咱们在区域面板中使用多个布局（layout）。在消息框的顶部咱们放置一个查询输入框。在中间的区域咱们经过设置 split 属性为 true，把这部分切割为两部分，容许用户改变区域面板的尺寸大小。

如下就是全部代码：

<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"> <div class="easyui-layout" fit="true"> <div region="north" border="false" class="p-search"> <label>Search:</label><input></input> </div> <div region="center" border="false"> <div class="easyui-layout" fit="true"> <div region="east" border="false" class="p-right"> <img src="img/zxx.jpg"/> </div> <div region="center" border="false" style="border:1px solid #ccc;"> <div class="easyui-layout" fit="true"> <div region="south" split="true" border="false" style="height:60px;"> <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea> </div> <div region="center" border="false"> </div> </div> </div> </div> </div> </div> </div>

 3)动态添加标签页

经过使用 jQuery EasyUI 能够很容易地添加 Tabs。您只须要调用 'add' 方法便可。

咱们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮，一个新的 tab 将被添加。若是 tab 已经存在，它将被激活。

 

步骤 1：建立 Tabs

<div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a> <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a> </div> <div id="tt" class="easyui-tabs" style="width:400px;height:250px;"> <div title="Home"> </div> </div>

步骤 2：实现 'addTab' 函数

function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } }

EasyUI还有不少不少好用的组件，包括强大的DataGrid，树网格，面板。用户可使用他们一块儿，或者只是用一些组件，组合和构建他想要的跨浏览器的网页应用。

 

有不少教程和演示应用帮助你了解这个框架。本文所有内容引自EasyUI教程。全部组件内容解释的都很是详细易懂。

连接地址为http://www.jeasyui.net/tutorial/

但愿你能从中获得帮助。