jquery非常详细的使用教程

一.摘要使用插件有太多的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮,不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQueryUI三.jQueryUIjQueryUI是jQuery的一部分,是在jQuery之上的一套专门用于UI交互的类库.使用jQueryUI可以实现底层交互,各种高级特效,动画,并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:下载:示例和文档:皮肤:的在线网站十分强大.首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例,还可以随时更换实例的皮肤:本文主要讲解实例,大家可以通过实例代码快速上手jQueryUI.使用jQueryUI我们可以再不借助其他插件的情况下完成大部分页面应用,说其是一个官方的超级UI插件也不为过.包含所有功能的jQueryUI类库文件为188K,启用Gzip压缩后是45K.虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.目前还没有jQueryUI的中文教程.因为本文是实战篇,所以不会仔细讲解基础内容.在后面的章节中我会加入jQueryUI的基础教程.争取成为中文jQueryUI第一教程.四.准备工作我将所有相关的文件,包括各种类库文件,Theme模板放置在如下路径:此路径开通了目录浏览,可以直接查找需要的文件.目录组织结构按照本系列:(八)插播:jQuery实施方案中介绍的方案组织.另外也可以从Google上引用文件,Google的CDN速度更快也更有保证,参见:Google'sCDN本文的实例的所有引用都使用WebConfig.ResourceServer这个属性:publicclassWebConfig{publicstaticstringResourceServer=@}五.弹出层对话框弹出框是最常用最实用的功能.先来看一下艺龙网上的一些应用场景.1.艺龙网应用场景举例(1)静态提示类弹出层.弹出层的内容是固定的.(2)动态提示类弹出层.弹出层内容是根据事件源变化的.(3)遮罩类弹出层.弹出时背景变灰并不可点击.2.应用实例使用jQueryUI的Dialog组件.我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable).示例完整代码如下:%@PageLanguage=C#%!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Head1runat=servertitlejQueryUI-弹出层应用实例Dialog/title!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--linkrel=stylesheettype=text/csshref=%=WebConfig.ResourceServer+/JsLib/jquery/themes/redmond/style.css%/scripttype=text/javascriptsrc=%=WebConfig.ResourceServer%/JsLib/jquery/jquery-min-lastest.js/scriptscriptsrc=%=WebConfig.ResourceServer%/JsLib/jquery/ui/jquery-ui-all-min-lastest.jstype=text/javascript/script%if(false){%scriptsrc=~/js/jquery-vsdoc-lastest.jstype=text/javascript/script%}%scripttype=text/javascript/*==========必须放在头部加载的语句块.尽量避免使用==========*//scriptstyletype=text/css/style/headbody!--Demo静态提示类弹出层--divclass=ui-widgetui-widget-contentui-corner-allstyle=width:700px;padding:5px;h3Demo.共享同一个静态弹出层,弹出层内容固定:/h3divspanid=spanShowTip1显示提示/span  spanid=spanShowTip2显示提示/span  spanid=spanShowTip3显示提示/span  spanid=spanShowTip4显示提示/span  /div/divbr/br/!--Demo动态提示类弹出层--divclass=ui-widgetui-widget-contentui-corner-allstyle=width:700px;padding:5px;h3Demo.每个弹出层内容不同,弹出层内容存储在事件源的元素属性中:/h3divspanid=spanShowDataTip1data=颜色是红色红色/span  spanid=spanShowDataTip2data=颜色是绿色绿色/span  /div/divbr/br/!--Demo遮罩类弹出层--divclass=ui-widgetui-widget-contentui-corner-allstyle=width:700px;padding:5px;h3Demo.弹出IFrame/h3divinputtype=buttonid=btnShowIframename=btnShowIframevalue=显示弹出层//div/div!--提示类弹出层--divid=divTiptitle=自定义标题p弹出层/p/div!--遮罩类弹出层--divid=divIframetitle=iFrame弹出层style=text-align:center;iframesrc==450pxheight=230px/iframe/divscripttype=text/javascript/*==========用户自定义方法==========*//*==========事件绑定==========*/(function(){//静态提示类弹出层(span[id^=spanShowTip]).css(cursor,pointer).click(function(event){(*).stop();event.stopPropagation();vartop=(event.target).offset().top+20;varleft=(event.target).offset().left;(#divTip).dialog(option,position,[left,top]);(#divTip).dialog(open);});//动态提出类弹出层(span[id^=spanShowDataTip]).css(cursor,pointer).click(function(event){(*).stop();(#divTip).dialog(close);event.stopPropagation();vartop=(event.target).offset().top+20;varleft=(event.target).offset().left;(#divTip).html((event.target).attr(data));(#divTip).dialog(option,position,[left,top]);(#divTip).dialog(open);});//遮罩类弹出层(#btnShowIframe).click(function(event){event.preventDefault();event.stopPropagation();(#divIframe).dialog(open);});//单击自身取消冒泡(#divTip,#divIframe).bind(click,function(event){event.stopPropagation();});//document对象单击隐藏所有弹出层(document).bind(click,function(event){(#divTip).dialog(close);(#divIframe).dialog(close);});});/*==========加载时执行的语句==========*/(function(){//初始化提示类弹出层(#divTip).dialog({show:null,bgiframe:false,autoOpen:false});//初始化遮罩类弹出层(#divIframe).dialog({show:null,bgiframe:false,autoOpen:false,width:500,height:300,draggable:true,resizable:false,modal:true});});/script/body/html效果如图:静态提示类弹出层动态提示类弹出层:遮罩类弹出层:3.关键点讲解(1)计算弹出层位置提示类弹出框最重要的是计算弹出框的位置.通过事件对象获取到事件源,使用offset()函数计算事件源相对于document的位置:vartop=(event.target).offset().top;varleft=(event.target).offset().left;因为是相对于document,即页面左上角的位置,所以需要将弹出层放在Body元素中的第一层.即父类就是body.如果包含在其他元素中,需要确定任何一个父类的position样式设置为了relative.计算出来的top和left是事件源的位置,在此位置显示会将事件源对象遮盖住.所以通常需要手工做一些偏移,比如top+20.(2)取消冒泡和浏览器默认行为如果我们为document对象绑定了单击后关闭弹出层的事件,那么就一定要取消事件的冒泡.使用event对象的stopPropagation()方法可以取消冒泡.event.stopPropagation();对于具有默认行为的元素,比如提交按钮的提交表单行为,a元素的超链接行为等,我们如果在这些元素上应用事件,还需要取消它们的默认行为:event.preventDefault();(3)设置动画效果与取消动画通过设置