<!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>

显示效果

jquery mobile (一)的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  4. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  5. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  6. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  7. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  9. Jquery Mobile开发以及Js对象动态绑定

    动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...

  10. jquery mobile系列问题汇总整理（传播知识，利己利人）

    我在用jquery mobile做项目时,遇到jm在下拉框等组件里不能正常动态更新内容,查找了相关资料,在这里抛砖引玉,先提供一个解决下拉框内容写入更新的解决方法: jm解决下拉框内容写入的方法可以这 ...

随机推荐

  1. asp.net:验证控件中ValidationExpression的写法

    手机号:"\d{11}"传真号:"\d{7,12}" EMAIL: ".{2,15}@.{2,15}\..{2,4}" 邮箱正则表达式:/^ ...

  2. Windows server 2003常用设置

    1.禁用配置服务器向导   由于不需要服务器设置功能,首先我们先禁止“配置你的服务器”(Manage   Your   Server)向导的出现,你可以在控制面板(Control   Panel)   ...

  3. java之表达式陷阱

    String str1 = "Hello Java的长度:10"; String str2 = "Hello Java的长度:10";  String str3 ...

  4. 大数据基础知识：分布式计算、服务器集群[zz]

    大数据中的数据量非常巨大,达到了PB级别.而且这庞大的数据之中,不仅仅包括结构化数据(如数字.符号等数据),还包括非结构化数据(如文本.图像.声音.视频等数据).这使得大数据的存储,管理和处理很难利用 ...

  5. STUN/TURN/ICE协议在P2P SIP中的应用（一）

    1           说明 本文详细描述了基于STUN系列协议实现的P2P SIP电话过程,其中涉及到了SIP信令的交互,P2P的原理,以及STUN.TURN.ICE的协议交互 本文所提到的各个服务 ...

  6. jQuery学习教程(2)

    由于一件事情打断了我的生活节奏,每天都学习都在托托拉拉,导致很多进度都没有达到自己预期的效果 在上一个章节我学到了环境的搭建,以及对jquery的熟悉.现在开始对其具体进行熟悉了. 一.如何使用选择器 ...

  7. js stringObject的indexOf方法

    我所写的这个是基本知识的基本知识,为什么我还是要写呢,所谓说好记性不如烂比头,作为一名前端开发人员,太多相似的代码见的又太多,但是又不常见,所以很容易忘记,那我把indexOf原理讲清楚 indexO ...

  8. php单引号和双引号的区别与用法

    php里的单引号把内容当成纯文本,不会经过服务器翻译.而双引号则与此相反.里面的内容会经过服务器处理(process). 举个简单的例子:   $foo="data"; echo ...

  9. html渐隐轮播

    这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...

  10. 基于smarty+medoo手搭php简单的框架

    1.首先看一下搭建好的smarty目录(箭头位置是后新建的文件夹,也是框架结构的最终目录结构) 2.首先在根目录下新建index.php文件即入口文件,内容如下 <?phprequire_onc ...