? ? ? ? ? ? ? 設計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> ~~~ 首先在index.html中定義好，兩個panel。 ~~~ <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> ~~~ 然后在項目出勤panel的data-load方法中綁定調用項目出勤人員的panel，在用戶點擊項目出勤人員的文本框時彈出相應的人員選擇框。 ?核心代碼： ~~~ function loadshenqingxiangmuchuqingDetail() { //省略其他代碼 $("#shenqingxiangmuchuqingrenyuan").bind("click", function () { /* $.ui.showModal("#chuqingxiangmu");*/$.ui.loadContent("#xiangmuchuqinrenyuan", false, false, "up"); }); } ~~~ 其次在項目出勤人員panel的data-load方法中動態加載數據，并在用戶選擇后，返回選擇的數據并返回到項目出勤panel 核心代碼： ~~~ 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(""); } ~~~ 實現效果 用戶點擊項目出勤人員文本框后：  用戶選擇一個人員后，可以看到文本內容已經賦值到了相應的文本框，需要保存的值也保存在隱藏字段中。