[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布
[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
当我们专注地研究人类生活的空虚，并考虑荣华富贵空幻无常时，或许我们正在阿谀逢迎自己懒惰的天性。
Written In The Font
为了app的手机端,我选择了 jQuery Mobile ,学习中出一系列的博客吧.我喜欢的一句话 “Talk is Cheap Show me the CODE”,所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的能够来看下哦.
工具: Aptana Studio 3 + 火狐
学习内容:
创建单页布局
移动页面分:页眉,页脚和内容三部分.以下实现一个hello world(程序猿的大门)页面:
show the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> <script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body> <div id="page1" data-role="page" >
<div data-role="header"> <h1> 标题</h1></div>
<div data-role="content"> <h1> <a href="#">Hello World!!</a></h1></div>
<div data-role="footer"> <h1> 页脚</h1></div>
</div>
</body>
</html>
建多页布局
多页布局是单页布局的一个集合,创建一个Html文件包含非常多个界面,也能够创建非常多个html文件,每一个文件包含一个页面爆他们连接起来.
这里我们用一个html方便进行.
show the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測试</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> <script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script> </head>
<body> <div id="page1" data-role="page" >
<div data-role="header"> <h1> 标题1</h1></div>
<div data-role="content"> <h1> <a href="#sub" data-role="button">跳转到页面二</a></h1></div>
<div data-role="footer"> <h1> 页脚1</h1></div>
</div> <div data-role="page2" id="sub">
<div data-role="header"> <h1> 标题2</h1></div>
<div data-role="content"> <h1> Hello World2!!</h1></div>
<div data-role="footer"> <h1> 页脚2</h1></div>
</div> </body>
</html>
data-role="button" 自己主动默认的button按钮样式
jQuery Mobile 中的button可通过三种方法创建[ button会在以下 具体讲]：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的 <a> 元素
利用网格对齐内容
网格是用放置对象,使他们对齐的工具.
可使用的布局网格有四种：ui-grid-a ui-grid-b ui-grid-c ui-grid-d
可使用的内容类有四种:ui-block-a ui-block-b ui-block-c ui-block-d
show the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測试</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> <script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script> </head>
<body> <div data-role="page" id="pageone">
<div data-role="header">
<h1>列</h1>
</div> <div data-role="content">
<h3>三列布局：</h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>1</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>2</span></div>
<div class="ui-block-c" style="border: 1px solid black;"><span>3</span></div>
</div> <h3>多行的三列布局：</h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>9</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>8</span></div>
<div class="ui-block-c" style="border: 1px solid black;"><span>7</span></div>
<div class="ui-block-a" style="border: 1px solid black;"><span>6</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>5</span></div>
<div class="ui-block-a" style="border: 1px solid black;"><span>4</span></div>
</div>
</div>
</div> </body>
</html>
设计可折叠布局
能够通过点击或触摸来隐藏或显示可折叠的内容.
show the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Li</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> <script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script> </head>
<body> <div data-role="page" id="subone">
<div data-role="header">
<h1>折叠案例</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h3>点我... </h3>
<p>点了是sb</p>
</div> <div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>再点我...</h3>
<p>I am a boy ...</p>
<p>u r a girl ......</p>
</div>
<div data-role="collapsible" >
<h3>没了...</h3>
<p>I am expanded on page load222...</p>
<div data-role="collapsible">
<h3>I am expanded on page load333</h3>
<p>I am expanded on page load333...</p>
</div>
</div>
</div> </div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div> </body>
</html>
Editor's Note
路漫漫其修远兮 我将上下而求索
[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布的更多相关文章
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile ,学 ...
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏
[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏 Written In The Font " Wirte less Do more& ...
- jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...
- （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- jQuery Mobile 页面事件
jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...
- 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器
在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...
- 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框
一.为什么要学Jquery Mobile JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...
- JQuery Mobile 页面参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- jquery mobile页面跳转缓存问题解决
最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...
随机推荐
- MYSQL，innodb_buffer_pool_size内存分配
为MYSQL.innodb_buffer_pool_size=8G.MySQL一起动就会将占用掉8G内存(觉得TOP能够看到内存被使用了8G),可是近期才细致研究一下.原来不是这种(可能自己对Linu ...
- 【白痴弟弟和你加强应用层】阅读 Develop API Guides 思考(一个)
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 动态检測设备属性 关于targetSdkVersion的含义 关于onSaveInstanceState的高 ...
- OWIN 为WebAPI
OWIN 为WebAPI 宿主 跨平台 OWIN是什么? OWIN的英文全称是Open Web Interface for .NET. 如果仅从名称上解析,可以得出这样的信息:OWIN是针对.NET平 ...
- newinstance()和new有什么区别?(转)
在初始化一个类,生成一个实例的时候:newInstance() 和 new 有什么区别? 用newInstance与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,那么为什么会有 ...
- 进程和线程之间的关系和区别 和 CPU牒
流程具有一定独立功能的程序关于某个数据集合上的一次执行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立执行的基本单位. 进 ...
- hdu 1171 Big Event in HDU（母函数）
链接:hdu 1171 题意:这题能够理解为n种物品,每种物品的价值和数量已知,现要将总物品分为A,B两部分, 使得A,B的价值尽可能相等,且A>=B,求A,B的价值分别为多少 分析:这题能够用 ...
- MyBatis系列教程(六)-- 与Spring综合（Integrate with Spring）
其它工具或技术需要使用: 项目管理工具 : Maven 前台WEB图库:JSP 其他框架:Spring, Spring MVC 数据库 : Derby Maven的Web项目 Maven Depend ...
- Android - 和其他APP交互 - 把用户带到其他app
Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...
- 【我们都爱Paul Hegarty】斯坦福大学IOS8公开组个人笔记28 ScrollView 幻灯片视图
随着移动设备,iphone屏幕尺寸的限制.超过内容的屏幕大小为scrollview于,通过滑动来获得.scrollview滑动方向可以是也可以是横向垂直,scrollview可以嵌套,例如,纵向滑动s ...
- “MEAN”技术栈开发web应用
“MEAN”技术栈开发web应用 上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在no ...