设计APP,由于屏幕很小,在PC网页山可以放在一体的内容,在APP中就不能放在一起了。
例如如下,项目出勤人员很多,需要弹出一个panel,然后让用户选择,如何设计呢?
项目出勤panel的内容:
<div id="shenqingxiangmuchuqing" title="申请项目出勤" class="panel" data-load="loadshenqingxiangmuchuqingDetail" data-tab="navbar_picture" > <form id="FormshenqingxiangmuchuqingDetail" onsubmit="return false"> <script src="pageJS/shenqingxiangmuchuqingDetail.js" type="text/javascript"></script> <div class="input-group"> <label for="shenqingxiangmuchuqingkaoqinriqi"> 考勤日期:</label> <input id="shenqingxiangmuchuqingkaoqinriqi" type="date" placeholder="注:考勤日期只能选择今天或今天之后的日期 " /> <label for="shenqingxiangmuchuqingtianshu"> 申请天数:</label><select id="shenqingxiangmuchuqingtianshu"> <option value="0.5">0.5天</option> <option value="1">1天</option> </select> <label for="shenqingxiangmuchuqingrenyuan" > 项目出勤人员:</label> <input type="text" id="shenqingxiangmuchuqingrenyuan" value="" /> <!-- <input id="tiqianshenqingzhuhetong" type="text" placeholder="主合同名称" readonly="readonly" style="display: none"></input>--> <input type="hidden" id="shenqingxiangmuchuqingrenyuanhidden" value="" /> <label for="shenqingxiangmuchuqingshuoming"> 申请说明:</label><textarea id="shenqingxiangmuchuqingshuoming" placeholder="申请说明"></textarea> <br style="clear: both"> <a id="submitshenqingxiangmuchuqing" class="button block">提交</a> <a onclick=" $.ui.goBack();" class="button block">取消</a> </div> </form> </div>项目出勤人员弹出panel的内容:
<div id="xiangmuchuqinrenyuan" title="项目出勤人员" class="panel" data-tab="navbar_picture" data-nav="main" data-load="loadxiangmuchuqinrenyuanData" > <div class="input-group"> <label for="xiangmuchuqinrenyuanxingming"> 姓名:</label><input id="xiangmuchuqinrenyuanxingming" type="text" placeholder="姓名"> <label for="xiangmuchuqinrenyuanzumingcheng"> 组名称:</label><input id="xiangmuchuqinrenyuanzumingcheng" type="text" placeholder="组名称"> <a id="A8xiangmuchuqinrenyuan" class="button block">搜索</a> </div> <ui class="list" id="xiangmuchuqinrenyuangrid"> </ui> <script src="pageJS/xiangmuchuqinrenyuan.js" type="text/javascript"></script> </div>
<div id="shenqingxiangmuchuqing" title="申请项目出勤" class="panel" data-load="loadshenqingxiangmuchuqingDetail" data-tab="navbar_picture" data-nav="main" data-defer="shenqingxiangmuchuqing.html"> </div> <div id="xiangmuchuqinrenyuan" title="项目出勤人员" class="panel" data-tab="navbar_picture" data-nav="main" data-load="loadxiangmuchuqinrenyuanData" data-defer="xiangmuchuqinrenyuan.html"> </div>
核心代码:
function loadshenqingxiangmuchuqingDetail() { //省略其他代码 $("#shenqingxiangmuchuqingrenyuan").bind("click", function () { /* $.ui.showModal("#chuqingxiangmu");*/$.ui.loadContent("#xiangmuchuqinrenyuan", false, false, "up"); }); }
核心代码:
function loadxiangmuchuqinrenyuanData() { //Ajax加载数据 function CreateALink(item) {//把返回的数据生成链接 if (!item) { return ""; } return " <a href=\"#\" onclick=\"javascript:afterSelectlistxiangmuchuqinrenyuan('" + item["U_ID"] + "'" + ",'" + item["U_NAME"] + "')\">" + "姓名:" + item["U_NAME"] + ",组名称:" + item["G_NAME"] + "</a>"; } } //点击连接后,给项目出勤panel的响应文本框赋值,并通过隐藏字段传递人员编号 function afterSelectlistxiangmuchuqinrenyuan(id, name) { // alert(id + "," + name); $("#shenqingxiangmuchuqingrenyuan").val(name); $("#shenqingxiangmuchuqingrenyuanhidden").val(id+","); $.ui.goBack(); // $.ui.hideModal(""); }
用户点击项目出勤人员文本框后:
用户选择一个人员后,可以看到文本内容已经赋值到了相应的文本框,需要保存的值也保存在隐藏字段中。