如何在不设置宽度和高度的情况下为列表视图设置滚动条？

我们如何设置滚动列表视图与设置宽度和高度？如果我设置的宽度和高度它不适合所有屏幕分辨率。所以我不想设置宽度和高度。如果列表视图超出了四个元素，它应该设置滚动。它怎么可能？有什么建议么？如何在不设置宽度和高度的情况下为列表视图设置滚动条？

<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

如何在不设置宽度和高度的情况下为列表视图设置滚动条？

回答

相关问题