最近一直在学习jQuery，其中的一款插件引起了我的注意：jQuery UI（官方网站）
今天学习的是其中的dialog部分，弹出对话框是web设计中经常出现的内容，jQueryUI插件的该功能非常强大提供了非常多的选项和事件处理（Dialog Options），特别是可以将设计在网页中的内容作为弹出框的内容。
在这一篇博文中，我就用一个自己写的例子来实践一下dialog的使用（这个例子包含了jQuery获取json文件的功能）。
?
首先需要引入的文件（为了方便，直接引用Google提供的资源，也可以选择直接下载到本地）：
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
?
然后可以看看，body部分的设计内容：
<div id="dialog1"> <table> <thead><tr><td>姓名</td><td>性别</td><td>年龄</td><td>邮箱</td></tr></thead> <tbody id="Data"></tbody> </table> </div> <button id="showDialog">show the dialog</button>
?div的内容将会被显示在dialog中，tbody将被用于显示json数据，button用于触发显示dialog事件。
?
另外我们得准备一个json文件UserInfo.json（和网页放在同级目录下），内容如下：
[
{
"name":"王天",
"sex":"男",
"years":"12",
"email":"hello@gmail.com"
},
{
"name":"小文",
"sex":"女",
"years":"21",
"email":"xiaowen@qq.com"
}
]
?
现在就需要看看最关键的，jQuery代码了：
$(function(){
$("#dialog1").dialog({
autoOpen:false,//该选项默认是true，设置为false则需要事件触发才能弹出对话框
title:'信息列表',//对话框的标题
width:400,//默认是300
modal:true//设置为模态对话框
});
$("#showDialog").click(function(){
getData();//获取json数据
$("#dialog1").dialog('open');//设置为‘open’时将显示对话框
});
function getData(){//获取json数据的函数
$.getJSON("UserInfo.json",function(data){
$("#Data").empty();//先清空tbody
var strHTML = "";
$.each(data,function(InfoIndex,Info){//遍历json里的数据
strHTML += "<tr>";
strHTML += "<td>"+Info["name"]+"</td>";
strHTML += "<td>"+Info["sex"]+"</td>";
strHTML += "<td>"+Info["years"]+"</td>";
strHTML += "<td>"+Info["email"]+"</td>";
strHTML += "</tr>";
});
$("#Data").html(strHTML);//显示到tbody中
});
}
?
大功告成，这样就可以在弹出框中看到json传来的表格数据了，弹出框的内容框架是提前写好到body标签里的。