css - 带有图像的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 会将其转换为 popup 或 < em>对话框基于选项的数量以及视口(viewport)的高度。

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 的按钮添加类。此事件在弹出 可见之前触发。在那个阶段，向两个按钮添加类，但一次仅“.one()”。

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

Demo