资源描述:
《从零开始学习jQuery》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、从零开始学习jQuery 一.摘要本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇.使用jQueryUI完成制作网站的大部分常用功能. 二.前言经过公司内部收集,整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQueryUI.如果你还在为了一个小小的特效而去下载并安装插件,发现Bug还没有人替你解决.记住插件是我们没有办法的最后选择.使用插件有太多
2、的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮,不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQueryUI 三.jQueryUIjQueryUI是jQuery的一部分,是在jQuery之上的一套专门用于UI交互的类库. 使用jQueryUI可以实现底层交互,各种高级特效,动画,并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:http://jqueryui.org/下载:http://jqueryui.com/download
3、示例和文档:http://jqueryui.com/demos/皮肤:http://jqueryui.com/themeroller/ jQueryUI的在线网站十分强大.首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤:本文主要讲解实例,大家可以通过实例代码快速上手jQueryUI. 使用jQueryUI我们可以再不借助其他插件的情况下完成大部分页面应用,说其是一个官方的超级UI插件也不为过.包含所有功能的jQueryUI类库文件为188
4、K,启用Gzip压缩后是45K.虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.目前还没有jQueryUI的中文教程. 因为本文是实战篇,所以不会仔细讲解基础内容.在后面的章节中我会加入jQueryUI的基础教程.争取成为中文jQueryUI第一教程. 四.准备工作我将所有相关的文件,包括各种类库文件,Theme模板放置在如下路径:http://www.dotnetapi.com/JSLib/此路径开通了目录浏览,可以直接查找需要的文件.目录组织结构按照本系列:(八)插播:jQuer
5、y实施方案中介绍的方案组织.另外也可以从Google上引用文件,Google的CDN速度更快也更有保证,参见:Google'sCDN本文的实例的所有引用都使用WebConfig.ResourceServer这个属性:publicclassWebConfig{publicstaticstringResourceServer=@"http://www.dotnetapi.com/";}五.弹出层对话框弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.1.艺龙网应用场景举例(1)静态提示类弹出层.弹出层的
6、内容是固定的. (2)动态提示类弹出层.弹出层内容是根据事件源变化的.(3)遮罩类弹出层.弹出时背景变灰并不可点击.2.应用实例使用jQueryUI的Dialog组件.我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable).示例完整代码如下:------------------------------------<%@PageLanguage="C#"%>
7、onal//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jQueryUI-弹出层应用实例Dialog