`

JQM自定义箭头图标

阅读更多
在使用Jquery mobile列表时,碰到li里存在a元素的时候,系统会在最后添加一个图标,现在需要自定义该图标:
复写ui-icon-,后面加上图标名称
.ui-icon-arrow{
    background-image: url("../img/ic_arrow.png");
    background-position: 0px 0px;
    -moz-background-size:8px 20px;
    -o-background-size:8px 20px;
    -webkit-background-size:8px 20px;
    background-size:8px 20px;
    border:0;
    border-radius: 0; /*图标形态,0=方形,默认圆形*/
    background-color:transparent;
}


然后设置data-icon="arrow",arrow就是你的图标名称
<ul data-role="listview" data-inset="true" data-count-theme="a">
       <li data-icon="arrow" data-iconshadow="false" ><a style="padding:16px;font-weight:normal;" href="#">Email: <span id="email" class="ui-li-count">10</span></a>    </li>
			    
</ul>



或者加个after试试:
.ui-icon-arrow_r:after {
    background-image: url("../img/icon_arrow_r.png");
    background-position: 4px 4px;
    background-size: 70%;
	border:0;
    border-radius: 0; /*图标形态,0=方形,默认圆形*/
    background-color:transparent;
}



HTML5画布(CANVAS)速查简表
http://www.webhek.com/misc/html5-canvas-cheat-sheet/
分享到:
评论

相关推荐

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery Mobile

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位

    jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

    你可以通过`data-role="none"`来防止jqm自动处理某个元素,如果你需要自定义表单的行为。表单提交通常会触发页面跳转,但你可以通过添加`data-ajax="false"`阻止这一行为,从而实现Ajax提交。 4. **jqm的ajax使用**...

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能

    jqm中文时间控件

    此外,控件可能还提供了自定义配置选项,如改变时间格式、设置初始值或限制可选时间范围等功能,以满足不同应用场景的需求。 为了更好地定制和扩展这个控件,开发者可以查阅插件的文档,了解如何调用其API方法,如...

    jqm开发的音乐播放器

    综上所述,"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性,也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...

    JQM1.4.5-DEMOS:JQM 移动演示 1.4.5

    4. **可自定义的组件**:包括下拉菜单、滑块、开关、按钮、列表视图、网格布局等,都可以根据需要进行定制和扩展。 5. **表单支持**:提供了对各种表单元素的增强,如日期选择器、滑块输入、多选框等,使得在移动...

    sample101:示例 jqm 模板

    4. **定制主题**:根据需求修改默认的主题,可以使用 jqm 的 ThemeRoller 工具自定义颜色和样式。 5. **测试与调试**:在不同设备和浏览器上进行测试,确保兼容性和性能。 【sample101-master 项目详解】 "sample...

    jqm-demo.rar

    http://blog.csdn.net/chelen_jak/article/details/19397569 源码

    jqm chart 图表

    jqm charts提供了丰富的自定义选项,包括颜色、标签、动画效果等。同时,图表支持触摸事件,如点击、滑动等,使得用户可以直接与数据交互。例如,可以添加点击事件监听器来显示详细信息或执行其他操作。 **6. 性能...

    JQM实战源码

    3. **列表视图(Listview)**:`&lt;ul data-role="listview"&gt;`可以创建具有分隔线、图标和可点击子项的列表。 4. **页眉(Header)与页脚(Footer)**:通过`&lt;div data-role="header"&gt;`和`&lt;div data-role="footer"&gt;`...

    websocket+jqm

    `src`目录可能包含自定义的JavaScript和CSS文件,用于扩展或定制WebSocket和jQuery Mobile的功能。`views`目录可能存放了其他的HTML视图页面,每个页面可能对应不同的功能模块。`libs`目录则可能包含jqPlot和其他...

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全下载后评论反积分! jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整...

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    24时区APK+源码, android+JQM

    标题 "24时区APK+源码, android+JQM" 提供了一个关于Android应用程序开发的项目,其中结合了Java和jQuery Mobile(JQM)技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面,并且通过JQM...

    jqm+ phonegap编写的联系人

    《jqm+ PhoneGap构建联系人管理应用》 在移动应用开发领域,jQuery Mobile(jqm)和PhoneGap是两个非常重要的工具。本项目利用jqm的UI框架和PhoneGap的混合应用特性,构建了一个简单的联系人管理应用,旨在帮助用户...

    jqm4gwt-standalone-1.3.5.zip

    【jqm4gwt-standalone-1.3.5.zip】是一个开源项目的压缩包,主要结合了jqm4gwt库与jQuery Mobile的所有依赖项,适用于GWT(Google Web Toolkit)开发。这个版本是1.3.5,意味着它是经过多次迭代和优化后的稳定版本。...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    jQM:jQM文档的免费社区应用程序的源代码-app source code community

    标题"jQM:jQM文档的免费社区应用程序的源代码-app source code community"表明这是一个关于jQM(jQuery Mobile)的项目,它是一个免费的社区应用程序的源代码。jQM是一个用于构建响应式移动Web应用的前端框架,主要...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf

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

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

Global site tag (gtag.js) - Google Analytics