使用jqMobi开发app基础:panel属性data-defer介绍

   panel作为最重要的UI之一,属性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中的指定的文件内容有一定限制,但具体有什么限制,目前还不是很清楚,也没有找到相关文档.

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值