一款非常推荐的用户界面插件----EasyUI - 姐姐jy_H5之家

前言

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

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

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

一、声明组件的方法

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

1. 直接在 HTML 声明组件;

我创建的对话框

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

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

二、组件的使用

1EasyUI窗口

1)创建简单窗口

创建一个窗口（window）非常简单，我们创建一个 DIV 标记：

内容区

运行结果如下：

一行简单的代码就可以快速地搭建一个窗口，并且还不用写javascript，是不是非常好用。。

如果您希望创建一个隐藏的窗口（window），记得设置 'closed' 属性为 'true' 值，您可以调用 'open' 方法来打开窗口（window）：

内容区

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

下面我们来创建一个简单的登录窗口：

Name: Pass: OkCancel

效果如图所示：

2)自定义窗口工具栏

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

window content

如需自定义工具，设置该工具为 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 标记创建，如下所示：

title toolbar Dialog Content.

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

AddSaveOkCancel

2EasyUI布局

1)为网页创建边框布局

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

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

Select language:JavaC#VBErlang

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

最后我们写一个 onclick 事件处理函数来检索数据，'showcontent' 函数非常简单：

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

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

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

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

以下就是所有代码：

Search:Hi,I am easyui.

3)动态添加标签页

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

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

步骤 1：创建 Tabs

googlejqueryeasyui

步骤 2：实现 'addTab' 函数