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

<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