注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

jquery插件之jqModal使用教程  

2009-12-25 13:28:16|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

首先,我拿一个示例加以说明,页面上有一个按钮,点击后,可弹出一个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="选择会员" 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>                                       
<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函数:

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

 

 

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

Js代码 复制代码
  1. $( function() {   
  2.   $('#search_user_div').jqm();   
  3. })  
  评论这张
 
阅读(1630)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017