1

我正在处理一些旧代码，但遇到了一个有点令人费解的问题。我有一个包含大约 5 个项目的下拉列表。如果列表有可以正确打开的区域，一切都很好（在现有内容上作为弹出窗口打开）。但是当没有（由于屏幕尺寸/方向）时，我会看到列表显示但背景为黑色。是否有某种方法可以强制打开列表，就像第一个选项中的空间一样？

<div  style="font-size: smaller">
   @Html.DropDownListFor(m => m.SelectedContext, new SelectList(Model.Contexts, "ContextID", "Label")
    , new { id = "select-choice-1", @class = "contextmenu", data_theme="c" , name = "select-choice-1", data_native_menu="false" })
</div>

使用 jquery 1.8.3 和移动 1.3.2

编辑：当有问题的情况发生时，我可以看到以下元素神奇地出现。

<div data-role="dialog" id="select-choice-1-dialog" data-theme="c" data-overlay-theme="a" tabindex="0" class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" data-url="select-choice-1-dialog" style="min-height: 190px;">
<div role="dialog" class="ui-dialog-contain ui-overlay-shadow ui-corner-all">
...
4

2 回答 2

0

希望我理解你的问题...

不幸的是，这种行为是内置的 jquery 移动框架。当项目数大于屏幕大小时，会打开一个新页面，用于显示所有项目。

你可以在这里阅读这个！

从文档中提取（上面的链接）

当在设备屏幕上显示的选项太多时，框架将自动创建一个新的“页面”，其中填充了选项的标准列表视图。这允许我们使用设备中包含的本机滚动来移动长列表。标签内的文本用作此页面的标题。

就我而言，我避免使用自定义下拉菜单，并使用来自设备的本机。如果要设置原生，只需更改 data-native-menu='true'

data_native_menu="true"

希望有所帮助，

于 2013-08-14T13:04:49.840 回答
0

感谢 MartinOnTheNet 的出色指导。

问题是由于使用此 div 的脚本上的 .live() 函数由于某种原因造成了混乱。将页面上的所有 .live() 更改为 .on() 函数。像下面这样的东西；

$(#pageDiv).live('pagecreate', function (event) {
    $(".contextmenu").change(function () {
    ...

到;

$(document).on('pagecreate','#pageDiv', function (event) {
    $(".contextmenu").change(function () {
    ...

还使用了 allowSamePageTransition: true，如下所示。$.mobile.navigate 也可以，但后来我失去了返回功能。

$.mobile.changePage("../Controller/Action?ItemID=" + $("#select-choice-1").attr("value"),
{
   allowSamePageTransition: true
});

什么没用；

  • 强制定向。
  • 强制屏幕尺寸大于下拉菜单
  • 列表大小摆弄覆盖属性，将事件添加到
  • .live("ready"...用 live 或 bind ( ,...)覆盖的任何内容
  • $(#pageDiv).die()杀死所有绑定事件
  • 还有一些更被遗忘的奇怪编码实验
于 2013-08-16T11:56:18.367 回答