<!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. IOS 学习笔记 2015-04-09 0C-SQLite 数据存储

    1 项目导入 libsqlite3.0.dylib 框架 2 在使用数据sqlite的头文件(.h)上导入 #Impourt <sqlite3.h> 3 推荐自己本地电脑下个sqlite ...

  2. [翻译]ASP.NET Web API的路由

    原文:Routing in ASP.NET Web API 在我们新建一个Web API项目时,会在App_Start文件夹下的WebApiConfig.cs中定义一个默认路由: config.Rou ...

  3. initrd.gz的解压和制作

    解压: gzip -d initrd.gz cpio -idmv < initrd 压缩: find . | cpio -o -c > initrd.img gzip initrd.img ...

  4. ubuntu 下的 ftp (gftp)

    功能和 windows 下的 ftp 一样 gftp安装方法apt-get install gftp启动方法:gfpt

  5. PHP程序实现利用rand(1,100)函数产生10个1~100之间的随机数

    //echo rand(1,100);$max=0;$min=100;for($i=0;$i<=9;$i++){ $rand[$i]=rand(1,100); if($rand[$i]>$ ...

  6. php精粹-编写高效的php代码 --- php设计模式

    1.选择一个最合适的设计模式 没有任何事物是完美的,也没有人说过设计模式一个严格的放之四海而皆准的解决方法.因此你可以改变这些模式,使它们更适合手头的工作.对于某些设计模式而言,他们就是所属程序固有的 ...

  7. php提取背景图片

    preg_match_all('/background\s*-\s*+image\s*:\s*url\s*\("*([^"]*)"*\)/i', $content,$ma ...

  8. 学一点 mysql 双机异地热备份----快速理解mysql主从,主主备份原理及实践

    双机热备的概念简单说一下,就是要保持两个数据库的状态 自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做的好处多. 1. 可以做灾备,其中一个坏了可以切换 ...

  9. 在windows下的mysql使用

    具体可参照http://jingyan.baidu.com/article/3aed632e19b5e8701080918f.html 1.安装mysql. 直接百度搜索mysql下载.

  10. Scala的Option类型

    Scala的Option类型 为了让所有东西都是对象的目标更加一致,也为了遵循函数式编程的习惯,Scala鼓励你在变量和函数返回值可能不会引用任何值的时候使用Option类型.在没有值的时候,使用No ...