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中的指定的文件内容有一定限制,但具体有什么限制,目前还不是很清楚,也没有找到相关文档.
- 前言
- 使用jqMobi开发app基础
- jqMobi开发app页面注意事项
- 使用jqMobi开发app基础:定义header
- 使用jqMobi开发app基础:定义footer
- 使用jqMobi开发app基础:通过panel添加内容
- 使用jqMobi开发app基础:panel属性data-defer介绍
- 使用jqMobi开发app基础:Side Menu
- 使用jqMobi开发app基础:Styled Lists布局
- 使用jqMobi开发app基础:Grid布局
- 使用jqMobi开发app基础:响应式布局介绍
- 使用jqMobi开发app基础:Toggle Switches开关按钮
- 使用jqMobi开发app基础:HTML5 LocalStorage 本地存储
- 使用jqMobi开发app基础:登录页面的实现
- 使用jqMobi开发app基础:注销页面的实现
- 使用jqMobi开发app基础:viewport指令
- 使用jqMobi开发app基础:a标签的使用
- 使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据
- 使用jqMobi开发app基础:页面传值方式
- 使用jqMobi开发app基础:panel之间的跳转方式
- 使用jqMobi开发app基础:panel之间的跳转方式总结
- 使用jqMobi开发app基础:下拉select
- 使用jqMobi开发app基础:真的只能存在一个DOM吗?
- 使用jqMobi开发app基础:使用 jQuery
- 使用jqMobi开发app基础:Scrolling的使用,拖动后大量空白的解决方法
- 使用jqMobi开发app基础:Scrolling的使用,停止和继续拖动有关的问题
- 使用jqMobi开发app基础:Badge的使用
- 使用jqMobi开发app基础:如何拨打电话?
- 使用jqMobi开发app基础:弹出内容的设计