PhoneGap中文网

 找回密码
 立即注册
查看: 18546|回复: 2

分享Jqmobi2.1 动态创建和弹出panel

[复制链接]

5

主题

27

帖子

140

积分

注册会员

Rank: 2

积分
140
发表于 2014-9-17 17:59:25 | 显示全部楼层 |阅读模式
楼主需求是不同的开发人员要开发一套类型的业务模板 所以要使用动态加载代码 然后再主页渲染
模板使用的XML 定义好规则
  1. <Application >
  2.         <Events>
  3.                 <Property event="ready">
  4.                         <![CDATA[
  5.                                 var baseForm = $("#form").appForm();
  6.                         ]]>
  7.                 </Property>
  8.         </Events>
  9.        
  10.         <Functions>
  11.                
  12.                 <Property name="initLoad">
  13.                         <![CDATA[
  14.                        
  15.                                 console.log("init Load success!!");
  16.                         ]]>
  17.                 </Property>
  18.                
  19.         </Functions>
  20.         <Panel id="custormApply_Panel" load="initLoad" >
  21.                 <![CDATA[
  22.                                 <header >
  23.                                         <div class="top_header">
  24.                                                 <a id="backButton" class="button" onclick="$.ui.goBack()" style="visibility: visible;">返回</a>
  25.                                         </div>
  26.                            </header>
  27.                                 <form id="form" title="自定义审批" service="" method="" >
  28.                                         <text id="content" text="申请内容" required="true" maxLength="140" ></text>
  29.                                         <text id="cash" text="申请数额"  type="money" required="true" ></text>
  30.                                         <text id="resaon" text="审批原因"  type="money" required="true" ></text>
  31.                                         <date id="time" text="申请时间"  type="datetime" required="true" ></date>
  32.                                         <date id="date" text="申请日期"  type="date" required="true" ></date>
  33.                                         <select id="flow" text="审批流程" required="true">
  34.                                                 <option value="1">系统工作流</option>
  35.                                                 <option value="2">自定义工作流</option>
  36.                                                 <option value="3">第三方工作流</option>
  37.                                         </select>
  38.                                         <textarea id="remark" text="审批备注"  ></textarea>
  39.                                 </form>
  40.                                 <div class="app_toolbar">
  41.                                         <input type="button" id="successResult"  value="通过"/>
  42.                                         <input type="button" id="backResult" value="驳回"/>
  43.                                 </div>
  44.                 ]]>
  45.         </Panel>
  46. </Application>
复制代码

然后主页面调用方法 加载XML 并创建PANEL
  1. /**
  2.              * loader
  3.              *@param url {string}   请求地址
  4.              *@param param {object}  参数对象
  5.              *@param callback {function}  回调函数
  6.              */
  7.             loader: function(url, param ,callback){
  8.                     $.get(url, param,
  9.                     function(data){
  10.                             // 解析字符串成XML
  11.                             data = $.parseXmlString(data);
  12.                             var application = $(data).find("Application");
  13.                             var readyEvent = $("Property[event='ready']",application);
  14.                             var panel = $("Panel",application);
  15.                             var pId = panel.attr("id");
  16.                            
  17.                             if(typeof(window.pId) !== 'undefined'){
  18.                                     throw new Error('loader Panel Id <' + apId + '> 冲突, 请查看是否已经存在的Id');
  19.                             }else{
  20.                                     var panel_load = panel.attr("load");
  21.                                     var content = panel.html()
  22.                                    
  23.                                     var funcs = $("Functions",application).children();
  24.                                     var fnArray = [];
  25.                                     funcs.each(function(index,it){
  26.                                            
  27.                                     });
  28.                                     content = content.replace("<![CDATA[","");
  29.                                     content = content.replace("]]>","");
  30.                                     //$.log(content);
  31.                                     // 已经存在时 直接弹出 否则创建
  32.                                     if($("#"+pId).length){
  33.                                             $.ui.loadContent("#" +pId, false, false, "slide");
  34.                                     }
  35.                                     else{
  36.                                             var divPanel = "<div id="+pId+" class='panel' data-footer='none'>";
  37.                                             divPanel += content ;
  38.                                             divPanel += "</div>";
  39.                                            
  40.                                             $.ui.addContentDiv(pId,divPanel);
  41.                                             // 执行ready 事件
  42.                                             eval( readyEvent.text() );
  43.                                            
  44.                                             $.ui.loadContent("#" +pId, false, false, "slide");
  45.                                     }
  46.                                    
  47.                                     // 执行loader
  48.                                     //var fn = new Function('return '+panel_load+'()');
  49.                                     //fn();
  50.                                     // 加载显示panel
  51.                            
  52.                             }
  53.                             callback();
  54.                     },'html');

  55.                    
  56.             }
复制代码
业务JS还没实现动态加载 不过页面可以刷出来了

核心代码

  1. $.ui.addContentDiv(pId,divPanel);                   
  2.                                             $.ui.loadContent("#" +pId, false, false, "slide");
复制代码
addContentDiv动态创建 panel 第一个参数是id 第二个参数是字符串可以传dom字符串
loadContent 加载panel 。


主页

主页

弹出的panel

弹出的panel
it营
回复

使用道具 举报

0

主题

18

帖子

55

积分

注册会员

Rank: 2

积分
55
发表于 2015-5-8 10:58:00 | 显示全部楼层
在学习阶段 顶起
it营
回复 支持 反对

使用道具 举报

0

主题

14

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2015-5-8 10:22:24 | 显示全部楼层
未来属于html5 phonegap 微信 wap全部搞定
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 16:36 , Processed in 0.044183 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表