[ 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,开发效率确实高,但是这个框架的一些坑也 ...
随机推荐
- template method pattern
//DataViewer.cs using System; namespace TemplateMethodSample { abstract class DataViewer { //抽象方法:获取 ...
- 自己写的sql排序
create function dbo.Fn_Sort ( @str varchar(1024) ) returns nvarchar(100) as begin declare @tb table ...
- 达到J2EE在后台action控制接待javascript弹出的对话框
1.后台Action于: request.setAttribute("message", "这项username要么password错误,请重新输入!"); 2 ...
- hibernate的通配符比拼接sql到底好在哪?
Hibernate对于刚接触的人来说,通配符只是提供了另一种组合sql的方式.接触的久了,熟悉之后,才能够真正理解通配符在Hibernate中起到的作用 主要作用有两点: 1,避免sql注入 hibe ...
- Android Application Thread CPU GC Operatiing and OOM Question 0603-随手笔记
面前app当完成测试,没问题,以完成整个老龄化阶段包含数据收发器,关键在 adb shell top -m 5 我发现我的 app pid 占用 CPU是最多的,事实上我想说写一个app是不难,你 ...
- NYOJ 745 蚂蚁问题(两)
蚂蚁的难题(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 下雨了,下雨了.蚂蚁搬家了. 已知有n种食材须要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种 ...
- c# socket udp广播
一.广播消息 由于Tcp是有连接的,所以不能用来发送广播消息.发送广播消息,必须用到Udp,Udp可以不用建立连接而发送消息.广播消息的目的IP地址是一种特殊IP地址,称为广播地址.广播地址由IP地址 ...
- git bash 出现vim的时候怎么退出
如果是输出状态,首先Esc退出输入状态,然后Shift+;,再输入q!或wq!(不保存改动,wq!是保存文件的写入修改)退出
- HDU 4686 Arc of Dream(递归矩阵加速)
标题效果:你就是给你一程了两个递推公式公式,第一个让你找到n结果项目. 注意需要占用该公式的复发和再构造矩阵. Arc of Dream Time Limit: 2000/2000 MS (Java/ ...
- Hello ASP.NET5
2015年11月30日, ASP.NET 5 RC1 已经发布,本文尝试了一下ASP.NET5项目的创见一发布到IIS.开发环境,win10 64位,visual studio2015(已更新upda ...