Jquery移动自定义菜单与图像

时间:2014-05-26 21:38:01

标签: css jquery-mobile jquery-mobile-listview

您好我正在尝试使用jquery mobile中的图像构建自定义菜单。它正在工作,但如果我点击按钮切换条目图像没有显示只显示文本。

我在html端使用它:

<div class="ui-field-contain">
    <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
        <option value="german" class="german">German</option>
        <option value="belgium" class="belgium">Belgium</option>
    </select>
</div>

这在css方面:

.german {background: url(../images/flags/german.gif) 5px 50% no-repeat; padding: 5px 0 5px 55px; font-size: 16px;}
.belgium {background: url(../images/flags/belgium.gif) 5px 50% no-repeat; padding: 5px 0 5px 55px; font-size: 16px;}

但就像我说它在切换条目时没有显示背景图像。像这里:

Error

1 个答案:

答案 0 :(得分:4)

data-native-menu="false"添加到select时,jQM会根据{{1}的数量将其转换为弹出对话框以及视口的高度。

弹出对话框会收到option的{​​{1}},但会收到额外的id。因此新的selectlistbox选项将转换为 listview id元素

select-custom-1-listbox

解决方案 - CSS:

li
  

<强> Demo


解决方案 - JS

<li> <a href="#" class="ui-btn">German</a> </li> 上的#select-custom-1-listbox li:nth-child(1) a { background: url(german.png) 5px 50% no-repeat; padding: 5px 0 5px 55px; font-size: 16px; } #select-custom-1-listbox li:nth-child(2) a { background: url(belgium.png) 5px 50% no-repeat; padding: 5px 0 5px 55px; font-size: 16px; } 按钮中添加课程。在弹出可见之前会触发此事件。在该阶段,将类添加到两个按钮,但li”。

popupbeforeposition
  

<强> Demo