MobiScroll 选择预设

Question

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，而我使用的是最新版本。

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

Answer 1

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

inputClass:i-txt

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

.i-txt{display:none}