[ 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> 元素
- 使用 <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页面布相关推荐
- jQuery Mobile 笔记（1）- jQuery Mobile页面结构
jQuery Mobile页面解构 jQuery Mobile 的"页面"结构不同于传统的html页面,这样做是为了优化single page application的用户体验. ...
- jQuery Mobile页面返回无需重新get
jquery mobile新版中没有返回按钮的解决方案 1. 需要在页面源代码的 page 中加上 data-add-back-btn="true" . 2.同时页面的代码中加上一 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
- jquery mobile 页面间的传递参数
jq mobile作为一个web开发手机app的框架,打包后的apk,其实就是在手机上模拟一个简易的浏览器,然后进行js操作,在没有服务器端脚本语言的支持下,如何传递参数呢? 很明显,这就要依靠jqu ...
- jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
1.页面切换(data-transition) 地址:http://api.jquerymobile.com/data-attribute/ data-transition fade | f ...
- 关于jquery mobile 页面闪烁与抖动问题
1.闪烁:在用a链接跳转到另一个页面的时候,页面总会抖动几下,其实就是页面切换时的transition特效,jqm貌似默认了这项. 解决方案:在a链接添加transition:none; 属性就可以啦 ...
- w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...
- jQuery Mobile高手必备的十大技巧和代码片段
本文转自51ito布加迪编译版本: http://mobile.51cto.com/hot-276160.htm 其中未发现英文原作链接,为尊重版权,google之后附上: http://www.we ...
最新文章
- 基于地面几何约束的单目视觉里程计精确鲁棒尺度恢复（ICRA 2021）
- VirtualBox的四种网络连接方式
- 基于MATLAB的语音信号的时域特性分析（一）——分帧、窗函数
- PMcaff微分享 | 为什么大部分女生爱星座？大部分男生恨星座？
- 使用php蓝天采集器抓取今日头条ajax的文章内容
- 重命名 docker 容器名
- ftp 服务器 性能,FTP 服务器性能 测试点
- java发送http get请求的两种方式
- 年轻人逃离推荐算法围城：老年版App，用着真香
- 对C语言实验报告的建议,c语言实验报告.docx
- axure后台示例_【Axure电商案例】如何设计和真的后台一样给客户看
- 导入android工程报错,eclipse导入appcompat项目报错解决办法
- SEO实战密码（第3版） 60天网站流量提高20倍-3
- 3 整型变量，实型数据（主要是实型变量）2021-01-25
- 飞龙在天:docker安装青龙大全
- 管理者如何抓绩效管理？
- Daily Scrum Meeting 11.13
- 使用脚本配置odbc mysql_LoadRunner利用ODBC编写MySql脚本
- 关于UI使用ContentSizeFitter组件同步立即响应
- Python计算机视觉编程第十章——OpenCV基础知识