WEB前端之JQUERY EASYUI.doc
上传人:sy****28 上传时间:2024-09-10 格式:DOC 页数:22 大小:484KB 金币:16 举报 版权申诉
预览加载中,请您耐心等待几秒...

WEB前端之JQUERY EASYUI.doc

WEB前端之JQUERYEASYUI.doc

预览

免费试读已结束,剩余 12 页请下载文档后查看

16 金币

下载此文档

如果您无法下载资料,请参考说明:

1、部分资料下载需要金币,请确保您的账户上有足够的金币

2、已购买过的文档,再次下载不重复扣费

3、资料包下载后请先用软件解压,在使用对应软件打开

web前端之JqueryeasyUI(一)---编写前言以前做web项目,像管理平台之类的网站或系统中,前台界面信息展示,一直是自己写css或者使用简单的jqueryui来实现,比方说数据的显示,数据的增删改查。且不说这些后台设计模式、开发思想上的优劣。单单就拿前台显示来说,使用jqueryeasyui就强大了很多,而且也比较人性化。下面做一个对比:====这是最近刚做完的项目(自己写的css)=======这是jqueryeasyui的前端显示==============对比而言,就前者来说,虽然看起来会比较“艳丽”,但终归不如easyui的简单得体的好。简单舒适,看起来更加赏心悦目……当然啊,除了jqueryeasyui还有jqueryminiui还有extjs,我个人是比较喜欢jqueryeasyui的,因为我对它还算比较熟悉。===web前端比起设计模式、管理模式简单的多的多。(当然,这只代表我个人的看法。)。讲师也经常说:简单里有不简单,平凡里有不平凡。能把白菜这种简单的菜做成美味的厨子才是真正的高手。所以,我想写几篇web前端的系列博文,希望可以和更多的“程序猿”共勉。web前端之JqueryeasyUI(二)---元素拖拽首先需要导入必须的jqueryeasyui的文件包,里面包含了css和js文件。如下代码:<linkrel="stylesheet"type="text/css"href="../Using/easyui.css"/><linkrel="stylesheet"type="text/css"href="../Using/icon.css"/><scripttype="text/javascript"src="../Using/jquery-1.4.4.min.js"></script><scripttype="text/javascript"src="../Using/jquery.easyui.min.js"></script>为了明了起见,我将所有会用到的文件放到了一个名为Using的文件夹里,Using下载地址:HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"\o"http://dl.dbank.com/c0cgmtc4jb"\t"_blank"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"HYPERLINK"http://dl.dbank.com/c0cgmtc4jb"http://dl.dbank.com/c0cgmtc4jb下载后如上引入即可。关于拖拽中常用的方法:draggable();enable();disable();====常用的属性:revert如果设定为true,则拖拽后元素返回原来位置。proxy拖拽时指定的代理元素,如果设定为clone,则以克隆的方式实现拖拽。如果指定一个函数则必须返回一个jquery对象。cursor指定拖拽时,鼠标的样式。=====================实例代码==========<html><head><linkrel="stylesheet"type="text/css"href="../Using/easyui.css"/><linkrel="stylesheet"type="text/css"href="../Using/icon.css"/><scripttype="text/javascript"src="../Using/jquery-1.4.4.min.js"></script><scripttype="text/javascript"src="../Using/jquery.easyui.min.js"></script><styletype="text/css">.DIV_style{width:100px;height:100px;float:right;}.proxy_div{width:100px;height:100px;background:yellow;}</style><scripttype="text/javascript">$(function(){$("#draggable_demo1").draggable({rev