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/

猜你喜欢

转载自gundumw100.iteye.com/blog/2090083
今日推荐