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

Question

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

我在doc看不到怎么做，我试着这样做：

<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"标记。如果您阅读documentation here，则会说：

  

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

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

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

对于可折叠标题，jquery mobile提供数据折叠图标和数据展开图标属性。用例如下：

<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 Demo