jQuery UI插件在dialog中显示Ajax获取的json数据
最近一直在学习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,//默认是300modal:true//设置为模态对话框});$("#showDialog").click(function(){getData();//获取json数据$("#dialog1").dialog('open');//设置为‘open’时将显示对话框});function getData(){//获取json数据的函数$.getJSON("UserInfo.json",function(data){$("#Data").empty();//先清空tbodyvar 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标签里的。
页:
[1]