带有图像的 Jquery 移动自定义菜单

Question

您好，我正在尝试在 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;}

但就像我说的那样，它在切换条目时不会显示背景图像。喜欢这里：

Answer 1

当您将data-native-menu="false" 添加到select 时，jQM 会根据option 的数量以及视口的数量将其转换为popup 或dialog高度。

popup 或 dialog 接收到 select 的 id，但还有一个额外的 listbox。所以新的id 是select-custom-1-listbox。 options 被转换成 listview li 元素

<li>
  <a href="#" class="ui-btn">German</a>
</li>

解决方案 - CSS：

#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;
}

Demo

---

解决方案 - JS

将类添加到popupbeforeposition 上的li 按钮。此事件在 popup 可见之前触发。在那个阶段，向两个按钮添加类，但一次只添加“.one()”。

$(document).one("popupbeforeposition", "#select-custom-1-listbox", function () {
    $("li a:eq(0)", this).addClass("german");
    $("li a:eq(1)", this).addClass("belgium");
});

Demo