使用Mobiscroll,高度和宽度在原始JQuery实现中设置。当屏幕尺寸改变时,我目前的宽度和高度随CSS @media查询而变化。我想知道原始JQuery实现是否有办法。
我的JQuery
$('ul.scroll-list select').scroller({
preset: 'select',
theme: 'ios',
display: 'inline',
mode: 'scroller',
inputClass: 'i-txt',
width: 50,
height:50,
onShow: function (html, instance) {
$("input[id$='_dummy'], .scroll-list label").hide();
}
});
我的CSS
@media only screen and (max-width: 959px) {
.ios .dww li {font-size:0.7em;}
.dww.dwrc {height:150px !important;}
}
想通过主题或一些JQuery实现知道是否有更简洁的方法。
谢谢!
答案 0 :(得分:2)
您可以通过.width()
$(selector).width(); //get the width you want
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
答案 1 :(得分:1)
我解决了这个问题,这是最终的代码:
// Add mobi scroller to fares page
var scrollWidth = $('.scroll-list li').width() - 10;
var scrollHeight = $('.scroll-list li').height();
$('ul.scroll-list select').scroller({
preset: 'select',
theme: 'ios',
display: 'inline',
mode: 'scroller',
inputClass: 'i-txt',
width: scrollWidth,
height: scrollHeight,
onShow: function (html, instance) {
$("input[id$='_dummy'], .scroll-list label").hide();
}
});
答案 2 :(得分:0)
以下是我为调整方向更改调整mobiscroll日期控件所做的工作:
function setDatePickerWidthAndHeight()
{
var scrollWidth = ($("div[id='main_content']").width()) / 4;
var scrollHeight = scrollWidth / 2.5;
var selectorBase1 = "date_1";
$("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth);
$("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight);
}
$(function () {
$(window).bind('orientationchange', function (event) {
setTimeout(setDatePickerWidthAndHeight(),100);
});
}
另外,我在媒体查询中使用与此类似的css(与你的不同)来调整字体大小(“。dwwr td”不在媒体查询中):
.dww li {
font-size: 3.25em;
}
.dwwr td {
padding: 0;
}
我使用类似于你的代码来初始化宽度和高度。
我不确定.eq(0)是什么,我不记得我在哪里看到其他人这样做但它的确有效......唯一的问题是在一些旧手机上看起来似乎很慢经过一些方向改变后,手机的浏览器崩溃了。
注意:我认为宽度和高度属性适用于一个卷轴,因此是“/ 4”。由于有3个滚动条,如果我将宽度除以4,它应该总是适合页面并考虑填充和边距。
在他们的documentation中没有“.eq(0)”
的例子编辑:
Here是我看到“.eq(0)”的东西。
编辑:
在此post我找到了一种让方向变化更好的方法。