jquery-mobile - jquery mobile 1.4 alpha 2，带按钮的图标

Question

我想在左边有一个图标，在右边有一个文本，不使用按钮标记，而是使用 div 或 span。

我在文档中看不到如何做到这一点，我尝试这样做：

<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="left">Left</a>

用 div 或 span 替换 a 标签，但不显示任何图标

jsbin

Answer 1

在我的最后：

<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="left">my text</a>

还有这个

<div href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="left">my text</div>

生成一个带有图标的按钮。Firefox 和 Chrome 都试过了。请参阅此处： http: //jsbin.com/eVaGisA/5/（更新链接已停止工作，现在应该可以了）

你确实需要data-role="button"标记。如果您阅读此处的文档，它会说：

基于输入的按钮、工具栏中的链接和按钮元素是自动增强的，不需要数据角色。

因此， a divanda元素确实需要它。

更新 2 - 将自定义图标应用于可折叠标题的情况

对于可折叠标题，jquery mobile 提供了 data-collapsed-icon 和 data-expanded-icon 属性。用例如下：

<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" >
   <h3>Header1</h3>
   <p>Content 1</p>
   <p>Content 2</p>
</div>

jsfiddle 演示