[ 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”
学习内容:
页眉工具栏和页眉button
页眉是网页身体的头不一样.以下我们演示下在页面工具栏中加入两个连接,中间一个标题.
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="subone">
<div data-role="header" data-position="inline">
<a href="#">返回</a>
<h1> 主界面 </h1>
<a href="#">很多其它</a>
</div>
</div> </body>
</html>
导航工具栏
导航工具栏是 jQuery Mobile 的小部件.像tab页,像navbar一样.以下演示下,音乐的一个网页的案例:
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" data-position="inline">
<a href="#">返回</a>
<h1>音乐 </h1>
<a href="#">很多其它</a>
<div data-role="navbar" >
<ul>
<li><a href="#">古典</a></li>
<li><a href="#">流行</a></li>
<li><a href="#">摇滚</a></li>
</ul>
</div>
</div> <div data-role="content">
<h3>I am a single collapsible element </h3>
<p>I am the content inside of the single collapsible element</p>
</div> </div>
</body>
</html>
页脚工具栏
页脚工具栏,以下实现button并排显示,两端button边角变为圆角:
(左图不是圆角,右图是圆角.代码就是相差个div)
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" data-position="inline">
<a href="#">返回</a>
<h1>音乐 </h1>
<a href="#">很多其它</a>
<div data-role="navbar" >
<ul>
<li><a href="#">古典</a></li>
<li><a href="#">流行</a></li>
<li><a href="#">摇滚</a></li>
</ul>
</div>
</div> <div data-role="content">
<h3>I am a single collapsible element </h3>
<p>I am the content inside of the single collapsible element</p>
</div> <div data-role="footer" class="ui-bar" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">千千静听</a>
<a href="#" data-role="button">QQ音乐</a>
<a href="#" data-role="button">酷我音乐</a>
</div>
</div>
</div>
</body>
</html>
定位工具栏
定位工具栏,上面我们都用过了.定位工具栏是否已经在可视化范围内.要是工具栏使用固定位子,我们仅仅须要将该属性加入进去:
data-position="fixed".
也能够在page div中使用全屏定位.我们仅仅须要 <div data-role=”page” data-fullscreen=”true”>
Editor's Note
路漫漫其修远兮 我将上下而求索
版权声明:本文博客原创文章,博客,未经同意,不得转载。
[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏的更多相关文章
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布
[ 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 ,学 ...
- 自定义jQuery Mobile工具栏按钮
自定义jQuery Mobile工具栏按钮 1.实现效果
- jQuery Mobile 工具栏
jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- 皓轩的jquery mobile之路(二)
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...
随机推荐
- cocos2d-x项目101次相遇: Scenes , Director, Layers, Sprites
cocos2d-x 101次相遇 / 文件夹 1 安装和环境搭建 -xcode 2 Scenes , Director, Layers, Sprites 3 建立图片菜单 4 在 ...
- 经常使用Firefox插件大全
Web开发者经常使用的火狐插件 1)FireShot:是一个截图工具,来源于截图软件Screenshot Studio的开发商,是一个Firefox扩展或者说是Firefox版的Screenshot ...
- R12 付款过程请求-功能和技术信息 (文档 ID 1537521.1)
In this Document Abstract History Details _afrLoop=2234450430619177&id=1537521.1&dis ...
- Androidclient和server端数据交互的第一种方法
网上有非常多样例来演示Android客户端和server端数据怎样实现交互只是这些样例大多比較繁杂,对于刚開始学习的人来说这是不利的.如今介绍几种代码简单.逻辑清晰的交互样例,本篇博客介绍第一种: 一 ...
- DIV+CSS 入门
玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...
- three.js是JavaScript编写的WebGL第 三方库
three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...
- C#文件操作基础之File类和FileInfo类
文件和I/O流的差异: 文件是一些具有永久存储及特定顺序的字节组成的一个有序的.具有名称的集合. 因此对于文件,我们经常想到文件夹路径,磁盘存储,文件和文件夹名等方面. I/O流提供一种后备存储写入字 ...
- php将中文插入数据库出现乱码
通过php向mysql数据库插入数据,然后在数据库中查看的时候全是乱码(中文),但是取出之后放在页面上仍然正常.就是通过数据库查看的时候全是乱码不能阅读. mysql以UTF-8编码来保存中文,页面提 ...
- Ubuntu--有关VMware Tools安装问题
虚拟机中找不到VMware Tools选项 在虚拟机上安装了ubuntu系统后,是不可以进行系统间数据共享的,也就是说我win7系统里的文件,不能拷贝到虚拟机的ubuntu系统. 解决方案:我们需要安 ...
- VC6.0入门使用
软件下载地址 http://pan.baidu.com/s/1qWuqFAO 新建win console 32 project,然后新建header文件.最后新建source cpp文件.如图所看到的