分享Jqmobi2.1 动态创建和弹出panel
楼主需求是不同的开发人员要开发一套类型的业务模板 所以要使用动态加载代码 然后再主页渲染模板使用的XML 定义好规则
<Application >
<Events>
<Property event="ready">
<![CDATA[
var baseForm = $("#form").appForm();
]]>
</Property>
</Events>
<Functions>
<Property name="initLoad">
<![CDATA[
console.log("init Load success!!");
]]>
</Property>
</Functions>
<Panel id="custormApply_Panel" load="initLoad" >
<![CDATA[
<header >
<div class="top_header">
<a id="backButton" class="button" onclick="$.ui.goBack()" style="visibility: visible;">返回</a>
</div>
</header>
<form id="form" title="自定义审批" service="" method="" >
<text id="content" text="申请内容" required="true" maxLength="140" ></text>
<text id="cash" text="申请数额"type="money" required="true" ></text>
<text id="resaon" text="审批原因"type="money" required="true" ></text>
<date id="time" text="申请时间"type="datetime" required="true" ></date>
<date id="date" text="申请日期"type="date" required="true" ></date>
<select id="flow" text="审批流程" required="true">
<option value="1">系统工作流</option>
<option value="2">自定义工作流</option>
<option value="3">第三方工作流</option>
</select>
<textarea id="remark" text="审批备注"></textarea>
</form>
<div class="app_toolbar">
<input type="button" id="successResult"value="通过"/>
<input type="button" id="backResult" value="驳回"/>
</div>
]]>
</Panel>
</Application>
然后主页面调用方法 加载XML 并创建PANEL
/**
* loader
*@param url {string} 请求地址
*@param param {object}参数对象
*@param callback {function}回调函数
*/
loader: function(url, param ,callback){
$.get(url, param,
function(data){
// 解析字符串成XML
data = $.parseXmlString(data);
var application = $(data).find("Application");
var readyEvent = $("Property",application);
var panel = $("Panel",application);
var pId = panel.attr("id");
if(typeof(window.pId) !== 'undefined'){
throw new Error('loader Panel Id <' + apId + '> 冲突, 请查看是否已经存在的Id');
}else{
var panel_load = panel.attr("load");
var content = panel.html()
var funcs = $("Functions",application).children();
var fnArray = [];
funcs.each(function(index,it){
});
content = content.replace("<![CDATA[","");
content = content.replace("]]>","");
//$.log(content);
// 已经存在时 直接弹出 否则创建
if($("#"+pId).length){
$.ui.loadContent("#" +pId, false, false, "slide");
}
else{
var divPanel = "<div id="+pId+" class='panel' data-footer='none'>";
divPanel += content ;
divPanel += "</div>";
$.ui.addContentDiv(pId,divPanel);
// 执行ready 事件
eval( readyEvent.text() );
$.ui.loadContent("#" +pId, false, false, "slide");
}
// 执行loader
//var fn = new Function('return '+panel_load+'()');
//fn();
// 加载显示panel
}
callback();
},'html');
}业务JS还没实现动态加载 不过页面可以刷出来了
核心代码
$.ui.addContentDiv(pId,divPanel);
$.ui.loadContent("#" +pId, false, false, "slide");addContentDiv动态创建 panel 第一个参数是id 第二个参数是字符串可以传dom字符串
loadContent 加载panel 。
在学习阶段 顶起 未来属于html5 phonegap 微信 wap全部搞定
页:
[1]