对jquery mobile来说,使用data-icon属性配置,可以设置元素的图标。图标没有变成右箭头,而是如下图所示:

//已经设置了图标  ,data-icon="home" data-iconpos="top"
<div class="ui-block-a"><a href="#" data-icon="home" data-iconpos="top" data-theme="a" data-role="button">首页</a></div>

而且是无论我怎么添加data-icon到任何元素上面,都是没有图标显示,最后发现,由于jquery mobile是使用CSS 3来渲染UI的,需要有一个图片集,

解决步骤:

1、下载。从下载的官方jquery mobile包里面,找到图片如下:

2、拷贝images文件夹到项目文件夹下。

目录结构如下:

icon图片需要与jquery mobile 的css文件在同一目录底下的images文件夹中,原因从jquery.mobile-1.3.1.min.css中可以看出:

在我的工程中,目录添加如下:

这样,jquery mobile就会自行去找到data-icon定义的图标,成功看到了图标:

原文:jquery mobile中图标不显示问题 - yangjun19890825的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/wlsyn/article/details/9969487

jQuery Mobile 图标无法显示的更多相关文章

  1. jQuery Mobile 图标

    jQuery 图标 如需在 jQuery Mobile 中向按钮添加图标,请使用 data-icon 属性: <a href="#anylink" data-role=&qu ...

  2. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  3. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  4. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  5. jquery mobile 自定义图标

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

  6. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  7. 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  8. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  9. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

随机推荐

  1. C#程序中:如何向xml文件中写入数据和读取数据

    xml文件作为外部信息存储文件使用简单,方便,其结构和表格略有相似,下面简单的说一下xml文件内容的读取 …… using System.Xml;using System.IO;namespace W ...

  2. struts2 package元素

    <package../>元素         name         必选    包名         extends     可选    继承         namespace    ...

  3. 从网页psd到html的开发

    从网上下载了一张psd的网页设计稿,初学html+css,所以记录一下我的学习过程.原图是这个样子:             原图                                   ...

  4. 从Image Caption Generation理解深度学习

    0. 前面的话 建丁让我写一篇深度学习相关小文章,目标读者是国内的开发者.刚接到这个任务时我是颇为忐忑的,写文章要讲究厚积薄发,如果“水之积也不厚”,“则其负大舟也无力”.因为我自知水平很有限,又不是 ...

  5. configure: error: Cannot find libmysqlclient under /usr Note that the MySQL client library is not bundled anymore! 报错解决

    错误说明 今天在centos 6.3 64位版本上安装PHP5.4.3时在./configure 步骤的时候出现了下面错误configure: error: Cannot find libmysqlc ...

  6. MongoDB在windows服务器安装部署及远程连接MongoDB

    (.\是表示在服务器的windows powershell下需要 表示信任此命令才会执行不然会报错,自己电脑上使用时可去掉.\) 在本地使用都不需要开启权限而在服务器上需要开启安全模式所以需要在原本的 ...

  7. struts2中的标签“# ”,“%{ }”,“%{# }”

    理解值栈(ValueStack)与上下文(StackContext):            Struts2中有值堆栈和堆栈上下文的概念,你用 <s:debug />可以看出. 值栈中的对 ...

  8. 如何查看Windows下端口占用

    查看端口占用的PID进程号 C:\Users\yan>netstat -ano | findstr "8888" 查看是哪个进程或者程序占用了17840端口 C:\Users ...

  9. nodejs服务

    http://www.csser.com/board/4f55035305ee2e572400005e http://blog.fens.me/nodejs-server-forever/ http: ...

  10. 【转】不同VLAN之间相互通信及VTP、STP、EtherChannel概念

    厘清最后一个概念. 转了网上两个相关帖子: http://www.net130.com/CMS/Pub/Tech/tech_zh/2009_03_12_97386_3.htm http://blog. ...