1

mobiscroll 文档状态

此预设增强了常规 HTML 选择以使用滚动条选择值。原始选择被隐藏，而虚拟输入可见。选择的值由预设保持。

他们提供的示例 HTML 代码使用内联样式来隐藏原始选择元素

<select name="City" id="select" style="display:none">

但是，当我这样做并将 mobiscroll 替换设置为内联显示时

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

我发现虽然出现了滚动条，但我最终还是得到了它上面看起来像输入元素的东西。这不会在他们的演示代码中发生，但我注意到他们所做的是这样的

<div id="select_cont" style="display: none;">
<select name="City" id="select">

但这只是隐藏了包括 mobiscroll 替换在内的所有内容。看着被子，我发现打电话

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

在 DOM 中引入了一个虚拟输入元素。

<input id='cities_dummy'...

我可以通过发出一个来让假人隐藏自己

$('#cities_dummy').css('display','none')

创建滚动条后立即。但是，我无法理解为什么演示代码中的工作方式有所不同。我注意到他们使用的是 jQuery Mobile v 1.1.1，而我使用的是最新版本。

也许这个问题与版本有关？或者这里还有其他东西在起作用？我非常感谢任何帮助。

4

1 回答 1

2

我想到了。这一切都归结于

inputClass:i-txt

滚动选项设置中的位。在演示代码中，他们可能正在通过脚本使用此类，具体取决于选项对象中显示属性的值。关键是 - 为了在滚动显示设置为“内联”时使原始选择消失，您必须将 i-txt （或您使用的任何输入类）定义为

.i-txt{display:none}
于 2012-11-12T07:41:54.090 回答