jquery插件之jqModal使用笔记

2012年4月2日 发表评论 阅读评论

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

 http://peirenlei.javaeye.com/blog/509988

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

 

废话少说,来这里下载吧!下载jqModal。下载jqModal对应的CSS样式表。查看Demo。

官方首页:http://dev.iceburg.net/jquery/jqModal/

1.当然是js的引用:

  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>  

 

 

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

  1. <input id="btn_search_user" type="button"  
  2.  value="选择会员" onclick="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.   onclick="javascript:find_user();" />  
  10.  <input type="button" name="close" class="jqmClose" value="关闭" />  
  11.  <div id="user_result_dialog"></div>  
  12. </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. };  

 

 

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

  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>  

 

 

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

Js代码
  1. $( function() {  
  2.   $(‘#search_user_div’).jqm();  
  3. }) 


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/206.html

  1. 本文目前尚无任何评论.