jQuery EasyUI学习01：简介和base控件整理

jquery

核心：（选择器，dom操作，事件，ajax）

插件：

全局方法的插件$.extend({})

局部方法的插件$.fn.extend({})

ui:easyUI 他是基于jQuery的一个扩展

————-

jquery插件demo，体验

1.新建javaweb项目。

2.webRoot下创建js目录，导入jQuery-1.8.3.js。

3.新建一个扩展文件js，并导入。

4.局部扩展方法编写。

注：1.方法名称

注：2.传入json参数；json 的字符串就是符合一个javascript 的对象

注：3.this 一般是指代dom 对象，转换为jQUERY 对象

————-

简介：

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

但功能相对没extjs强大，但页面也是相当好看的。

一些功能也足够开发者使用，相对于extjs更轻量。

多用来做后台，基本不再需要美工。

目录结构

Demo目录：示例

Locale目录：国际化文件

Plugins目录：插件

src目录：源码

Themes目录：主题

jquery.min.js文件：jQuery文件

jquery.easyui.min.js文件：EasyUI主文件

————–

实际使用：

1.导入文件

jquery 的主文件 jquery.min.js

jquery easyui 的主文件 jquery.easyui.min.js

jQuery 的主样式文件 easyui.css

jQuery 的图标文件 icon.css

//在 jquery easyui 里面，创建组件有两种方式..

//第一种是直接通过页面的标签去创建.. 我们直接在标签上面添加一个class 的一个标签…

//第二种方式我们可以通过js +页面标签创建..

2.创建组件

base基础

拖动 —class=”easyui-draggable”

进度条

/** 页面一加载会触发此方法*/

$(function(){

$(“#loadbutton”).bind(“click”,function(){

loadprogress();

})

})

/** 设置进度条值*/

var i=1;

function loadprogress(){

$(“#progressId”).progressbar({

//设置进度条数值

value:i++

})

//递归 1s后加载一次

window.setTimeout(function(){

loadprogress();

},10)

}

菜单

1.设置菜单位置

2.设置菜单样式 class=”menu-sep”

a标签按钮

class=”easyui-linkbutton”

———————————-