2

有没有办法（可能使用phoneGap）为一组元素引入本地移动下拉选择器？

例如，有人点击进入列表：

<ul class="dropdown">
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Apples</li>
    <li>Pears</li>
</ul>

并且这组元素会在原生 iOS 下拉选择器中弹出，您可以单击其中一个吗？我正在谈论的下拉列表可以在这里看到：

iPhone 选择下拉菜单

我意识到您必须随后调用其他一些本机函数来获取实际选择的返回值并使用该信息“做某事”。

<ul>我问的原因是因为我有一个使用和元素创建的自定义选择选择器<li>，所以选择/下拉框是完全可定制的，我对它的工作方式很满意，但在移动版本上，长下拉菜单不像用户友好的本地选择器。

4

2 回答 2

1

我知道这个问题已经很老了，但我只是在一些类似的问题上苦苦挣扎。到目前为止，移动浏览器无需任何额外的 JS 即可支持这些原生控件元素（我不确定去年移动设备是否有相同的支持）。

所以你可以做的是以下。首先，您使用选择框建立一个列表：（当然它也适用于单个选择框）

 <ul>
    <li>
        <select class="dropdown" name="fruits">
            <option value="Bananas">Bananas</option>
            <option value="Oranges">Oranges</option>
            <option value="Apples">Apples</option>
            <option value="Pears">Pears</option>
        </select>
    </li>
    <li>
        <select class="dropdown" name="cities">
            <option value="Arizona">Arizona</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Conneticut">Conneticut</option>
        </select>
    </li>
</ul>

然后应用一些自定义样式使其看起来像原生 UI：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown {
    border: 1;
    padding: 3px 5px;
    width: 100%;
    /* attach a custom background image */
    background: url('http://dummyimage.com/15x15/00ff40/000&text=^') no-repeat right     center #FFF;

    /* prevent the default small pointer from showing up */
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

而已。在 JSBin 上工作的现场演示（使用 iOS 7 进行测试，但也应该在其他现代移动浏览器中工作）。

于 2014-02-17T18:09:52.927 回答
0

您可以使用一些 Javascript 库，例如 Mobiscroll；查看他们的演示。

请注意 Mobiscroll 服务仅在 15 天内免费，因此请测试一下。

于 2013-01-24T04:20:36.647 回答