使Mobiscroll高度和寬度響應

使用Mobiscroll，高度和寬度在原始JQuery實現中設置。當屏幕大小發生變化時，我目前的寬度和高度會隨着CSS @media查詢而改變。我想知道是否有原始JQuery實現方式。使Mobiscroll高度和寬度響應

我的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的實現。

謝謝！

來源

2012-11-01 Desmond

您可以通過獲取屏幕寬度由.width()

$(selector).width(); //get the width you want 
$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document

來源

2012-11-01 03:20:22

非常好，感謝您的幫助NullPointer。我已經發布了我的最終代碼作爲答案。 – Desmond

@Desmond非常歡迎.... ;-) –

再次感謝您對此的回覆，它運作良好。我現在遇到的問題是在您更改手機方向時更改尺寸。整個網站使用@mediaqueries調整大小，但由於高度和寬度都是在Javascript中設置的，因此在刷新瀏覽器之前它不會調整大小。這是一個解決方案嗎？再次感謝 – Desmond

我解決了這個問題做到這一點，這裏的最終代碼：

// 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(); 
     } 
    });

來源

2012-11-02 01:35:46 Desmond

這裏是我做了關於調整的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（沒有太大的不同ENT比你）在媒體查詢來調整字體大小（「TD .dwwr」不是在媒體查詢）：

.dww li { 
    font-size: 3.25em; 
    } 
.dwwr td { 
    padding: 0; 
}

我用類似你們代碼用於初始化的寬度和高度。

我不確定.eq（0）是什麼，我不記得我在哪裏看到別人這樣做，但它的工作原理......唯一的問題是，在一些舊手機上它似乎在一些方向改變後，放慢速度並最終使手機的瀏覽器崩潰。

注：我認爲寬度和高度屬性是爲一個滾動條，因此「/ 4」。由於有3個滾動條，如果我將寬度除以4，它應該始終適合頁面並考慮填充和邊距。

在他們documentation不存在與「.EQ（0）」

編輯爲例：

Here是在那裏我看到了「.EQ（0）」的東西。

編輯：

在這個post我找到一種方式來獲得的方位變化更好的工作。

來源

2012-12-03 16:46:21 Soenhay

謝謝Soenhay。我原來的版本在改變方向時效果不好，所以我會給你一個去！ – Desmond

這種方式也有它的問題：http：// stackoverflow。COM /問題/ 13710834 /問題與 - mobiscroll-orientationchange和存取的地址欄，崩潰，一些 – Soenhay

使Mobiscroll高度和寬度響應

回答

相關問題