当前位置:小鱼儿玄机二站 > 计算机网络 > 应用jQuery在活动页面上加上按键和给开关加多L

应用jQuery在活动页面上加上按键和给开关加多L

文章作者:计算机网络 上传时间:2019-09-03

创建按钮 data-role=button 给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

样式链接按钮

给链接添加data-icon 属性,可以添加按钮的图标

在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role="button" 属性。该框架将加强与标记和类的链接方式链接按钮。例如,这个标记:

html代码

<a href="index.html" data-role="button">Link button</a>

<a href=”index.html” data-role=”button” data-icon=”delete”>Delete</a>

图片 1

带有图标的按钮:

注:风格像按钮链接都相同的视觉选择的按钮下面的真正形成,但也有一些重要的差异。基于链接的按钮,按钮是插件,不仅使用基本的button标记插件生成按钮的风格,所以窗体按钮方法(启用,禁用,刷新)不支持。如果你需要禁用基于链接的按钮(或元素),它可能申请伤残等级的UI残疾人自己用java script实现相同的效果。

图片 2

图片 3

图标 Icon set


data-icon属性可以被用来创建如下所示的图标

左箭头 data-icon=”arrow-l”

右箭头 data-icon=”arrow-r”

上箭头 data-icon=”arrow-u”

下箭头 data-icon=”arrow-d”

删除  data-icon=”delete”

添加  data-icon=”Plus”

减少  data-icon=”minus”

检查  data-icon=”Check”

齿轮  data-icon=”gear”

前进  data-icon=”Forward”

后退  data-icon=”Back”

网格  data-icon=”Grid”

五角星 data-icon=”Star”

警告  data-icon=”Alert”

信息  data-icon=”info”

首页  data-icon=”home”

搜索  data-icon=”Search”

迷你版 data-mini="true"

图标组 Icon set


默认情况下,所有按钮图标出现在按钮的文本的左侧。

可以通过data-iconpos=”top” / “bottom” 属性来覆盖此默认

<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”right”>Delete</a>

一个图标在右边的按钮:

图片 4

也可以用 data-iconpos=”top”创建图标在文本上方的按钮

一个图标在文字上方的按钮:

图片 5

也可以用 data-iconpos=”bottom”创建图标在文本下方的按钮

一个图标在文字下方的按钮:

图片 6

你可以通过data-iconpos=”notext”创建一个只有图标的按钮。button插件会在屏幕上隐藏文本,但是会把文本作为 title属性作为screen readers的问容和支持小提示的浏览器, 例如,把前例中的 data-iconpos=”right”替换为data-iconpos=”notext”

<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”notext”>Delete</a>

一个只有图标的按钮

图片 7

一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性的按钮来创建一个迷你版。

自定义图标 Custom Icons

要使用自定义图标,指定一个唯一的data-icon 值(比如data-icon=“myapp-email ”)?Jquery Mobile的button插件会生成一个class值添加上去,该值由ui-icon-与data-icon的值组合而成(ui-icon- myapp-email ),然后在css中指定这个类的背景图片地址。为了保持视觉效果的一致,请使用png-8格式的白色8*18的透明图标

<a href="index.html" data-role="button" data-mini="true">Link button</a>

图标和地址 Icons and themes

在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示,也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子

“A”主题下的图标按钮

图片 8“B”主题下的图标按钮

图片 9“C”主题下的图标按钮

图片 10==================================可爱的分隔线======================================

很多时候,系统图标不能满足我们的要求,那么如何自定义导航图标?查找了很多相关资料、google、百度一番之后,发现通过id来定义是个不错的选择,看一下做好的效果,不错吧!

图片 11

Css Code:

1 .footer .ui-btn .ui-btn-inner{ padding-top:60px; }
2 .footer .ui-btn .ui-icon{width:60px;height:60px;}
3 #btn-about .ui-icon{background:url(..icon.png) no-repeat 0 50%;background-size:300px 60px;}
4 #btn-value .ui-icon{background:url(..icon.png) no-repeat -60px 50%;background-size:300px 60px;}
5 #btn-technology .ui-icon{background:url(..icon.png) no-repeat -120px 50%;background-size:300px 60px;}
6 #btn-case .ui-icon{background:url(..icon.png) no-repeat -180px 50%;background-size:300px 60px;}
7 #btn-contactus .ui-icon{background:url(..icon.png) no-repeat -240px 50%;background-size:300px 60px;}

Html Code:

查看源代码打印帮助

1 <div class="footer" data-theme="a" data-role="footer" data-position="fixed">
2 <div data-role="navbar">
3 <ul>
4     <li><a id="btn-about" href="#page1" data-icon="custom" data-transition="slide">关于</a></li>
5     <li><a id="btn-value" href="#page2" data-icon="custom" data-transition="slide">价值</a></li>
6     <li><a id="btn-technology" href="#page3" data-icon="custom" data-transition="slide">技术</a></li>
7     <li><a id="btn-case" href="#page4" data-icon="custom" data-transition="slide">案例</a></li>
8     <li><a id="btn-contactus" class="ui-btn-active" href="#page5" data-icon="custom" data-transition="slide">联系</a></li>
9 </ul>
10 </div>
11 </div>

图片 12

给按钮添加图标 data-icon jQuery Mobile框架包括一组选定的图标移动应用程序通常需要。尽量减少下载大小,jQuery Mobile包含一个单一的白色图标的精灵,和自动添加一个半透明的黑圈背后的图标来确保它有任何背景颜色对比度好。

一个图标,可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如,下面的标记:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

图片 13

迷你版 添加 data-mini="true" 属性

图片 14

图标样式列表

jQuery Mobile 自带很多按钮小图标,如下图所示:

左箭头:data-icon="arrow-l"
右箭头:data-icon="arrow-r"
上箭头:data-icon="arrow-u"
下箭头:data-icon="arrow-d"
删除:data-icon="delete"
添加:data-icon="Plus"
减少:data-icon="minus"
检查:data-icon="Check"
齿轮:data-icon="gear"
前进:data-icon="Forward"
后退:data-icon="Back"
网格:data-icon="Grid"
五角:data-icon="Star"
警告:data-icon="Alert"
信息:data-icon="info"
首页:data-icon="home"
搜索:data-icon="Search"

图片 15

图标定位 data-iconpos

默认情况下,所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方(top)、底部(bottom)、右侧(right)、左侧(left)的文本。例如,标记:

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

图片 16

隐藏图片上的文字 data-iconpos="notext"

你也可以创建一个图标按钮,设置 data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上,但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如,data-iconpos="right",data-iconpos="notext":

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

图片 17

迷你和内联

迷你和内联属性可以被添加到产生更紧凑的按钮

图片 18

自定义图标 data-icon="自定义值"

使用自定义图标,需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类,它的前缀是ui-icon- ,后面的是data-icon值。假如:有一个按钮 data-icon 属性的值为 myapp-email,即 data-icon=“ myapp-email”。那么生产的CSS类是:ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18x18像素的PNG-8图标,并且保存为Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

这将创建标准分辨率的图标,但许多设备都有非常高的分辨率的显示器,就像iPhone 4的视网膜显示器。添加一个高清图标,创建一个图标,36X36像素(18像素大小完全相同的两倍),并添加第二个规则使用WebKit分钟装置像素比例:2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}

您可能感兴趣的文章:

  • 浅析jQuery移动开发中内联按钮和分组按钮的编写
  • jQuery移动页面开发中主题按钮的设计示例

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:应用jQuery在活动页面上加上按键和给开关加多L

关键词: