jquery mobile学习总结-图标（ui设计师）

一、图标

1.图标太丑-替换使用自己的图标

<!-- html -->

<div class="ui-btn ui-btn-inline ui-shadow-icon ui-btn-icon-left  ui-icon-myicon">
    按钮
</div>

<!-- css -->

.ui-btn-icon-left:after{
   background-color: #fff;
 }
.ui-icon-myicon:after{
   background-image: url("image/arrow4.png");
 }

2.类是属性

定位：ui-btn-icon-left（左边）   ui-btn-icon-right（右边）ui-btn-icon-top（上边）ui-btn-icon-bottom（上边）

3.只有图标没有文字的按钮

<a href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext">Delete</a>

4.用于UL或OL更改为每个列表项的黑色图标的类的示例。

<ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

5.折叠图标

<div data-role="collapsible" class="ui-nodisc-icon ui-alt-icon">
    <h4>Heading</h4>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>