使用jqMobi開發app基礎：彈出內容的設計

標籤：style   class   blog   code   java   http   

                設計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("");    }

實現效果

使用者點擊項目出勤人員文字框後：

使用者選擇一個人員後，可以看到常值內容已經賦值到了相應的文字框，需要儲存的值也儲存在隱藏欄位中。