阅读量:0
jQuery UI 提供了丰富的用户界面组件和交互效果，如拖放、日期选择器等。
从零开始学习jQuery (十) jQuery UI常用功能实战
本文是实战篇，使用jQuery UI完成制作网站的大部分常用功能。
经过公司内部收集整理了一些经常使用JavaScript实现的功能，实现这些功能的主角不是让人眼花缭乱的jQuery插件，而是jQuery UI。
jQuery UI简介
1、定义：jQuery UI是在jQuery之上的一套专门用于UI交互的类库，可以实现底层交互、各种高级特效、动画，并且可定制主题。
2、特点：使用jQuery UI可以轻松构建高度交互的Web应用程序。
3、资源：官方首页为http://jqueryui.org/，下载页面为http://jqueryui.com/download，示例和文档在http://jqueryui.com/demos/，皮肤可在http://jqueryui.com/themeroller/选择。
4、优点：维护性好，减小页面大小，便于团队协作和知识分享，降低学习成本，功能全面且稳定更新。
准备工作
1、文件放置路径：相关文件包括各种类库文件和Theme模板放置在http://www.dotnetapi.com/JSLib/，该路径开通了目录浏览。
2、Google CDN引用：也可以从Google上引用文件，速度更快也更有保证。
3、实例引用：本文的实例引用都使用WebConfig.ResourceServer属性。
弹出层对话框
1、应用场景：艺龙网上的一些应用场景包括静态提示类弹出层、动态提示类弹出层和遮罩类弹出层。
2、应用实例：使用jQuery UI的Dialog组件可以轻松实现上述三种效果，Dialog组件的主要特点是可以拖动(Draggable)，可以改变大小(Resizable)。
3、示例代码：完整代码如下：
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>jQuery UI 弹出层应用实例 Dialog</title> <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type="text/javascript"></script> <% if (false) { %><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script><% } %> <script type="text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type="text/css"> </style> </head> <body> <!-Demo 静态提示类弹出层 --> <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3> </div> </body> </html>相关问题与解答
1、问题一：为什么建议使用jQuery UI而不是单独的插件？
解答：使用jQuery UI而非单独的插件有多个优点，包括更好的维护性（由官方支持），减少页面大小（尤其在压缩后体积适中），便于团队协作和知识分享（降低了学习门槛），以及功能全面且提供稳定持续更新的服务。
2、问题二：如何引入和使用jQuery UI库？
解答：要使用jQuery UI的功能，需要先引入jQuery库，再引入jQuery UI库，可以通过官网或其他来源下载jQuery UI的压缩文件，然后在HTML页面中使用<link>标签引入jquery-ui.css文件，并在HTML页面底部或<head>中添加<script>标签引入jquery-ui.min.js文件。
<link rel="stylesheet" href="path/to/jquery-ui.css"> <script src="path/to/jquery.js"></script> <script src="path/to/jquery-ui.min.js"></script>
这样就可以使用jQuery UI提供的组件和效果了。
以上内容就是解答有关“从零开始学习jQuery (十) jQueryUI常用功能实战-jquery”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
