当我们专注地研究人类生活的空虚，并考虑荣华富贵空幻无常时，也许我们正在阿谀逢迎自己懒惰的天性。
Written In The Font
为了app的手机端,我选择了 jQuery Mobile ,学习中出一系列的博客吧.我喜欢的一句话 “Talk is Cheap Show me the CODE”,所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看下哦.
工具: Aptana Studio 3 + 火狐
学习内容:
- 创建单页布局
- 建多页布局
- 利用网格对齐内容
- 设计可折叠布局
创建单页布局
移动页面分:页眉,页脚和内容三部分.下面实现一个hello world(程序员的大门)页面:
![[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局_第1张图片](http://img.e-com-net.com/image/info8/0f03f3ec3bab4051b3e0211eb3cd8e89.jpg "image")
show the code:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Worldtitle>
<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方便进行.
![[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局_第2张图片](http://img.e-com-net.com/image/info8/6c9f94699fee4f139a1beffe2da27210.jpg "image")
![[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局_第3张图片](http://img.e-com-net.com/image/info8/edf8255729d24588937525105f205fca.jpg "image")
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> 标题1h1>div>
<div data-role="content"> <h1> <a href="#sub" data-role="button">跳转到页面二a>h1>div>
<div data-role="footer"> <h1> 页脚1h1>div>
div>
<div data-role="page2" id="sub">
<div data-role="header"> <h1> 标题2h1>div>
<div data-role="content"> <h1> Hello World2!!h1>div>
<div data-role="footer"> <h1> 页脚2h1>div>
div>
body>
html>
在线测试
data-role="button" 自动默认的button按钮样式
jQuery Mobile 中的按钮可通过三种方法创建[ 按钮会在下面 详细讲]：
- 使用
- 使用 元素
- 使用 data-role="button" 的 元素
利用网格对齐内容
网格是用放置对象,使他们对齐的工具.
可使用的布局网格有四种：ui-grid-a ui-grid-b ui-grid-c ui-grid-d
可使用的内容类有四种:ui-block-a ui-block-b ui-block-c ui-block-d
![[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局_第4张图片](http://img.e-com-net.com/image/info8/fe9c55499d9f4e899555362eff913c88.jpg "image")
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>1span>div>
<div class="ui-block-b" style="border: 1px solid black;"><span>2span>div>
<div class="ui-block-c" style="border: 1px solid black;"><span>3span>div>
div>
<h3>多行的三列布局：h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>9span>div>
<div class="ui-block-b" style="border: 1px solid black;"><span>8span>div>
<div class="ui-block-c" style="border: 1px solid black;"><span>7span>div>
<div class="ui-block-a" style="border: 1px solid black;"><span>6span>div>
<div class="ui-block-b" style="border: 1px solid black;"><span>5span>div>
<div class="ui-block-a" style="border: 1px solid black;"><span>4span>div>
div>
div>
div>
body>
html>
设计可折叠布局
可以通过点击或触摸来隐藏或显示可折叠的内容.
![[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局_第5张图片](http://img.e-com-net.com/image/info8/414e7e51b8c8437894d6bd24604da3d0.jpg "image")
show the code:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Lititle>
<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>点了是sbp>
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 load333h3>
<p>I am expanded on page load333...p>
div>
div>
div>
div>
<div data-role="footer">
<h1>页脚h1>
div>
div>
body>
html>