- 浏览: 7853993 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
原文发表在:
http://mobile.51cto.com/aengine-358926.htm,乃本人翻译作品,禁止转载
目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来说,最方便快捷的方法莫过于使用比如jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,因为只要熟悉CSS,JavaScript则可以很轻松地运用这些移动Web开发框架进行开发。
在本文中,将介绍使用jQuery Mobile开发的一些常用的技巧,阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。
1、禁止截断过长的列表和按钮内容
在jQuery mobile中,如果列表或者按钮中文字的内容过长,jQuery Mobile会自动截断其超过长度的内容,但如果不希望这样的话,可以在CSS样式中增加如下设置即可,比如下面的是针对按钮的CSS样式设置:
.ui-btn-text { white-space: normal; } 下面的是针对列表的CSS样式设置
.ui-li-desc { white-space: normal; } 如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;
2、实现页面加载时的随机页面背景过渡效果
jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码,可以实现页面加载时的随机页面背景过渡效果。
CSS代码:
Javascript代码:
3、禁用button
在有的情况下,可能会需要禁止按钮的加载事件,这个时候可以继续通过如下的设置实现:
$('#home-button').button("disable"); 如果要恢复可用,则设置为:
$('#home-button').button("enable");
4、去掉页面加载时的提示信息
如果在加载页面时,不需要显示页面加载信息时,可以通过设置一个属性来取消显示加载提示信息,如下:
$.mobile.pageLoading(true); 如果要继续保持显示页面加载信息,则为:
$.mobile.pageLoading();
5、创建自定义主题
jQuery Mobile本身提供了A-E五种不同的主题,但可以自定义主题,步骤如下:
从jQuery Mobile的任意一个定义主题的CSS文件中,复制其内容到自己定义的CSS文件中。
给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件,注意命名必须是(a-z)英文字母,比如你是从jQuery Mobile的主题c的样式文件中复制的,则可以将主题命名为Z,则复制过来的内容中,比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z,如此类推。
改变新建立的自定义主题的颜色和CSS文件。
最后,需要在页面中,应用新定义的主题样式,如下:
<div data-role="page" data-theme="z"></div>
6、使用自定义字体
在移动Web应用中,有的时候需要更换字体,这样的话,可以通过使用@font-face方法实现,并且性能是十分好的。具体关于@font-face的使用,请参考http://www.sitepoint.com/the-fontface-jquery-plugin/这篇文章。
7、创建一个没有文本只有图片的按钮
有时,可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本,设置data-iconpos="notext",例如:
8、打开一个无需使用Ajax页面过渡的超链接
如果不需要使用Ajax打开一个页面的链接,可以设置链接的rel属性,如下:
9、移除项目列表中的箭头
默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在想要移除列表项设置data-icon="false"。
10、设置页面的背景颜色
怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,需要在body元素中设置背景颜色,但是用jQuery Mobile框架,需要设置在ui-page类中。
.ui-page{ background:#eee; }
http://mobile.51cto.com/aengine-358926.htm,乃本人翻译作品,禁止转载
目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来说,最方便快捷的方法莫过于使用比如jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,因为只要熟悉CSS,JavaScript则可以很轻松地运用这些移动Web开发框架进行开发。
在本文中,将介绍使用jQuery Mobile开发的一些常用的技巧,阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。
1、禁止截断过长的列表和按钮内容
在jQuery mobile中,如果列表或者按钮中文字的内容过长,jQuery Mobile会自动截断其超过长度的内容,但如果不希望这样的话,可以在CSS样式中增加如下设置即可,比如下面的是针对按钮的CSS样式设置:
.ui-btn-text { white-space: normal; } 下面的是针对列表的CSS样式设置
.ui-li-desc { white-space: normal; } 如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;
2、实现页面加载时的随机页面背景过渡效果
jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码,可以实现页面加载时的随机页面背景过渡效果。
CSS代码:
my-page { background: transparent url(../images/bg.jpg) 0 0 no-repeat; } .my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; } .my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; } .my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }
Javascript代码:
$('.my-page').live("pagecreate", function() { var randombg = Math.floor(Math.random()*4); //获得0到3之间的随机数 $('.my-page').removeClass().addClass('bg' + randombg); });
3、禁用button
在有的情况下,可能会需要禁止按钮的加载事件,这个时候可以继续通过如下的设置实现:
$('#home-button').button("disable"); 如果要恢复可用,则设置为:
$('#home-button').button("enable");
4、去掉页面加载时的提示信息
如果在加载页面时,不需要显示页面加载信息时,可以通过设置一个属性来取消显示加载提示信息,如下:
$.mobile.pageLoading(true); 如果要继续保持显示页面加载信息,则为:
$.mobile.pageLoading();
5、创建自定义主题
jQuery Mobile本身提供了A-E五种不同的主题,但可以自定义主题,步骤如下:
从jQuery Mobile的任意一个定义主题的CSS文件中,复制其内容到自己定义的CSS文件中。
给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件,注意命名必须是(a-z)英文字母,比如你是从jQuery Mobile的主题c的样式文件中复制的,则可以将主题命名为Z,则复制过来的内容中,比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z,如此类推。
改变新建立的自定义主题的颜色和CSS文件。
最后,需要在页面中,应用新定义的主题样式,如下:
<div data-role="page" data-theme="z"></div>
6、使用自定义字体
在移动Web应用中,有的时候需要更换字体,这样的话,可以通过使用@font-face方法实现,并且性能是十分好的。具体关于@font-face的使用,请参考http://www.sitepoint.com/the-fontface-jquery-plugin/这篇文章。
7、创建一个没有文本只有图片的按钮
有时,可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本,设置data-iconpos="notext",例如:
<a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>
8、打开一个无需使用Ajax页面过渡的超链接
如果不需要使用Ajax打开一个页面的链接,可以设置链接的rel属性,如下:
<a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
9、移除项目列表中的箭头
默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在想要移除列表项设置data-icon="false"。
<li data-icon="false"><a href="contact.html">Contact Us</a></li>
10、设置页面的背景颜色
怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,需要在body元素中设置背景颜色,但是用jQuery Mobile框架,需要设置在ui-page类中。
.ui-page{ background:#eee; }
发表评论
-
『Google发布移动Web性能工具PCAP Web Performance Analyzer』
2015-01-06 14:17 2181http://t.cn/RZcCwZS 最近,Google的 ... -
(收藏)在WebView中如何让JS与Java安全地互相调用
2014-11-11 09:59 830在WebView中如何让JS与Java安全地互相调用 http ... -
android中的两端对齐
2013-02-08 18:58 3096在android中的webview中,可以对文本内容进行对 ... -
Android中使用log4j
2012-10-09 20:22 18270如果要直接在android工程中使用log4j,是有点问题 ... -
收集android的三个小tip
2012-08-25 11:24 2118收集android的三个小tip 1)Android 开发中 ... -
andorid中的html.fromhtml方法
2012-08-19 21:24 8797在android中,有一个容易遗忘的Html.fromht ... -
一个不错的sencha touch MVC教程分享
2012-08-18 10:06 2836http://blog.csdn.net/fyq891014/ ... -
jquery mobile中的按钮大集合
2012-08-14 22:17 3908本文小结了jquery mobile ... -
Andrid中的plurals
2012-08-10 19:29 1717在Android中的字符串资源中,今天留意到一个很特别的东 ... -
Android中listview中的button
2012-08-08 12:56 1947在androd中的listview中,假如每一项是个buu ... -
如何有更好的Android应用创意--从一款新Android应用说起
2012-07-20 14:23 5670现在这个年头,Android ... -
android中判断网络是否连接
2012-07-12 23:19 2897在android中,如何监测网络的状态呢,这个有的时候也是十分 ... -
android中设置手机的语言系
2012-05-19 15:55 2726adb shell 进入Android的Shell,输入以下命 ... -
android 按钮设计中state_selected属性
2012-05-15 22:33 8432在android中,如果搞几个tab,然后想做到当移动到某个T ... -
android中从图库中选取图片
2012-05-11 21:03 10253在android中,如何从图库gallary中挑选图片呢, ... -
android 模拟器中启用相机API支持
2012-05-10 22:37 3156android 模拟器中启用相机支持,否则如果应用中用到相关的 ... -
(转)向android模拟器打电话发短信的简单方法
2012-04-13 13:00 1951http://blog.csdn.net/pku_androi ... -
android 中让activity全屏幕显示
2012-04-12 09:06 1656android 中让activity全屏幕显示,这是一个小ti ... -
在Android中加入GOOGLE统计系统
2012-03-31 20:43 3418Google的统计分析系统,不仅在传统WEB统计中应用很广 ... -
android中屏蔽软键盘的方法
2012-02-16 12:59 4607在有些应用和场景中,需要屏蔽软件盘,有如下两种方法 1 ...
相关推荐
jQuery Mobile常用开发技巧,这里有最全面的技术描述,有最底层的技术指导。
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
jQuery mobile常用的相册模式
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
jQuery mobile相册的一种样式
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。...
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的...
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框
本资源以Hello Word为例,里面包含了jQuery Mobile框架所需要的部署文件。
jQuery Mobile是jQuery在手机和平板设备上的版本,用于创建针对智能手机和平板电脑的跨设备Web应用。 jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery Mobile...
jQuery mobile滑动式的标题导航
jQuery Mobile快速入门.pdf
jquerymobile是用于创建移动 Web 应用的前端开发框架,此资源包含了几套jquerymobile的模板,供新手学习。
jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位