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>
2.点击按钮，弹出dialog,id为search_user_div,class一定为是jqmWindow:
<input id="btn_search_user" type="button" value="选择会员"/>//search_user_div即为要弹出的dialog:<div id="search_user_div" class="jqmWindow">请输入会员姓名或手机号码进行查找： <input type="text" name="keywords" id="keywords" /> <input type="button" value="给我找" /> <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="就选这个家伙" /></td></tr>{#/for}</table></textarea>
5.最后记得在页面载入时要初始化一下弹出dialog
$( function() {$('#search_user_div').jqm();})
页:
[1]