jquery easyui中文API教程1.24

概述

这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：

easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：

内容

1.拖放

o基本拖放

o创建购物车式拖放

o创建课程表

基本拖放

这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：

让第一个DIV元素可拖放，使用默认的拖放样式。

$('#dd1').draggable();

让第二个DIV元素使用proxy来拖放，proxy:'clone'表示proxy使用原始元素的复制。

$('#dd2').draggable({

proxy:'clone'

});

让第三个DIV元素使用自定义proxy来拖放

$('#dd3').draggable({

proxy:function(source){

var p = $('proxy');

p.appendTo('body');

return p;

}

});

构建购物车型拖放

使用jQuery easyui，我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：

Balloon

Price:$25

Feeling

Price:$25

ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。创建购物车：

Shopping Cart

Name

Quantity

Price

Total: $0

Drop here to add to cart

使用datagrid显示购物篮项目。

拖曳产品副本

$('.item').draggable({

revert:true,

proxy:'clone',

onStartDrag:function(){

$(this).draggable('options').cursor = 'not-allowed';

$(this).draggable('proxy').css('z-index',10);

},

onStopDrag:function(){

$(this).draggable('options').cursor='move';

}

});

我们设置draggable属性proxy为clone，所以拖曳元素使用clone效果。将选择的产品放入购物车

$('.cart').droppable({

onDragEnter:function(e,source){

$(source).draggable('options').cursor='auto';

},

onDragLeave:function(e,source){

$(source).draggable('options').cursor='not-allowed';

},

onDrop:function(e,source){

var name = $(source).find('p:eq(0)')();

var price = $(source).find('p:eq(1)')();

addProduct(name, parseFloat(price.split('$')[1]));

}

});

var data = {"total":0,"rows":[]};

var totalCost = 0;

function addProduct(name,price){

function add(){

for(var i=0; i

var row = data.rows[i];

if (9e96683c650e52ea551898fc == name){

row.quantity += 1;

return;

}

}

data.total += 1;

data.rows.push({

name:name,

quantity:1,

price:price

});

}

add();

totalCost += price;

$('#cartcontent').datagrid('loadData', data);

$('div.cart .total')('Total: $'+totalCost);

}

当放下产品时，我们得到产品的名称和单价，然后调用addProduct函数更新购物篮。

创建课程表

本教程显示了如何使用jQuery easyui创建课程表。我们创建两个表：在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是元素，时间格是元素。

显示课程

English

Science

显示时间表

Monday

Tuesday

Wednesday

Thursday

Friday

08:00

拖动左面的课程

$('.left .item').draggable({

revert:true,

proxy:'clone'

});

放置课程到时间表中

$('.right td.drop').droppable({

onDragEnter:function(){

$(this).addClass('over');

},

onDragLeave:function(){

$(this).removeClass('over');

},

onDrop:function(e,source){

$(this).removeClass('over');

if ($(source).hasClass('assigned')){

$(this).append(source);

} else {

var c = $(source).clone().addClass('assigned'); $(this).empty().append(c);

c.draggable({

revert:true

});

}

}

});

当用户拖动左面的课程到右面的时间表中，onDrop函数被调用。源元素的副本被从左面拖动并且附加到到时间表的单元格中。当放置课程到时间表的单元格到另一个单元格时，简单的移动它。

2.菜单和按钮Menu and Button

o建立简单菜单

o建立链接按钮

o建立菜单按钮

o建立分割按钮

创建简单菜单

在DIV标记中定义菜单。像这样：

New

Open

Word

Excel

PowerPoint

Save

Exit

建立菜单，你需要运行下列jQuery代码

$('#mm').menu();

//或者 $('#mm').menu(options);

当菜单被创建时是不可见的，可使用show方法显示或者hide方法隐藏：

$('#mm').menu('show', {

left: 200,

top: 100

});

现在，我们创建菜单并在（200,100）处显示。运行代码会得到：

创建连接按钮

通常使用元素创建按钮。链接按钮使用A元素创建，事实上，链接按钮是A元素但显示为按钮样式。

创建链接按钮，首先创建A元素：

DEMO1

Cancel

Refresh

Query

text button

Print

DEMO2

Can cel

Ref resh

Que ry

text button

Prin t

  ;

icon属性是icon CSS类是在按钮上显示的图标。运行代码，出现：

一些时候，你可以决定禁用或者不禁用连接按钮，使用下面的代码可以禁用连接图标：

$(selector).linkbutton({disabled:true});

建立菜单按钮

菜单按钮包含按钮和菜单两部分，当点击或者移动鼠标到按钮上的时候，显示相应的菜单。定义菜单按钮，需要定义链接按钮和菜单，像这样：

Edit

Help

Undo

Redo

Cut

Copy

Paste

Delete

Select All

Help

Update

About

使用下列jQuery代码：

$('#mb1').menubutton({menu:'#mm1'});

$('#mb2').menubutton({menu:'#mm2'});

现在，菜单按钮就完成了。

建立拆分按钮

拆分按钮包括链接按钮和菜单。当用户点击或者悬停在下箭头区域时显示相关菜单。这个例子是建立拆分按钮的演示：

首先，创建一个链接按钮和菜单标记：

#ccc;background:#ddd;padding:5px;width:120px;">

Edit

Undo

Redo

Cut

Copy

Paste

Open

Firefox

Internet Explorer

Select Program...

Delete

Select All

jQuery 代码：

$('#sb').splitbutton({menu:'#mm'});

运行后会出现：

3.版面

o创建边框版面

o面板上的复合版面

o建立可折叠版面

o建立TABS

o动态添加TABS

o建立XP样式左面板

创建边框版面网页

边框版面提供5个区域：东西南北中（其实就是上下左右中），下面是通常用法：?北区可以用于网站banner

?南区可以用于版权信息和注释

?西区可以用于导航菜单

?东区可以用于推广项目

?中区可以用于主内容

运用版面，需要确认版面容器然后定义一些区域。版面至少要有一个中间区域。下列是版面例子：

Select language:

Java

C#

VB

Erla ng

我们使用DIV容器创建边框版面。版面拆分容器为2部分，左面是导航菜单右面是主内容。中间区域的面板，我们设置href属性以调用出示网页。

运行layout的结果是：

写下onclick事件控制函数以获取数据，showpage函数非常简单：

function showpage(url){

$('#content').load(url);

}

面板上的复合版面

面板允许你建立为多用户定制版面。这个例子我们建立MSN信息框，通过面板版面插件：

我们使用多种版面在面板区域中。最上面的信息框我们放置搜索input，也可以放置头像在右面。中间区域我们差分成两部分通过split属性为TRUE，允许用户改变面板上区域的大小：

代码：

Layout"icon="icon-search"collapsible="true"style="padding:5px;width:5 00px;height:250px;">

Search:

Hi,I am easyui.

我们不需要编写任何js代码，但是拥有强大的用户接口设计的能力。

建立可折叠版面

这个教程中，我们学习关于easyui可折叠性。可折叠包括一系列面板。所有面板头是全部可见的，但是在一个时期内只有一个面板的body内容是可见的。当用户点击面板头，body内容变为可见其他面板body内容变得不可见。

Accordion"icon="icon-ok"style="overflow:auto;padding:10px;">

Accordion for jQuery

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

easyui"icon="icon-reload"selected="true"style="padding:10px;">

easyui help you build your web page easily

Folder1

Sub Folder 1

File 11

File 12

File 13

File 2

File 3

File2

我们建立3个面板，第三个面板内容是一个树状菜单。

建立TABS

这个教程显示你如何使用easyui建立tabs组件。tabs有多个面板，这些面板能被动态的添加或者删除。你可以使用tabs来显示不同的实体。在一个时间内只显示一个面板。每一个面板拥有title，icon和close按钮。当tabs被选择时，相关面板的内容被现实。

tabs从HTML标记创建，包含DIV容器和一些DIV面板。

First Tab

Second Tab

Tab"icon="icon-reload"closable="true"style="padding:10px;">

Third Tab

我们创建3个面板的tabs组件，第二个和第三个面板可以通过点击close按钮关闭。

动态添加tabs

你只需调用add方法，就可以使用jquery easyui很容易动态添加tabs。在这个教程中，我们动态的添加显示一个页面使用iframe。当点击添加add按钮，新tab被添加。如果tab已经存在，被激活。

第一步：建立tabs

google

jquery

easyui

HTML代码很简单，我们创建tabs用一个tab面板，名字为home。记住，我们不需要写任何js代码。

第二步：使addTab函数生效

function addTab(title, url){

if($('#tt').tabs('exists', title)){

$('#tt').tabs('select', title);

}else{

var content = '';

$('#tt').tabs('add',{

title:title,

content:content,

closable:true

});

}

}

我们使用exists方法判断tab是否存在。如果存在，则激活tab。调用add方法添加新tab面板。

创建XP式样左面板

通常，浏览文件夹在windowsXP中有左面板，包括常用任务内容。这个教程显示你如何使用easyui面板插件建立XP左面板。

定义几个面板

我们几个面板显示一些任务，每个面板仅可以折叠和展开工具按钮。代码像这样：

Tasks"collapsible="true"style="width:200px;height:auto;padding:10px;" >

View as a slide show


Order prints online


Print pictures




Tasks"collapsible="true"style="width:200px;height:auto;padding:10px;" >

Make a new folder


Publish this folder to the Web


Share this folder




Places"collapsible="true"collapsed="true"style="width:200px;height:au to;padding:10px;">

New York


My Pictures


My Computer


My Network Places




My documents


File folder



Date modified: Oct.3rd 2010

视图效果是不是我们想要的，我们必须改变面板header背景图片和收缩按钮icon。

定制面板外观效果

做到这一点并不难，我们需要做的是重新定义一些CSS。

.panel-header{

background:#fff url('panel_header_bg.gif') no-repeattopright; }

.panel-body{

background:#f0f0f0;

}

.panel-tool-collapse{

background:url('arrow_up.gif') no-repeat0px -3px;

}

.panel-tool-expand{

background:url('arrow_down.gif') no-repeat0px -3px;

}

当使用easyui定义用户接口时是很简单的。

4.DataGrid 数据格

o转换HTML表格到DataGrid

o给DataGrid添加分页

o从DataGrid中获得选定行的数据

o添加工具栏到DataGrid

o DataGrid冻结列

o动态改变DataGrid列

o格式化DataGrid列

o添加DataGrid的分类

o在DataGrid中建立列组

o在DataGrid中选择复选框

o定制DataGrid页面

o使DataGrid能行嫩编辑

o合并DataGrid单元格

转换HTML表格到DataGrid

这个例子显示如何转换表格到DataGrid。DataGrid在thead标记中定义列，在tbody标记中定义数据。确定给每一个数据列设置字段名，看这个例子：

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Data 1

Data 2

Data 3

Data 4

Data 5

Data 6

Data 1

Data 2

Data 3

Data 4

Data 5

Data 6

Data 1

Data 2

Data 3

本文来源：https://www.bwwdw.com/article/fs7q.html