如何在不設置寬度和高度的情況下爲列表視圖設置滾動條？

我們如何設置滾動列表視圖與設置寬度和高度？如果我設置的寬度和高度它不適合所有屏幕分辨率。所以我不想設置寬度和高度。如果列表視圖超出了四個元素，它應該設置滾動。它怎麼可能？有什麼建議麼？如何在不設置寬度和高度的情況下爲列表視圖設置滾動條？

<ul data-role="listview" id="locationList" data-dismissible="false" name="locationList" data-inset="true"> 
     <li><a>Element 1</a></li> 
     <li><a>Element 2</a></li> 
     <li><a>Element 3</a></li> 
     <li><a>Element 4</a></li> 
     <li><a>Element 5</a></li> 
     <li><a>Element 6</a></li>      
    </ul>

來源

2014-06-07 Vinod

爲了得到你的結果也有不需要添加任何類到你的UI元素
正如你可以在這個FIDDLE看，我只設置了UL標籤的高度，一個純粹的jQuery代碼解決方案時，元素超過7個自動標記變爲溢出滾動
您還有兩個按鈕用於增加或減少li標籤長度並查看腳本的執行
當您在jQuery的css方法內傳遞一個函數作爲css屬性的值時（請參閱checklen函數），您可以根據某些參數確定該屬性的值。在這種情況下，L1標籤的數量

<script type="text/javascript"> 
$(document).ready(function(){ 
    function checkLen(len){ 
     $('#locationList').css('overflow-y',function(){ 
      if(len>7){return 'scroll' 
       }else{return 'auto'} 
      }); 
     }; 
    $('#a').click(function(){ 
     var len=$('ul li').length; 
     $('<li><a>Element '+(len+1)+'</a></li>').appendTo('ul'); 
     checkLen(len); 
     }); 
    $('#b').click(function(){ 
     $('li:last').remove(); 
     var len=$('ul li').length; 
     checkLen(len); 
     }); 

}); 
</script>

來源

2014-06-07 09:12:41 Devima

使用寬度以％（百分比）代替修復PX（像素），它會工作。

來源

2014-06-07 06:43:44 Sharanpreet

我如何使用％下面的語句，風格=「WIDTH：285px;高度：150像素;溢出：汽車」 – Vinod

如果我設置的寬度和高度，它不適合所有屏幕分辨率。所以我不想設置寬度和高度。因此，要使其適合移動解決方案使用％。 – Sharanpreet

爲了滾動工作，您將不得不提供高度和寬度。但是，你可以使用jquery來檢查列表項，如果有超過4個項目存在，那麼你可以使用它的高度和寬度。

此外，爲滾動出現您將不得不使用溢出屬性。

.showScroll { 
    width:200px; 
    height: 150px; 
    overflow:scroll; 
    background-color:gray; 
}

和使用jQuery這樣：

var countOfListItems = $("#locationList li").size(); 
if (countOfListItems > 4) { 
    $("#locationList").toggleClass('showScroll'); 
}

檢查了這一點這裏 - >http://jsfiddle.net/TVK43/1/所以，當你列出的項目超過4.您可以創建一個類，這樣就可以應用它。這應該會給你一個更好的主意。

您也可以嘗試Sharanpreet的以％爲單位使用寬度的答案。

希望這有助於！

來源

2014-06-07 07:12:33

如何在不設置寬度和高度的情況下爲列表視圖設置滾動條？

回答

相關問題