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":"[e-mail]"

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"[e-mail]"

}

]

 

现在就需要看看最关键的，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标签里的。