|
楼主需求是不同的开发人员要开发一套类型的业务模板 所以要使用动态加载代码 然后再主页渲染
模板使用的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[event='ready']",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 。
|
-
主页
-
弹出的panel
|