jquery mobile (一)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Resources/CSS/app.css" rel="stylesheet" type="text/css" /> <link href="../Script/jquery.mobile-1.3.2/css/themes/default/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css" /> <script src="../Script/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="../Script/jquery.mobile-1.3.2/js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header" data-theme="b"> <a href="#anylink">返回</a> <h1> 艺术墓</h1> <a href="#anylink">首页</a> </div> <div data-role="content"> <form method="post"> <div data-role="controlgroup" data-type="horizontal" id="search"> <input type="text" name="text" id="name" placeholder="协议号……"> <a href="#anylink" data-role="button">查询</a> <a href="#anylink" data-role="button">新建工程</a> </div> <div data-role="fieldcontain"> </div> <div> <ul data-role="listview"> <li data-role="list-divider" data-theme="d">业务信息</li> <li> <div data-role="fieldcontain"> <div class="ui-grid-a" data-role="controlgroup"> <div class="ui-block-a" style=" width:50%; text-align:right;"> <label> 联系人:</label> <input type="text" name="contract" id="contract" > </div> <div class="ui-block-b" style=" width:50%; text-align:right;"> <label> 使用者姓名:</label> <input type="text" name="uname" id="uname"> </div> </div> <div class="ui-grid-a" data-role="controlgroup"> <div class="ui-block-a" style=" width:50%; text-align:right;"> <label> 联系电话:</label> <input type="text" id="telphone" > </div> <div class="ui-block-b" style=" width:50%; text-align:right;"> <label> 移动电话:</label> <input type="text" name="phone" id="phone"> </div> </div> <div class="ui-grid-a" data-role="controlgroup"> <div class="ui-block-a" style=" width:50%; text-align:right;"> <label> 墓位:</label> <input type="text" name="tombPostion" id="tombPostion"> </div> <div class="ui-block-b" style=" width:50%; text-align:right;"> <label> 安葬方式:</label> <input type="text" name="way" id="way"> </div> </div> </div> </li> <li data-role="list-divider" data-theme="d">艺术墓加工流程</li> <li> <div data-role="collapsible" data-content-theme="c" data-iconpos="right"> <h1> 确认最终艺术墓面积及价格</h1> <p> <div data-role="fieldcontain"> <label for="FeeItem"> 墓位款</label> <input type="text" name="FeeItem" id="FeeItem"> <label for="FeeItem-material"> 墓碑材料费</label> <input type="text" name="FeeItem-material" id="FeeItem-material"> <label for="FeeItem-final"> 最终墓价</label> <input type="text" name="FeeItem-final" id="FeeItem-final"> <label for="FeeItem-area"> 面积</label> <input type="text" name="FeeItem-area" id="FeeItem-area"> <div style="margin-bottom: 20px;"> </div> <label for="FeeItem-labour"> 墓穴工料费</label> <input type="text" name="FeeItem-labour" id="FeeItem-labour"> <label for="FeeItem-management"> 墓穴管理费</label> <input type="text" name="FeeItem-management" id="FeeItem-management"> <label for="FeeItem-rent"> 墓穴租赁费</label> <input type="text" name="FeeItem-rent" id="FeeItem-rent"> <br /> <a href="#" data-role="button" data-inline="true" data-rel="dialog">打印交款单</a> <a href="#" data-role="button" data-inline="true" data-rel="dialog">确认</a> </div> </p> </div> <!-- 折叠打开 data-collapsed="false"--> <div data-role="collapsible" data-content-theme="c" data-iconpos="right"> <h1> 艺术墓施工单下发确认</h1> <p> <div data-role="fieldcontain"> <label for="taketime"> 下发时间</label> <input type="text" name="taketime" id="taketime"> <label for="upload-picture"> 上传施工图</label> <input type="text" name="upload-picture" id="upload-picture"> <label for="file"> 文件:</label> <label name="file"> 上传成功</label> <a href="#">下载</a><br /> <a href="#" data-role="button" data-inline="true" data-rel="dialog">打印加工单</a> <a href="#" data-role="button" data-inline="true" data-rel="dialog">确认</a> </div> </p> </div> <div data-role="collapsible" data-content-theme="c" data-iconpos="right"> <h1> 艺术墓加工返回时间确认</h1> <p> <div data-role="fieldcontain"> <label for="complete"> 完工时间</label> <input type="text" name="complete" id="complete"> <label for="upload-tomb-picture"> 上传墓型照片</label> <input type="text" name="upload-tomb-picture" id="upload-tomb-picture"> <a href="#" data-role="button" data-inline="true" data-rel="dialog">确认</a> </div> </p> </div> </li> </ul> <br /> <a href="#" data-role="button">提交</a> </div> </form> </div> <div data-role="footer" data-theme="b"> <h1> </h1> </div> </div> </body> </html>
显示效果
