使用jqMobi开发app基础：panel属性data-defer介绍详解手机开发

   panel作为最重要的ＵＩ之一，属性data-defer介绍很简单，

官方介绍

1. data-defer=”filename.html” – This will load content into the panel from a remote page/url. This is useful for separating out content into different files. af.ui.ready is not available until all files are loaded asynchronously.

经过测试，还没有发现如何从远程读取数据，但本地的文件是可以的。但这个本地文件，可以使用ajax请求远程服务器，更新数据。

例如：

 <div id="login" title="办公平台" class="panel" data-defer="login.html" > 

login.html文件内容

<div title="协同办公平台"   >  
 <input type="hidden"  id="islonin" value="false" />           
                <div class="formGroupHead"> 
                    用户名</div> 
                <input type='text' id="txtusername" class='af-ui-forms' placeholder="Enter your user" style="background-color:Black"> 
                <div class="formGroupHead"> 
                    密码</div> 
                <input type='password' id="txtpassword" class='af-ui-forms' placeholder="Enter your pwd" style="background-color:Black"><br /> 
                <div> 
                    <label> 
                        记住密码</label><input id="forgetPwd" type="checkbox" name="forgetPwd" value="1" class="toggle"><label 
                            for="forgetPwd" data-on="On" data-off="Off"><span></label><br /> 
                    <label> 
                        自动登录</label><input id="outologin" type="checkbox" name="outologin" value="0" class="toggle"><label 
                            for="outologin" data-on="On" data-off="Off"><span></label> 
                </div> 
                <br /> 
                <a class="button block" id="btnLogin">登录</a>         
</div> 
 <script type="text/javascript"> 
     var serviceUrl = "http://localhost:57843/Eas.WebsiteUpdate/"; 
         $("#btnLogin").bind("click", loginFun); 
     function loginFun() { 
         var para = { 
             j_username: $("#txtusername").val(), 
             j_password: $("#txtpassword").val() 
         }; 
         var url = serviceUrl + "UIPhoneAjax/MobLogin.ashx"; 
         $.ui.showMask("登录中……"); 
         $.post(url, para, function (res) { 
             if (res.IsSuccess) { 
                 $.ui.hideMask(); 
                 $("#loginlink").hide(); 
                 $("#logoutlink").show(); 
                 $("a").remove("#loginlink"); 
                 $.ui.hideModal(); 
                 $("#islonin").val(true); 
                 $("#home").show(); 
                //   alert( $("#islonin").val()); 
             } else { 
                 $.ui.hideMask(); 
                 $("#afui").popup(res.Msg); 
             } 
         }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); }) 
     } 
    </script>

我个人理解它会把data-defer中的指定的文件内容记载到panel中,但因为panel包含在body标签中,login.html文件似乎不能再包含html,head等标签,否则显示不出来.

也就是说data-defer中的指定的文件内容有一定限制,但具体有什么限制,目前还不是很清楚,也没有找到相关文档.