<!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. 在类成员函数后面加const

    在看开源代码时,经常会看到在类的成员函数后面加const,之前了没有太关注过,近来闲来无事,就想起这件事,网上查了一下,大概明白了是怎么回事,这里引用CSDN愽文里的段话:“编译器会自动给每一个函数加 ...

  2. C++多态性的理解

    本文章转载来自:http://www.sollyu.com/?p=627 代码 #include <iostream.h> class Animal { public: void eat( ...

  3. 分享一下个人的Vim配置文件

    强烈拥护开源精神,高举开源大旗,今天我就分享下我自己结合网上还有自己实际使用配的vimrc,可以给各位参考下,不要见笑哈,具体说明我在rc里写的也很详细,可以具体看下,也希望可以借这个机会能多认识认识 ...

  4. php 常用五种模式

    /* 设计模式之单例模式 $_instance 必须声明为静态的私有变量 构造函数必须声明为私有,防止外部程序 new 类从而失去单例模式的意义 getInstance() 方法必须设置为公有的,必须 ...

  5. 计算字符串和文件的MD5值

    //计算字符串的MD5值 public string GetMD5(string sDataIn) { MD5CryptoServiceProvider md5 = new MD5CryptoServ ...

  6. GitHub命令精简教程

    Github其实也可以作为文件分享的地方,但是免费空间只有300M,所以不能存放大文件,否则可以成为一个分享资源的下载站,而且非常方便. 常用命令: git add .   //添加所有的文件到索引 ...

  7. PHP - PHPExcel操作xls文件

    读取中文的xls.csv文件会有问题,网上找了下资料,发现PHPExcel类库好用,官网地址:http://phpexcel.codeplex.com/ 1.读取xls文件内容 <?php // ...

  8. 10分钟进阶Nuget

    nuget是什么 .net版的maven(java)? 如果你用过windows的chocolatey,mac的homebrew或许更容易理解他,先来回顾下以前我们是如何处理或者碰到过的问题. 1.假 ...

  9. JavaScript高级之闭包的概念及其应用

    主要内容: 什么是闭包 闭包使用的一般模式 闭包都能做些什么 本文是我的JavaScript高级这个系列中的第二篇文章. 在这个系列中,我计划分析说明 一下JavaScript中的一些常用的而又神秘的 ...

  10. Matlab界面语言切换，自由显示中文或英文语言

    Matlab界面语言切换,自由显示中文或英文语言分享给大家,Matlab是一款商业数学软件,广泛使用于算法的开发.数据发现和数值计算等.不同用户对Matlab显示的语言需求也不一样,一用户习惯使用中文 ...