使用jqMobi开发app基础：弹出内容的设计

设计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("");

}

实现效果

用户点击项目出勤人员文本框后：

用户选择一个人员后。能够看到文本内容已经赋值到了对应的文本框，须要保存的值也保存在隐藏字段中。