`
banxi1988
  • 浏览: 153748 次
  • 性别: Icon_minigender_1
  • 来自: 桂林
社区版块
存档分类
最新评论

[翻译学习]JQuery Mobile按钮之基本按钮!

阅读更多
(为什么代码不能高亮显示???)
一:基本按钮:
按钮通常用标准的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
0
0
分享到:
评论

相关推荐

    jquery mobile css3手机表单页面布局按钮样式

    例如,你可以使用 `&lt;a&gt;` 或 `&lt;button&gt;` 标签,加上 `data-role="button"` 属性来创建一个基本的jQuery Mobile按钮。 CSS3 在这里的作用是进一步增强按钮的视觉效果。比如,你可以使用 CSS3 的渐变、阴影、边框半径...

    jQueryMobile-HTML5模板

    1. **基础模板**:包含最简单的页面结构,适合学习jQuery Mobile的基本页面元素和布局方式。 2. **导航模板**:演示了如何使用jQuery Mobile的导航栏和下拉菜单,实现多级导航。 3. **表单模板**:展示了各种表单...

    JqueryMobile 开发背景按钮小图标资源

    jQuery Mobile 提供了一套完整的按钮样式,这些样式不仅包含了按钮的基本颜色、形状和阴影,还包括了内建的小图标。这些图标可以增强按钮的功能表达,使用户更容易理解和操作。例如,一个带有向上箭头的图标可能代表...

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制

    jquerymobile设计完整例子

    学习这个例子,开发者可以快速掌握jQuery Mobile的核心功能,从而高效地开发出适应各种移动设备的交互式应用。无论是新手还是经验丰富的开发者,都能从中受益,提升其在移动Web开发领域的技能。

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    jQuery mobile滑动式的标题导航

    首先,我们需要在HTML文档中设置基本的jQuery Mobile结构,包括`&lt;div data-role="page"&gt;`,其中包含header、content和footer等部分: ```html &lt;!DOCTYPE html&gt; , initial-scale=1"&gt; ...

    jQuery Mobile实战源码

    这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的应用。 首先,jQuery Mobile的核心是它的触控优化的事件处理和UI组件。在源码中,你可以看到如何通过这些组件创建响应式...

    jQuery Mobile 快速入门

    访问 jQuery Mobile 官方网站 (https://jquerymobile.com/),在下载页面中可以选择适合项目的版本进行下载。 **使用 npm 安装:** 如果你的项目已经集成了 npm,可以直接使用以下命令来安装 jQuery Mobile: ```...

    jquerymobile学习小项目

    这个项目旨在帮助新手快速入门 `jQuery Mobile` 的使用,了解其基本结构、组件和事件。 1. **jQuery Mobile 基础** - `jQuery Mobile` 通过使用统一的 `data-*` 属性和 CSS 类来增强 HTML 元素,实现跨平台的触摸...

    jqueryMobile插件仿iPhone滑动出现删除按钮

    本篇文章将详细探讨如何利用jQuery Mobile插件来实现一个仿iPhone滑动出现删除按钮的功能,这一功能在很多移动应用中常见,例如邮件、联系人或任务管理器。 首先,我们需要理解jQuery Mobile的核心概念。它基于...

    jquery mobile官方git资源

    “jquery mobile官方git资源”中包含的官方文档是学习和开发的宝贵资料。文档详细介绍了jQuery Mobile的各种组件、事件、API和最佳实践,帮助开发者了解如何有效地利用这个框架。示例部分则提供了各种实际应用,涵盖...

    jQuery Mobile快速入门.pdf

    - **官方文档**:jQuery Mobile 的官方文档是非常全面的学习资料,覆盖了所有核心功能和用法。 - **论坛与社区**:加入相关的论坛和社区,可以获取最新的资讯和技术支持。 - **案例研究**:学习他人的项目案例,可以...

    jQuery mobile 开发案例

    5. **自定义组件**:如果有的话,学习如何扩展 jQuery Mobile,为项目创建自定义组件。 通过研究这个案例,无论是初学者还是有经验的开发者,都能更深入地理解和掌握 jQuery Mobile 的工作原理和使用技巧,从而提升...

    jQuery mobile开关式按键

    在IT领域,jQuery Mobile是一个广泛使用的前端框架,用于构建响应式和触摸友好的移动Web应用程序。这个框架提供了许多UI组件,使得开发者可以轻松地创建出与原生应用体验相媲美的网页应用。其中,“开关式按键”...

    JqueryMobile课件源码

    jQuery Mobile 提供了一系列美观的表单组件,如输入框、按钮、下拉菜单、开关等。这些组件不仅提供了视觉上的优化,还增加了对触摸事件的支持,使得在移动设备上填写表单更加友好。 ### 七、可滚动区域和网格布局 ...

    jQuery mobile库包及例子

    在这个例子中,`&lt;a&gt;` 标签添加了 `data-role="button"` 数据属性,jQuery Mobile 会将其转换为一个样式化的按钮。 ### 路径配置 正如描述中提到的,引用这些库文件的路径需要正确设置。如果这些文件与 HTML 页面...

    用jquery mobile编写的一个购物商城,可以实现基本的购买功能.zip

    本文将深入探讨一个使用Jquery Mobile技术构建的简易购物商城系统,该系统具备基本的购物功能,适合作为学习项目或期末作业提交。 Jquery Mobile是一款轻量级的前端框架,它为移动设备提供了丰富的用户界面组件和...

    jqueryMobile入门练习项目

    本项目是针对初学者的一个实践教程,旨在帮助开发者快速掌握 jQuery Mobile 的基本用法。 ### 一、jQuery Mobile 概述 1. **基础结构**:jQuery Mobile 使用数据属性(data- attributes)和页面结构来增强HTML元素...

Global site tag (gtag.js) - Google Analytics