您好我正在尝试使用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;}
但就像我说它在切换条目时没有显示背景图像。像这里:
答案 0 :(得分:4)
将data-native-menu="false"
添加到select
时,jQM会根据{{1}的数量将其转换为弹出或对话框以及视口的高度。
弹出或对话框会收到option
的{{1}},但会收到额外的id
。因此新的select
是listbox
。 选项将转换为 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 强>