jquery easy ui 1.3.4 快速入门（1）

什么是easyui

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

jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。

目录说明

一、快速入门

1.1搭建easyui环境

我们需要引入3个基本的文件

<link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.4/jquery.min.js"></script>
    <script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

1.2Hello World

我们在写easyui 的js代码的时候也需要在dom树生成后,也就

是说我们需要写$(function(){})这个方法

l   easyui版Hello World

$(function () {

$.messager.alert("hello word", "欢迎光临");//hello word 为标题，欢迎光临为内容

});

1.3如何写easyui - html方式

通过配置元素的属性的方式来写easyui的ui插件,如下面的代码，我们配置

一个panel(面板) ，首先必须配置calss为"easyui-panel",如果需要加一个

标题我们则需要些title属性即可，想给这个面板添加一个图标，我们只需

要配置 iconCls属性即可，easyui本身就提供了一套icon的css,我们在页

面里面引入"themes/icon.css"即可使用easyui给我们定义的css

<div style="width:300px;height:500px" class="easyui-panel"

title="第一个面板" iconCls="icon-save" collapsible="true">

</div>

1.4 data-options属性

我们在写 "iconCls"这种属性的时候编辑器会提示错误，easyui提供data-options属性给我来写组件的配置如下面代码

<div style="width: 300px; height: 500px" class="easyui-panel"

title="第一个面板" data-options="iconCls:'icon-save',collapsible:true">

</div>

1.5如何写easyui - js方式

使用配置的方式创建以easyui的panel组件。代码如下

$("#myDiv").panel({

title: "js方式的panel",

width: 300,

height: 500,

collapsible: true

});