(为什么代码不能高亮显示???)
一:基本按钮:
按钮通常用标准的HTML锚或者input元素实现,然后经过jQuery Mobile的强化之后,在手机上有更多吸引人的交互及可用性。使用一个链接锚(如a标签)来标记一个导航按钮,一个input或者button元素来标识一个表单提交。通过查看
data-attribute reference来查看可以增加到按钮上的属性。
二:按钮样式的链接
在主内容块中,你可以为链接添加属性data-role="button"来使它的样式像一个按钮。框架会强化这个标签给他加上标记及类属性,例如下面的标签:
链接按钮
会产生如下的按钮:
(官网去看吧!)
像按钮一样的链接样式跟基于表单的的按钮有所以相同的选项。但它们有几点不同。基于链接的按钮不是不是按钮插件的一个部分。而仅仅是使用buttonMarkup插件来产生按钮样式所以不支持表单按钮(enable,disable,refresh)等事件。
如果你需要禁用一个基于链接的按钮,你需要自己为为其加上ui-disabled类属性。用javaScript来达到同样的效果。
三:表单按钮
为了方便应用样式,框架会自动将任何一个有submit,reset,button或者image类型的button或者input元素转换为一个自定义样式的按钮,,没有必要添加data-role="button"属性。然后如果你需要你可以直接在任何选择器中调用button插件,就好比其它的jQuery 插件:
$('[type='submit']').button();
为了截断绑定到button或者input上的原始事件,框架会隐藏原来的元素使它透明并用新的按钮标签覆盖。当用户点击自定义按钮时,他们实际上在点击原始的元素。为了避免一个元素被转换为一个加强型的按钮,添加data-role="none"属性。然后就会使用使用的控件渲染了。。
三:为按钮添加图标
jQuery Mobile框架包括了一系列手机应用最常用的图标。为了减少最小的下载尺寸,jQuery Mobile包含了一个单独白色的图标集,自动添加一个语义透明的黑色背景圆圈,可以确保在任何背景下它的高对比度。
一个图标可以添加到按钮上,只要添加一个data-icon属性即可。
在一个锚上指定一个用于显示的图标,标记如下:
Delete
图标集:
可用在data-icon属性的值如下:
arrow-l,arrow-r,arrow-u,arrow-d,delete,plus,minus,check,gear,refresh,forward,back,grid,star,alert,info,home,search
图标位置:
默认的情况下所以的图标都在按钮文字的左边。你可以用data-iconpos来覆盖默认值。
可以选择的值如下:
left,right,above,top,below,bottom,notext。注意位置都是相对于文字的。其中above和top一样。
bottom和below一样。
notext可以用来创建一个没有文字的图标
四 自定义图标:
为了使用一个自定义图标,先为data-icon指定一个唯一的名字如"myapp-email"然后button插件将会产生一个以ui-icon为前缀的类属性作为data-icon的值,即ui-icon-myapp-email。
然后你就可以在你的样式文件中为ui-icon-myapp-email写样式了。
为了与其它的图标保持一致将使用PNG-8格式及带alpha透明,颜色为白色,大小为18*18。
在这个示例中,我们仅仅将它指向一个单独的图标文件,但是你可以使用sprite来指定位置。如我们在框架中使用sprite中一样。
[code=css]
.ui-icon-myapp-email{
background-image:url("app-icon-email.png");
}
这将会创建一个标准的分辨率的icon,但是很多设备但是有很高的分辨率的显示屏。如retina显示屏。添加一个HD图标,创建一个36*36的像素(刚好是18像素的两倍大小。
添加第二条CSS规则使用-webkit-min-device-pixel-ratio:2 媒体查询一个目标规则,仅针对一个高分辨率的显示设备。为HD图标指定一个背景图片。设置background-size为18*18。将会使36*36填充18含像素大小的空间。
媒体查询语句块可以包含多个CSS规则。如下:
[code=css]
@media only screen and(-webkit-min-device-pixel-ratio:2){
.ui-icon-myapp-email{
background-image("app-icon-email-hghres.png");
background-size:18px 18px;
}
/* more css rules**/
}
五 图标与主题(Icon and themes):
在语义透明的黑色圆圈来保证在任何背景中都有好的对比度,所以它与jQuery Mobile的主题系统很适应。下面是一些示例,在不同swatch下的图标样式。
(到官网去看吧。!)
六 内联图标(inline buttons)
在默认情况下,所有在主体内容部分像会以块级元素来样式化,所以它们将与设备屏幕有相同的宽度。
然后,如果你想要更紧凑的按钮,刚好只有文字及图标的宽度。添加一个data-inline="true"属性就可以了。
如果你要几个按钮并排就请给每个图标加上data-inline="true"的属性。
如果你图标并排着但占满整个屏幕。你可以使用
content column grids来将按钮
放置到2或3个列中。
七:一组按钮
有些情况下,你可能需要将可见的一组按钮组织在一起来组成一个
单独的块像包含导航容器。为了达到这个效果,将一系列的按钮用一个带data-role="controlgroup"的容器包装起来。,框架本身会创建一个垂直在按钮组。删除所有
外边框并在按钮之间有一个阴影。仅在他们在第一个 组和最后一个按钮时有用。
下面是一个示例:
[code=html]
<div data-role="controlgroup">
Yes
NO
MayBe
</div>
添加一个data-type="horizontal"属性到controlgroup容器。
你能包装一个水平样式,按钮将一个挨一个的浮动。设置宽度,以足够大能填充所以内容。
(注意:如果按钮数大多的话或者文本长度超出了屏幕的话,将会包装成 多行。)
示例:
(到官网去看吧!)
八 主题按钮
jQuery Mobile有一个丰富的主题系统,它给你全面的控制按钮部件的样式。
当一个链接添加到一个容器中,它自动会拥有一个框架设置的主题,主题与父容器一致。
九 设置一主题样品
按钮可以添加一个data-theme属性来设置主题样式
可选的值有a,b,c,d,e
分享到:
相关推荐
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
JqueryMobile 按钮图标,各类不同的图标,省去您找图标,按钮的烦恼。
jqueryMobile插件仿iPhone滑动出现删除按钮,供大家一起共同分享学习。
jQuery mobile开关式按键,仿苹果
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介 1.1 通用访问 ...
作为jquery mobile的入门级读物,《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性,内容系统全面,便于理解。 《jquery mobile快速入门》总共分为10章,内容包括jquery mobile的基础...
jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位
第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用;第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发...
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
JQuery Mobile教程
jQuery Mobile快速入门,美国,BRAD BROULIK著,巩亚萍姚婷翻译,人民邮电出版社出版,全书10章,234页。1jquerymobile简介,2jquerymobile入门,3使用页眉工具栏和标签来导航,4表单元素和按钮
通过本书的学习,读者将会获悉jquerymobile的核心特性,以及如何创建可主题化的设计,还会掌握jquerymobile的api,以及如何使用phonegap来扩展jquery mobile。 《jquery mobile快速入门》适合想要掌握jquerymobile...
从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...
从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...
jQuery左侧圆形左右按钮多种特效幻灯片