jquery mobile自定义图标的示例

环境

jquery1.9.1.js

jquery mobile 1.4.2版

图标制作

18x18px 底透明的png图标

使用图标,这个过程开始怎么弄都不行,只有个灰色的圆出现,不见图标;或者出现图标,但位置不对,经过看jquery demo,终于知道了如何使用

步骤如下

1 .当然是定义你的css图标类了

如下

.ui-icon-myicon:after {
           background-image: url("img/title.png");  /**你的图片,路径是相对于当前使用文件可以访问到的*/
     
           background-size: 18px 18px;
           border-radius: 0; /*图标形态,0=方形,不设置就是默认的圆形*/
}

关键的地方是 after ,之前不成功就是少了这个

2. 使用这个图标类

<a href="#"  class="ui-btn ui-shadow  ui-btn-icon-top ui-icon-myicon"  data-transition="slide">标题</a>

时间: 2024-09-25 15:16:26

jquery mobile自定义图标的示例的相关文章

Jquery Mobile 自定义按钮图标_jquery

很多朋友都反应jquery mobile自带的图标真的是少之又少,另外我也觉得图标偏小(系统自带的是18*18的),于是琢磨着如何自定义按钮图标,下面小编把我的方法分享给大家. 刚接触Jquery Mobile框架,遇到个很现实问题,就是如何自定义按钮图标,我觉得jquery mobile 自带的图标实在是太少了,另外我觉得图标也偏小(系统自带的应该是18*18的)下面是我的方法,希望大家踊跃拍砖. 1.第一种方法是比较简单的,但是有前提,前提就是你自定义的图标大小应该和系统内置的保持一致,这样

详解jQuery Mobile自定义标签_jquery

本文实例讲解了jQuery Mobile自定义标签,分享给大家供大家参考,具体内容如下 规划产品国际化的需求时,涉及到PC Web,移动Web,和各app.设计了多个版本的移动Web均不理想. 由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论.讨论的过程和多个方案我就不提了,先来看看最终效果:   是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下: <!DOCTYPE html> <html> <head

jQuery Mobile 自定义标签

最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app.设计了多个版本的移动Web均不理想.由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论.讨论的过程和多个方案我就不提了,先来看看最终效果: 是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下: <!DOCTYPE html> <html> <head> <title>涛哥</title> <meta n

jquery mobile两个按钮之间的距离变宽

问题描述 jquery mobile两个按钮之间的距离变宽 怎么让下面的两个按钮之间距离变宽,因为是用jquery mobile写的,所以按钮大小不改变,jquery mobile支持改动它的margin吗 解决方案 jquery mobile按钮jQuery Mobile 组件 之 按钮jquery mobile 按钮图标

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.8 技巧:指定自定义的过渡动画

9.8 技巧:指定自定义的过渡动画 假使需要不同的动画,而不是在前面的示例中提供的默认动画集,你可以引进自定义的动画.你可以使用CSS3变换(CSS3 transition)来创建平滑的硬件加速动画,包含2D和3D. 代码清单9-9提供了一个示例动画:打开新页面时旋转页面. 代码清单9-9 使用自定义CSS3变换来切换页面 00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Custom Transition&l

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15 技巧:优化header和footer以便全屏查看

9.15 技巧:优化header和footer以便全屏查看 jQuery Mobile提供了一个叫做"全屏模式"的功能.它表示,在默认情况下header和footer是覆盖在content上面的,当点击了content区时,header和footer会消失.如果你在手机上安装了Web应用程序(应用程序间有书签图标)或者当你将自己的Web应用程序与原生的Web应用程序框架(比如Phonegap)集成时,你的应用程序就可以全屏显示:没有浏览器的地址栏.工具栏以及状态栏.为了能最佳利用&qu

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.11 技巧:在页面下方添加footer

9.11 技巧:在页面下方添加footer 在到目前为止的示例中,你已经见过header和content的div了.同样地,你也可以定义footer的div.当使用footer时,你需要考虑两件事情:footer在屏幕上的位置是什么,以及在footer里面显示什么内容?代码清单9-12在页面的下方添加了一个包含几个按钮的footer. 代码清单9-12 在页面下方显示包含按钮的footer 00 <!DOCTYPE html> 01 <html> 02 <head> 0

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结

9.22 小结 本章以jQuery Mobile的基本简介开始.jQuery的这部分内容与jQuery Core和jQuery UI有所不同.它要求你将整个HTML更改为JavaScript框架容易处理的结构. 简介之后,介绍了基本的页面导航机制,包括底层的AJAX调用和过渡动画.接着,讨论了页面的基本元素,比如header和footer.有多个更改header和footer行为的选项.可以把它们设置成固定的位置,甚至在导航至别的页面时也保持不变,也可以根据需要隐藏它们. 本章的结尾有许多自定义

使用jQuery Mobile API实现细粒度的自定义控制

jQuery Mobile API 针对移动网站定制提供了另一个级别的控制.从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍.在本文结束时,您就会知道如何精细地定义您想在移动网站中使用的自定义选项,以及如何编写与 jQuery Mobile 框架进行交互的自定义代码. 本文介绍了一系列来自 jQuery Mobile 框架的有用的属性.事件和曝光的方法.在每一节中,将介绍各个选项,并提供代码样例,以说明它是如何完成的.要运行任何代码样例,您