jquery UI Dialog 对话框使用学习笔记

时间：2013-05-10 编辑：简简单单来源：一聚教程网

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

准备 jQuery 环境

首先，我们创建一个按钮，点击这个按钮的时候，将会弹出一个对话框。

代码如下	复制代码

为了设置这个按钮点击的事件，需要准备 jQuery 的环境。

代码如下	复制代码

在 ready 中设置按钮的点击事件。

代码如下	复制代码
$(function() { // 初始化 $("#btn").click(function() { alert("btn 被点击啦！"); } );

确认这一步没有问题。

准备对话框

第二步，需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。

代码如下

复制代码

These items will be permanently deleted and cannot be recovered. Are you sure?

为了使用 jQuery UI 的对话框，需要增加这些文件的引用。

代码如下	复制代码

增加样式

jQuery UI 中使用了大量的样式来修饰，需要引用 jQuery UI 的样式，注意，jquery.ui.all.css 这个文件引用了大量的其他样式文件，将 jQuery UI 中 development-bundlethemesbase 文件夹中的内容都复制过来。

代码如下	复制代码
1

在 ready 函数中，同时也初始化这个对话框。

代码如下	复制代码
$(function() { // 初始化 $("#btn").click(function() { alert("btn 被点击啦！"); }); // 初始化对话框 $("#dialog-confirm").dialog(); });

现在，打开这个页面的时候，就已经可以看到对话框了。

与asp.net结合的一个实例

代码如下	复制代码

创建一个简单对话框：

代码如下	复制代码