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解决下拉框内容写入的方法可以这 ...
随机推荐
- swift－03-数据类型转换
// main.swift // 05-数据类型的转换 // // Created by wanghy on 15/8/9. // Copyright (c) 2015年 wanghy. Al ...
- frame 第三节
1.准备3个文件 main.html: <html> <head> <title>框架</title> </head> <frames ...
- JSP EL表达式详细介绍
一.JSP EL语言定义 E L(Expression Language) 目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 ...
- C++ 数组的地址问题学习随笔
二维数组额地址问题学习,本文学习内容参考:http://blog.csdn.net/wwdlk/article/details/6322439 #include<iostream> usi ...
- （hdu）5547 Sudoku （4*4方格的 数独 深搜）
Problem Description Yi Sima was one of the best counselors of Cao Cao. He likes to play a funny game ...
- jQuery选择器（一）
1.#id根据给定的ID匹配一个元素. <div id="notMe"><p>id="notMe"</p></div& ...
- C#XML创建与节点对象引用
我们在创建xml过程中会遇到不同的级别有相同节点的情况.如下面的xml: <?xml version="1.0" encoding="GBK"> & ...
- POJ 3393 Lucky and Good Months by Gregorian Calendar 模拟题
题目:http://poj.org/problem?id=3393 不多说了,简单模拟题,因为粗心写错了两个字母,导致错了N遍,模拟还是一贯的恶心,代码实在不想优化了,写的难看了点.. #includ ...
- Case When PK PIVOT
SELECT *FROM ScoreInfogo Name Course Score---------- ---------- -----------Lucy Chinese 74Jim Math 8 ...
- Memcached(二)Memcached Java API基础之MemcachedClient
1. 构造函数 public MemcachedClient(InetSocketAddress[] ia) throws IOException; public MemcachedClient(Li ...