含Tap页和查询的页面结构及数据加载
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=480,user-scalable=no" />
<title>我的工作台</title>
<link href="../../css/bingotouch.css" rel="stylesheet" />
<link href="../../css/index.css" rel="stylesheet" />
<script src="../../js/cordova.js"></script>
<script src="../../js/zepto.js"></script>
<script src="../../js/iscroll.js"></script>
<script src="../../js/plugins.js"></script>
<script src="../../js/ui.js"></script>
<script src="../../js/common/common.js" type="text/javascript"></script>
<script src="../../js/baiduTemplate.js" type="text/javascript"></script>
<script src="../../js/itil/model.js" type="text/javascript"></script>
<style>
.content{ bottom:0px;}
.maincontent{bottom:0px;}
.box > [data-role="BTButton"] > .btn-text{
padding:0 52px;
}
.row-box > [class*="span"]{
min-height: 52px;
}
.list-view li
{
line-height:50px;
min-height:50px;
vertical-align:middle;
padding-top: 3px;
padding-bottom: 3px;
}
.list-view li span
{
line-height:36px;
min-height:36px;
}
.nail_left
{
text-align:right;
width: 35%;
font-size:24px;
}
.nail_right p
{
font-size:24px;
padding-top:7px;
padding-bottom:7px;
min-height:36px;
line-height:36px;
vertical-align:middle;
}
.txt_Content
{
border-bottom:1px dashed #D9D9D9;
}
.tab
{
padding-left:15px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #9FC4E7), color-stop(1, #dddddd));
}
b
{
padding-right:6%;
}
.btn-text > b
{
padding: 0 10px;
margin-left: 4px;
font-size: 16px;
color: #fff;
line-height: 20px;
font-weight: normal;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px #666;
}
.btn-text > b.pop_g
{
background-color: #00d76b;
background-image: -moz-linear-gradient(top, #00d76b, #00c34c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00d76b), to(#00c34c));
background-image: -webkit-linear-gradient(top, #00d76b, #00c34c);
background-image: -o-linear-gradient(top, #00d76b, #00c34c);
background-image: linear-gradient(to bottom, #00d76b, #00c34c);
}
.btn-text > b.pop_r
{
background-color: #ff4d00;
background-image: -moz-linear-gradient(top, #ff4d00, #f14900);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff4d00), to(#f14900));
background-image: -webkit-linear-gradient(top, #ff4d00, #f14900);
background-image: -o-linear-gradient(top, #ff4d00, #f14900);
background-image: linear-gradient(to bottom, #ff4d00, #f14900);
}
.classportal .btn-text
{
font-size:26px;
}
.list_bar{
display:none;
}
</style>
<script>
var pamars, PartID, ApplyTitle, EmergencyType, SysType, currentcate;
var action = common.ipadress + "Service/ITIL.asmx/ITILList";
$(function () {
RollScreen(); //滚屏
document.addEventListener("deviceready", load, true);
gmuip.tesppost.PullNextPage(function () {
var currentcate = $("#currentcateid").val();
if (currentcate == "ApplayList") {
if ($("#ispostback").val() == "ispostback") {
loadapplylist("null", PartID, ApplyTitle, EmergencyType, SysType);
} else {
loadapplylist("null", PartID, "", "", "");
}
}
else if (currentcate == "QuestionList") {
if ($("#ispostback").val() == "ispostback") {
loadquestionlist("not null", PartID, ApplyTitle, EmergencyType, SysType);
} else {
loadquestionlist("not null", PartID, "", "", "");
}
}
});
});
function load() {
bindTapEvent(); //绑定Tap事件
navact();
};
function bindTapEvent() {
$(".btnBack").bind("tap", function () {
app.back();
});
$("#search").bind("tap", function () {
app.load({
url: "search.html",
params: { "currentcate": $("#currentcateid").val() },
slideType: "left",
progress: { show: "false", title: "your title", message: "your message" }
});
})
}
function navact() {
app.setting.get("userid", "", function (resval) {
PartID = resval;
});
app.getPageParams(function (res) {
if (res == null) {
//页面首次进来加载待办事项列表数据
$("#apply").addClass("classportal btn-active");
$("#question").addClass("classportal");
$("#currentcateid").val("ApplayList");
loadapplylist("null", PartID, "", "", "")
$(".list_bar").eq(0).show();
} else {
$("#ispostback").val("ispostback"); //设置时回传过来的
ApplyTitle = res.ApplyTitle;
EmergencyType = res.EmergencyType;
SysType = res.SysType;
currentcate = res.currentcate;
if (currentcate == "ApplayList") {
$("#apply").addClass("classportal btn-active");
$("#question").addClass("classportal");
$("#currentcateid").val("ApplayList");
loadapplylist("null", PartID, ApplyTitle, EmergencyType, SysType);
$(".list_bar").eq(0).show();
} else if (currentcate == "QuestionList") {
$("#apply").addClass("classportal");
$("#question").addClass("classportal btn-active");
$("#currentcateid").val("QuestionList");
loadquestionlist("not null", PartID, ApplyTitle, EmergencyType, SysType);
$(".list_bar").eq(1).show();
}
};
//tap点击时切换当前页加载数据
$("#nav li").each(function (i) {
$(this).tap(function () {
$(".list_bar").hide();
$("#load_add").show();
$(".list_bar").eq(i).show();
var currentcategory = $(this).attr("data-detail");
if (currentcategory == "ApplayList") {
$("#pageindex").val(1); //切换页面后数据是加载第一页
$("#currentcateid").val("ApplayList"); //保存当前点击的类别名
loadapplylist("null", PartID, "", "", "");
} else if (currentcategory == "QuestionList") {
$("#pageindex").val(1); //切换页面后数据是加载第一页
$("#currentcateid").val("QuestionList"); //保存当前点击的类别名
loadquestionlist("not null", PartID, "", "", "");
}
});
});
})
};
function loadapplylist(ParentApplyCode, PartID, ApplyTitle, EmergencyType, SysType) {
ZuZhuangPamars(ParentApplyCode, PartID, ApplyTitle, EmergencyType, SysType);
try {
app.progress.start("", "正在加载数据，请稍等...");
gmuip.tesppost.GetApplayList(action, $("#pageindex").val(), $("#pagesize").val(), "", pamars, "");
} catch (e) {
app.progress.stop();
}
};
function loadquestionlist(ParentApplyCode, PartID, ApplyTitle, EmergencyType, SysType) {
ZuZhuangPamars(ParentApplyCode, PartID, ApplyTitle, EmergencyType, SysType);
try {
app.progress.start("", "正在加载数据，请稍等...");
gmuip.tesppost.GetQuestionList(action, $("#pageindex").val(), $("#pagesize").val(), "", pamars, "");
} catch (e) {
app.progress.stop();
}
};
function ZuZhuangPamars(ParentApplyCode, PartID, ApplyTitle, EmergencyType, SysType) {
pamars = "{\"ParentApplyCode\":\"" + ParentApplyCode + "\",\"PartID\":\"" + PartID + "\"";
if (ApplyTitle != "") {
pamars += ",\"ApplyTitle\":\"" + ApplyTitle + "\"";
}
if (EmergencyType != "") {
pamars += ",\"EmergencyType\":\"" + EmergencyType + "\"";
}
if (SysType != "") {
pamars += ",\"SysType\":\"" + SysType + "\"";
}
pamars += "}";
};
var oaoneScroll;
function RollScreen() {
oaoneScroll = new iScroll('wrapper', { checkDOMChanges: true });
};
</script>
</head>
<body>
<input id="pageindex" type="hidden" value="1" />
<input id="pagesize" type="hidden" value="8" />
<input id="pagecount" type="hidden" />
<input id="currentcateid" type="hidden" />
<input id="ispostback" type="hidden" />
<div data-role="page">
<div class="header">
<div class="title row-box">
<div class="box-left">
<div data-role="BTButton" data-type="image" class="btnBack">
<img src="../../css/images/icons/icon-back.png" alt="" /></div>
</div>
<div class="span1">
<h1>
ITIL查询列表</h1>
</div>
<div class="box-right">
<div data-role="BTButton" data-type="image" id="search">
<img src="../../css/images/icons/navicon/icon-search.png" />
</div>
</div>
</div>
</div>
<div class="content maincontent">
<div class="news_tab">
<div class="navbar" id="nav" data-theme="a">
<ul class="grid-b">
<li data-detail="ApplayList">
<div data-role="BTButton" id="apply">
申请单信息</div>
</li>
<li data-detail="QuestionList">
<div data-role="BTButton" id="question">
问题单信息</div>
</li>
</ul>
</div>
</div>
<div class="content subcontent" id="wrapper">
<div class="scroll">
<!---->
<div class="list_bar" id="bar1">
<ul class="list-view" data-corner="none" id="theapplaylist">
</ul>
<script id="applaylist" type="text/html">
<%if(DataList.length>=1){%><%for(var i = 0;i<DataList.length;i++){%>
<li>
<div data-role="BTButton" style="background-color: White;" data-iconpos="right" data-url="detail.html" data-urlArg="{params:{ApplyTitle:'<%=DataList[i].ApplyTitle%>',ProcessType:'<%=DataList[i].ProcessType%>',ApplyCode:'<%=DataList[i].ApplyCode%>',CompletTime:'<%=DataList[i].CompletTime%>',ImportType:'<%=DataList[i].ImportType%>',SysType:'<%=DataList[i].SysType%>',ApplyName:'<%=DataList[i].ApplyName%>',Phone:'<%=DataList[i].Phone%>',ProcessID:'<%=DataList[i].ProcessID%>'}}">
<div class="thumbnail-text">
<h3>
<%=DataList[i].ApplyTitle%></h3>
<p>
<b><%=common.method.ChangeDateFormat(DataList[i].ApplyTime)%></b><span>申请人：<%=DataList[i].ApplyName%></span><span>步骤：<%=DataList[i].CurrentActi%></span></p>
</div>
</div>
</li>
<% } %><% } %>
</script>
</div>
<!---->
<div class="list_bar" id="bar2">
<ul class="list-view" data-corner="none" id="thequestionlist">
</ul>
<script id="questionlist" type="text/html">
<%if(DataList.length>=1){%><%for(var i = 0;i<DataList.length;i++){%>
<li>
<div data-role="BTButton" style="background-color: White;" data-iconpos="right" data-url="detail.html" data-urlArg="{params:{ApplyTitle:'<%=DataList[i].ApplyTitle%>',ProcessType:'<%=DataList[i].ProcessType%>',ApplyCode:'<%=DataList[i].ApplyCode%>',CompletTime:'<%=DataList[i].CompletTime%>',ImportType:'<%=DataList[i].ImportType%>',SysType:'<%=DataList[i].SysType%>',ApplyName:'<%=DataList[i].ApplyName%>',Phone:'<%=DataList[i].Phone%>'}}">
<div class="thumbnail-text">
<h3>
<%=DataList[i].ApplyTitle%></h3>
<p>
<b><%=common.method.ChangeDateFormat(DataList[i].ApplyTime)%></b><span>申请人：<%=DataList[i].ApplyName%></span><span>步骤：<%=DataList[i].CurrentActi%></span></p>
</div>
</div>
</li>
<% } %><% } %>
</script>
</div>
<div id="load_add">
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">向下拖动刷新...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号