请使用firefox,chrome等最新浏览器浏览本站。

Jquery mobile新手问题总汇 三

js+jquery 阿豹 371次浏览 0个评论 扫描二维码
jquerymobile官网http://jquerymobile.com
15 点击屏幕,header和footer会略微抖动?

问题描述:

在真机运行的时候,轻击屏幕会发现header和footer有略微的抖动。

解决办法:

在header和footer中添加如下属性:

data-tap-toggle="false"

添加这个属性也可以解决点击屏幕header或footer消失问题。

 

16 jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角

1、图标定位 data-iconpos

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

2、隐藏图片上的文字 data-iconpos=”notext”

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

3、自定义图标 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中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18×18像素的PNG-8图标,并且保存为Alpha透明度。

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

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

4、去除按钮阴影/圆角

data-shadow=”false”
data-corners=”false”

17 jqm组件显示正常,但是小图标是“空的”,没有正常显示

问题描述:

例如header中的返回按钮,按钮的显示和功能都正常,但是按钮上的“返回小图标”没有显示。

解决办法:

这是由于没有引入jqm的图片文件引起的,解决方法是在jqm的资源包里找到images文件夹,并把images文件夹引入自己的项目,与jqm的css文件放在同一级目录里。


喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到