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

笔者使用过很多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>

<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="选择会员" onclick="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="给我找"
  onclick="javascript:find_user();" />
 <input type="button" name="close" class="jqmClose" value="关闭" />
 <div id="user_result_dialog"></div>
</div>

<input id="btn_search_user" type="button"
 value="选择会员" onclick="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="给我找"
  onclick="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");
};

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="就选这个家伙"
                    onclick="selThisUser(this);" />
            </td>
        </tr>
        {#/for}
    </table>
</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="就选这个家伙"
					onclick="selThisUser(this);" />
			</td>
		</tr>
		{#/for}
	</table>									
</textarea>

 

 

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

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