[jQuery入门到精通]第10章：jQueryUI常用功能实战

一.摘要本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇.使用jQueryUI完成制作网站的大部分常用功能.二.前言经过公司内部收集,整理了一些经常使用javascript实现的功能.实现这些功能的主角不是让人眼花缭乱的jQuery插件,而是jQueryUI.如果你还在为了一个小小的特效而去下载并安装插件,发现Bug还没有人替你解决.记住插件是我们没有办法的最后选择.使用插件有太多的坏处: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是事件源的位置,在此位置显示会将事件