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/"/><linkrel="stylesheet"type="text/css"href="../Using/"/><scripttype="text/javascript"src="../Using/jquery-"></script><scripttype="text/javascript"src="../Using/"></script>为了明了起见,我将所有会用到的文件放到了一个名为Using的文件夹里,Using下载地址:http://dl./c0cgmtc4jb下载后如上引入即可。关于拖拽中常用的方法:draggable();enable();disable();====常用的属性:revert 如果设定为true,则拖拽后元素返回原来位置。proxy 拖拽时指定的代理元素,如果设定为clone,则以克隆的方式实现拖拽。如果指定一个函数则必须返回一个jquery对象。cursor 指定拖拽时,鼠标的样式。 =====================实例代码==========<html><head><linkrel="stylesheet"type="text/css"href="../Using/"/><linkrel="stylesheet"type="text/css"href="../Using/"/><scripttype="text/javascript"src="../Using/jquery-"></script><scripttype="text/javascript"src="../Using/"></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({revert:true});$("#draggable_demo2").draggable({proxy:'clone'});$("#draggable_demo3").draggable();$("#draggable_demo4").draggable({proxy:function(area){vara=$('<divclass="proxy_div"></div>');('body');returna;}});});</script></head><body><divid="draggable_demo1"style="background:cyan"class="DIV_style">这个层拖拽后还会回到原处</div><divid="draggable_demo2"s
web前端之JqueryeasyUI 来自淘豆网m.daumloan.com转载请标明出处.
