jQuery UI 教程之二 —jQuery UI Dialog的使用

本人有点懒，所以关于 jquery ui 的 教程一直都没更新，见谅了，jquery ui 入门为大家大概讲解了下 jquery ui 的概念、用途以及大致的结构，从这篇文章开始，我们就要开始讲解 jquery ui 中的具体的一些组件的使用方法，本文讲解 jquery ui dialog 的使用：

我们在做交互的时候经常要用到对话框，没错 jquery ui dialog 就是为此而生的,jquery ui dialog 为我们提供了一个简单的接口来实现平常需要大量 javascript 代码来实现的效果，我们可以使用 jquery ui dialog 实现很多的功能，例如做登录、注册和消息提示等功能。

在使用 dialog 组件前，先要将 dialog 所依赖的 js 文件引入到页面中，这些文件包括 js 文件和 css 文件，所有的 dialog 样式的实例代码，在/development-bundle/demos/dialog/目录下，打开源码看到一种类型的 dialog 的使用方法，如果是不明白我在说什么，就先去看看，下载了 jquery ui 后如何使用。如果你还没有 jquery ui 代码包，那你就先去下载：各版本 jquery ui 下载

我们以/development-bundle/demos/dialog/default.html 为例看下jquery ui dialog 的头部文件引入情况

<!--载入主题样式--> 


<script type="text/javascript" src="../../jquery-1.6.2.js"></script> 


<!--载入 jquery 核心类库--> 


<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script> 


<!--这个主要是为了兼容 IE6 而载入的一个插件--> 


<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> 


<!--载入 jquery ui 核心类库--> 


<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> 


<!--载入 jquery ui 组件核心类库--> 


<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> 


<!--载入 jquery ui 鼠标相关组件--> 


<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> 


<!--载入 jquery ui 拖动相关组件，主要是为了让 dialog 能够被拖动--> 


<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> 


<!--载入 jquery ui 位置相关组件，主要是为了让 dialog 能够居中或者控制位置--> 


<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> 


<!--载入 jquery ui 调整大小相关组件，主要是为了让 dialog 的大小能够通过鼠标来调整--> 


<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> 


<!--载入 jquery ui 对话框组件--> 

这些引入的文件，有些不是必要的，需要根据 dialog 的参数来定，比如你不需要调整 dialog 的大小，你就没有必要载入jquery.ui.resizable.js 这个文件，再看看 dialog 是如何被弹出的。

<script type="text/javascript">// <![CDATA[ 


$(function() {      $( "#dialog" ).dialog();    }); 


// ]]></script>