<!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. OC与Swift的区别二(常量、变量、运算符)

    4.常量与变量声明 oc的变量声明使用  类型 变量名 ＝ 变量值的方式,其中类型为系统内置数据类型或自定义类型,变量名需由英文字母开头且不能包含特殊字符 swift变量声明使用 var 变量名 ＝ ...

  2. html表单 第四节

    实例: <html> <head> <title>表单实例</title> </head> <body> <center& ...

  3. sublime_2014-11-19

    http://xionggang163.blog.163.com/blog/static/376538322013930104310297/ 直接输入注册码就可以了 ----- BEGIN LICEN ...

  4. 深入了解line-height

    1.定义   行高:两行文字baseline(基线)之间的距离 示意图: 2.为何line-height可以让单行文本垂直居中       其实并没有垂直居中,除非将font-size:0; 3.li ...

  5. Ajax--1

    1.Ajax:组合利用javascript.XML和DOM等技术,在无需要刷新页面的前提下实现浏览器与服务器通信.它在用户和服务器之间引入了一个中间层,负责转发用户界面和服务器之间的交互.在服务器处理 ...

  6. 获取DOM的真实节点

    <script type="text/babel"> var Myelement=React.createClass({ handleClick:function(){ ...

  7. javascript 写农场迭代

    /** * 农场一头小母牛 * 每年生头小母牛 * 母牛五岁产母牛 * 二十年上多少牛 */ 划分程序,母牛只管自己的年龄能不能产牛仔,母牛是model同时也是工厂 农场只管养牛,收获新牛. 一年一个 ...

  8. PHPUnit初试

    先测试了一下加减,检查一下环境,又调用函数测试了服务器名. 源代码: class DemoController extends \Think\Controller { /** * @assert (5 ...

  9. PHP 易出问题记录

    PHP foreach引用缺陷 <?php $array = array(1, 2, 3); foreach ($array as &$v) {} foreach ($array as ...

  10. [转]Vim 复制粘贴探秘

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...