<!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. 时间处理得到UTC时间

    在工作过程遇到了时间处理的问题,因为需要统一将时间处理按照utc时间进行处理,因此,不能简单的通过系统运行直接得到时间的毫秒数,这样会在不同时区得到的值是不同的. import java.text.P ...

  2. JPA的泛型DAO设计及使用

    使用如Hibernate或者JPA作为持久化的解决方案时,设计一个泛型的DAO抽象父类可以方便各个实体的通用CRUD操作.由于此时大部分实体DAO的CRUD操作基本一样,采用泛型设计解决这个问题,带来 ...

  3. 一段sql的优化

    优化前代码 select * ,ROW_NUMBER() OVER(order by WrongCount desc) as rowId from(select Quba_IDint,Quba_Num ...

  4. jQuery选择器(适合初学者哟....)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  5. input多选图片与显示

    input标签 在使用input选择文件时遇到了 在遍历input file.files 只显示最后一个,修改如下: CSS: <style type="text/css"& ...

  6. Python全栈开发之MySQL（二）------navicate和python操作MySQL

    一:Navicate的安装 1.什么是navicate? Navicat是一套快速.可靠并价格相宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小 ...

  7. Educational Codeforces Round 6 D. Professor GukiZ and Two Arrays

    Professor GukiZ and Two Arrays 题意:两个长度在2000的-1e9~1e9的两个序列a,b(无序);要你最多两次交换元素,使得交换元素后两序列和的差值的绝对值最小:输出这 ...

  8. BestCoder Round #67 (div.2) N*M bulbs

    问题描述 N*M个灯泡排成一片,也就是排成一个N*M的矩形,有些开着,有些关着,为了节约用电,你要关上所有灯,但是你又很懒. 刚好有个熊孩纸路过,他刚好要从左上角的灯泡走去右下角的灯泡,然后离开. 但 ...

  9. sqlserver access 多数据库操作

    今天搞了一天的事情, 更新 ACCESS 數據庫 ,要從  SQL SERVER 2008數據庫中  查詢資料.沒找到資料 只能自己做了. 首先查找一下 ,如何 用SQL  語句 select *   ...

  10. utube视频落地

    utube视频落地 简单粗暴的方法: 利用视频下载网站的网页版进行处理. 比如需要下载的视频的url是vid_url, 需要用到的web服务的url是web_service vid_url='http ...