没有合适的资源？快使用搜索试试~ 我知道了~

文库首页开发技术Web开发Jquery+EasyUI学习教程

Jquery+EasyUI学习教程

easyui

jquery

2星需积分: 2 13 下载量 192 浏览量 2013-08-01 18:23:17 上传评论收藏 1.75MB DOC 举报

温馨提示

试读

64页

jQuery EasyUI 框架帮助你轻松建立站点。 easyui是一个基于jquery的集成了各种用户界面的插件。使用easyui你不需要写太多javascript代码，一般情况下你只需要使用一些html标记来定义用户接口。 easyui非常简单，但是功能非常强大。

资源推荐

资源详情

资源评论

教程

概述

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

件：

href="../themes/default/easyui.css">

1.4.2.min.js"></script>

src="../jquery.easyui.min.js"></script>

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

包含：

href="../themes/icon.css">

内容

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 = $('<div class="proxy">proxy</div>');

p.appendTo('body');

return p;

}

});

构建购物车型拖放

使用 jQuery easyui，我们在 web 应用中就有了拖放的能力。这个教程显示了如何构建购物车页，

它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：

<li>

<div>

<p>Balloon</p>

<p>Price:$25</p>

</div>

</a>

</li>

<li>

<div>

<p>Feeling</p>

<p>Price:$25</p>

</div>

</a>

</li>

</ul>

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

创建购物车：

<h1>Shopping Cart</h1>

<table id="cartcontent"

style="width:300px;height:auto;">

<thead>

<tr>

<th field="quantity" width=60

align="right">Quantity</th>

<th field="price" width=60

align="right">Price</th>

</tr>

</thead>

</table>

<p class="total">Total: $0</p>

</div>

使用 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)').html();

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

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<data.total; i++){

var row = data.rows[i];

if (row.name == 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').html('Total: $'+totalCost);

}

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

创建课程表

本教程显示了如何使用 jQuery easyui 创建课程表。我们创建两个表：在左面的课程列表和右面的

时间表。你可以拖课程到时间表的单元格中。课程是<div class='item'>元素，时间格是<td

class='drop'>元素。

显示课程

剩余63页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

Leslie

2013-08-26

不好用,对初学者又看不懂,对熟悉的人又作用不大

大智若愚_

粉丝: 1
资源: 10

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

Jquery+EasyUI学习教程

Jquery_EasyUI教程

Jquery学习教程

Jquery EasyUI学习资料集合

jQuery进阶学习资料-EasyUI教程.doc

jquery+easyui培训文档 （20111111整理完善）

Jquery.easyUI js引用以及文档教程

jQuery_EasyUI_jc.rar_JQ_easyui_jquery_jquery easyui

easyui视频教程(16)

JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

Jquery教程学习笔记

Jquery学习 初学Jquery教程

jQuery EasyUI学习教程之datagrid点击列表头排序

jquery、easyui学习汇总

JQuery EasyUI v1.3.5.exe

李炎恢jQuery EasyUI视频教程

jQueryEasyUI教程详细

jQuery EasyUi实战教程之布局篇

easyui讲义

轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

easyUI完整视屏教程

jQuery Easyui快速入门教程

SYPRO示例项目源码和EasyUI入门视频教程

微信小程序源码-合集6.rar

微信小程序源码-合集5.rar

微信小程序源码-合集4.rar

微信小程序源码-合集3.rar

最新资源

jquery+easyui培训文档（20111111整理完善）

Jquery学习初学Jquery教程