<!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. java特殊运算符(转)

    原码:符号位用0表示正号,用1表示负号,数值一般用二进制形式表示 反码:机器数的反码可由原码得到.如果机器数是正数,则该机器数的反码与原码一样:如果机器数是负数,则该机器数的反码是对它的原码(符号位除 ...

  2. ubuntu zendDebugger.so 加载不上的问题

    参考文章   http://blog.sina.com.cn/s/blog_6612d5810101dapf.html 装zenDdebugger是为了在eclipse中调试用!!!!!!!结果搞了半 ...

  3. jquery-ui-datepicker定制化，汉化，因手机布局美观化源码修改

    感谢浏览,欢迎交流=.= 公司微信网页需要使用日历控件,想到jquery-mobile,但是css影响页面布局,放弃后使用jquery-ui-datepicker. 话不多说,进入正题: 1.jque ...

  4. 01_安装redhat 7.1时常出现的问题

    1. 笔记本安装时出现"dev/boot does not find ",进不去安装界面. 这是因为pci设备的问题,解决方法:在出现安装选项时,按Tab进入option模式,在末 ...

  5. mac 下 sublime text 运行c++／c 不能使用scanf／cin

    { "cmd": ["g++", "${file}", "-o", "${file_path}/${file_ ...

  6. XML3_XML元素和节点的具体解释

    就像一个树状的目录.可以把第一行当作它扎根的“土地”.XML文件是由节点构成的.它的第一个节点为“根节点”.一个XML文件必须有且只能有一 个根节点,其他节点都必须是它的子节点.我们在FLASH里使用 ...

  7. 网易邮箱前端Javascript编码规范：基础规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  8. 操作系统和Python的发展历程

    一:操作系统的发展历史: 操作系统:什么是操作系统?我们首先想到的是电脑,,也就是所谓的Windows8,Windows7,或者XP系统和Windows10,当然也包括我们手机的安卓系统或者IPhon ...

  9. vs2010 未能正确加载方案中的一个或多个项目

    Visual studio在打开解决方案时,往往会碰到一个这样的错误,提示说:未能正确加载方案中的一个或多个项目: 我们可以通过以下步骤来解决该问题:首先,在相应的sln类型文件上点击右键,选择用记事 ...

  10. HTML DOM Select 对象

    Select 对象 Select 对象代表 HTML 表单中的一个下拉列表. 在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建. 您可通过遍历表单 ...