Сделайте Mobiscroll гибким по высоте и ширине

В 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.

Спасибо!


jquery css mobiscroll
person Desmond    schedule 01.11.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

вы можете сделать это, получив ширину экрана на .width()

$(selector).width(); //get the width you want 
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document
person NullPoiиteя    schedule 01.11.2012
comment
Это отлично, спасибо NullPointer за помощь. Я разместил свой окончательный код в качестве ответа. - person Desmond; 02.11.2012
comment
Еще раз спасибо за ваш ответ на это, это сработало хорошо. Проблема, с которой я сталкиваюсь сейчас, заключается в изменении размера при изменении ориентации на телефоне. Размер всего веб-сайта изменяется с помощью @mediaqueries, но, поскольку высота и ширина задаются в Javascript, он не изменяется до тех пор, пока вы не обновите браузер. Является ли это решением? Спасибо еще раз - person Desmond; 16.11.2012

arrow_upward
1
arrow_downward

Я исправил это, вот окончательный код:

// 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();
        }
    });
person Desmond    schedule 02.11.2012

arrow_upward
0
arrow_downward

Вот что я сделал для изменения размера элемента управления датой 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, она всегда должна помещаться на странице и учитывать отступы и поля.

В их документации нет примера с ".eq(0)"

Редактировать:

Здесь я увидел ".eq(0)".

Редактировать:

В этом post я нашел способ заставить изменение ориентации работать лучше.

person Soenhay    schedule 03.12.2012
comment
Спасибо, Соенхай. Первоначальная версия, которая у меня была, не так хорошо работала с изменением ориентации, поэтому я попробую вашу! - person Desmond; 05.12.2012
comment
У этого пути также есть свои проблемы: ориентация и доступ к адресной строке приводят к сбою"> stackoverflow.com/questions/13710834/ - person Soenhay; 05.12.2012