jquery mobile (一)
<!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 (一)的更多相关文章
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
- jquery mobile 问问多多
jquery mobile 问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
- jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- JQuery Mobile 页面参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- Jquery Mobile开发以及Js对象动态绑定
动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...
- jquery mobile系列问题汇总整理（传播知识，利己利人）
我在用jquery mobile做项目时,遇到jm在下拉框等组件里不能正常动态更新内容,查找了相关资料,在这里抛砖引玉,先提供一个解决下拉框内容写入更新的解决方法: jm解决下拉框内容写入的方法可以这 ...
随机推荐
- CSS背景属性
CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...
- java新手笔记22 接口示例2
1.USB package com.yfs.javase; public interface USB { //定义规范 public void read(); public void write(); ...
- Java实战之01Struts2-01简介及环境搭建
一.Struts2简介 1.Struts2概述 Struts2是Apache发行的MVC开源框架.注意:它只是表现层(MVC)框架. 2.Struts2的来历 Struts1:也是apache开发的一 ...
- ZOJ 2702 Unrhymable Rhymes（DP）
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1702 题目大意:给定有很多数字组成的诗,譬如 “AABB”, “AB ...
- [翻译]ASP.NET Web API 2入门
原文:Getting Started with ASP.NET Web API 2 Step 1:新建一个Empty的Web API Project. Step 2:添加一个Model: public ...
- 基于NodeJs的网页爬虫的构建（二）
好久没写博客了,这段时间已经忙成狗,半年时间就这么没了,必须得做一下总结否则白忙.接下去可能会有一系列的总结,都是关于定向爬虫(干了好几个月后才知道这个名词)的构建方法,实现平台是Node.JS. 背 ...
- SSH框架jar神包
SSH JAR包链接(https://zhidao.baidu.com/share/ac8b1389bac84023d7442cad88f3933c.html)
- 入门2：PHP相关的名词解释
/**宝宝我英语不好,后面注释拼音 请见谅**/ 1.Linux 开源的操作系统,在服务器端用户数量非常大,很多服务器都是使用Linux系统运行的. 相对windows系统来说具有非常完善的用户权限系 ...
- 如何定时备份远程mysql数据库
通常,站长们都没有自己的服务器,每天都要手动备份数据库那也很麻烦.这里推荐一个方法,利用windows的计划任务来实现. 前提:本地机器上装有mysql服务. 假设本地机器上mysql服务目录 d: ...
- Csharp Winfrom 多串口通信
Csharp 多串口通信 顾名思义,多串口通信,普通的PC机一般只有一个串口,现在很多家用的PC都没有串口,那么问题来了,如何保证多串口呢? 有一种神器,MOXA CP-168U Series PCI ...