🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
 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中的指定的文件内容有一定限制,但具体有什么限制,目前还不是很清楚,也没有找到相关文档.