2012-11-12 37 views
1

的mobiscroll文档指出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,而我正在使用最新版本。

也许这个问题与版本有关?或者还有其他的东西在玩吗?我非常感谢任何帮助。

回答

2

我想通了。这一切都在

inputClass:i-txt 

位在滚动器选项设置。在演示代码中,他们可能通过脚本根据选项对象中显示属性的值通过脚本与该类一起玩。重点在于 - 为了在滚动条显示设置为“内联”时使原始选择消失,您必须定义i-txt(或您使用的任何输入类)为

.i-txt{display:none}