jquery插件之jqModal使用笔记

最新推荐文章于 2024-11-09 09:23:05 发布

iteye_19488

最新推荐文章于 2024-11-09 09:23:05 发布

阅读量243

点赞数

分类专栏： css javascript 文章标签： jQuery JavaScript CSS json Ajax ViewUI

css javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个强大的 jQuery 弹窗插件 jqModal 的使用方法，并通过实例展示了如何实现带有 AJAX 查询功能的对话框。文章还涉及了 JavaScript 模板的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔者使用过很多jquery弹窗插件,jqModal是我认为最强大方便的一个，在此做个笔记，以备以后使用时查看。

首先，我拿一个示例加以说明，页面上有一个按钮，点击后，可弹出一个dialog,在这个dialog上，有一个查询，点击后会以ajax方式获取查询结果并显示：

1.当然是js的引用：

<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
<script src="${ctx}/js/jqmodal/jqModal.js" type="text/javascript"></script>
<link rel="stylesheet" href="${ctx}/js/jqmodal/jqModal.css"
	type="text/css" media="screen" />
<link rel="stylesheet" href="${ctx}/css/dialog.css"
	type="text/css" media="screen" />
<script src="${ctx}/js/jquery-jtemplates.js" type="text/javascript"></script>
<script src="${ctx}/js/jqDnR.js" type="text/javascript"></script>

2.点击按钮，弹出dialog,id为search_user_div,class一定为是jqmWindow:

<input id="btn_search_user" type="button"
 value="选择会员" οnclick="javascript:$('#search_user_div').jqmShow();" />

//search_user_div即为要弹出的dialog:
<div id="search_user_div" class="jqmWindow">
请输入会员姓名或手机号码进行查找：
 <input type="text" name="keywords" id="keywords" />
 <input type="button" value="给我找"
  οnclick="javascript:find_user();" />
 <input type="button" name="close" class="jqmClose" value="关闭" />
 <div id="user_result_dialog"></div>
</div>

3.在弹出dialog上面点击'给我找'button后，会调用find_user函数：

function find_user() {
	var keywords = $('#keywords').val();
	$.post("./user!ajax_find_user",{keywords:keywords},function(json){
		// 附上模板
		$("#user_result_dialog").setTemplateElement("user_result_template");
		   // 给模板加载数据
		$("#user_result_dialog").processTemplate(json)
	},"json");	
};

4.上面用到了js模板，user_result_template为模板的id:

<textarea id="user_result_template" style="display: none">
	<table>
		<tr>
			<td>会员id</td>
			<td>会员姓名</td>
			<td>会员手机号</td>
			<td></td>
		</tr>
		{#foreach $T as record}
		<tr>
			<td>{$T.record.userId}</td>
			<td>{$T.record.userName}</td>
			<td>{$T.record.mobilePhone}</td>
			<td>
				<input type="button" value="就选这个家伙"
					οnclick="selThisUser(this);" />
			</td>
		</tr>
		{#/for}
	</table>									
</textarea>

5.最后记得在页面载入时要初始化一下弹出dialog

$( function() {
  $('#search_user_div').jqm();
})