什么是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="300px;height:500px" class="easyui-panel"
title="第一个面板" iconCls="icon-save" collapsible="true">
</div>
1.4 data-options属性
我们在写 "iconCls"这种属性的时候编辑器会提示错误,easyui提供data-options属性给我来写组件的配置如下面代码
<div style=" 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",
300,
height: 500,
collapsible: true
});