jquery插件之jqModal使用笔记(转载)

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

 

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

 

1.当然是js的引用：

Html代码

1. <script src="${ctx}/js/jquery.js" type="text/javascript"></script>  
2. <script src="${ctx}/js/jqmodal/jqModal.js" type="text/javascript"></script>  
3. <link rel="stylesheet" href="${ctx}/js/jqmodal/jqModal.css"  
4.     type="text/css" media="screen" />  
5. <link rel="stylesheet" href="${ctx}/css/dialog.css"  
6.     type="text/css" media="screen" />  
7. <script src="${ctx}/js/jquery-jtemplates.js" type="text/javascript"></script>  
8. <script src="${ctx}/js/jqDnR.js" type="text/javascript"></script>  

<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:

Java代码

1. <input id="btn_search_user" type="button"  
2.  value="选择会员" οnclick="javascript:$('#search_user_div').jqmShow();" />   
3.   
4. //search_user_div即为要弹出的dialog:   
5. <div id="search_user_div" class="jqmWindow">   
6. 请输入会员姓名或手机号码进行查找：   
7.  <input type="text" name="keywords" id="keywords" />   
8.  <input type="button" value="给我找"  
9.   οnclick="javascript:find_user();" />   
10.  <input type="button" name="close" class="jqmClose" value="关闭" />   
11.  <div id="user_result_dialog"></div>   
12. </div>                                       

<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函数：

Js代码

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

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:

Html代码

1. <textarea id="user_result_template" style="display: none">  
2.     <table>  
3.         <tr>  
4.             <td>会员id</td>  
5.             <td>会员姓名</td>  
6.             <td>会员手机号</td>  
7.             <td></td>  
8.         </tr>  
9.         {#foreach $T as record}   
10.         <tr>  
11.             <td>{$T.record.userId}</td>  
12.             <td>{$T.record.userName}</td>  
13.             <td>{$T.record.mobilePhone}</td>  
14.             <td>  
15.                 <input type="button" value="就选这个家伙"  
16.                     onclick="selThisUser(this);" />  
17.             </td>  
18.         </tr>  
19.         {#/for}   
20.     </table>                                     
21. </textarea>  

<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

Js代码

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

转载于:https://www.cnblogs.com/rooney/archive/2009/11/12/1601547.html