使用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></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></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中的指定的文件内容有一定限制,但具体有什么限制,目前还不是很清楚,也没有找到相关文档.