jQuery mobile中固定list-divider

最新推荐文章于 2018-07-24 18:29:56 发布

Wilsom

最新推荐文章于 2018-07-24 18:29:56 发布

阅读量5.1k

点赞数

分类专栏： JQuery Mobile CSS 文章标签： jquery mobile listview function stylesheet scroll

本文链接：https://blog.csdn.net/lijiacumt/article/details/7222480

版权

JQuery Mobile 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

在jQuery mobile中使用listview，我们有时候希望list-divider能固定在顶端，特别是检索信息时。

查看CSS的position属性，有四种不同类型的定位: static, relative, absolute, fixed。这里使用relative。

关键技术——使用jqm绑定scroll事件，随着滚动实时改变list-divider的top属性。

代码：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>second page</title>
<link rel="stylesheet" href="jquery.mobile-1.0.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0.js"></script>
<script>
    	var positions = new Array();
	var height;
	$(document).ready(function(){
		height = $('.ui-li-divider').height();
		var sum = $('.ui-li-divider').length;
		for(var i=0; i<sum; i++)
		{
			positions[i] = $('.ui-li-divider:eq('+i+')').position().top;
		}
	});
	$(this).bind('pageinit',function(){
		$(this).bind('scroll',function(){
			var scrollTop = $(this).scrollTop();
			
			if(scrollTop < positions[1]-height-14)
			{
				$('.ui-li-divider:eq(0)').css(
					"top",scrollTop+"px"
				);
			}
			if(scrollTop > positions[1]-height-14&&scrollTop<positions[1])
			{
				$('.ui-li-divider:eq(0)').css(
					"top",scrollTop+"px"-height
				);
			}
			if(scrollTop > positions[1]&&scrollTop<positions[2]-height-14)
			{
				$('.ui-li-divider:eq(1)').css(
					"top",scrollTop-positions[1]+"px"
				);
			}
			if(scrollTop > positions[2]-height-14&&scrollTop<positions[2])
			{
				$('.ui-li-divider:eq(1)').css(
					"top",scrollTop-positions[1]+"px"-height
				);
			}
			if(scrollTop >positions[2])
			{
				$('.ui-li-divider:eq(2)').css(
					"top",scrollTop-positions[2]+"px"
				);
			}
		});
	});
</script>
<style type="text/css">
.ui-li-divider{
	position:relative;
	z-index:2;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
    <ul data-role="listview" data-inset="false">
        <li data-role="list-divider">省份</li>
        <li><a οnclick="selectCity()">广东省</a></li>
        <li><a>江苏省</a></li>
        <li><a>浙江省</a></li>
        <li><a>山东省</a></li>
        <li><a>海南省</a></li>
        <li><a>福建省</a></li>
        <li data-role="list-divider">直辖市</li>
        <li><a>北京市</a></li>
        <li><a>天津市</a></li>
        <li><a>上海市</a></li>
        <li><a>重庆市</a></li>
        <li data-role="list-divider">特别行政区</li>
        <li><a>香港</a></li>
        <li><a>澳门</a></li>
        <li><a>台湾</a></li>
    </ul>
</div>
</div>
</body>
</html>

效果图：

——————————————————————————————————————————————————

（2）以上方法改进，采用position:fixed属性。去除抖动。

关键代码：

<style type="text/css">
[data-role="list-divider"]{
	position:static;
	width:100%;
	z-index:2}
ul{
	position:relative;
	top:30px;}
.locked{
	position:fixed}
</style>
<script>
$(document).ready(function(e) {
	var sum = $('.ui-li-divider').length;
	var height = $('.ui-li-divider').height();
	var positions = new Array();
	for(var i=0; i<sum; i++)
	{
		positions[i] = $('.ui-li-divider:eq('+i+')').position().top;
	}
    $(window).scroll(function(){
				if(window.pageYOffset<=positions[1]-75)
				{
					$('.ui-li-divider:eq(1)').removeClass('locked');
					$('.ui-li-divider:eq(2)').removeClass('locked');
					$('.ui-li-divider:eq(0)').addClass('locked');
					$('.ui-li-divider:eq(0)').css('top','0px');
				}
				else if(window.pageYOffset>positions[1]-75&&window.pageYOffset<=positions[2]-75)
				{
					$('.ui-li-divider:eq(0)').removeClass('locked');
					$('.ui-li-divider:eq(2)').removeClass('locked');
					$('.ui-li-divider:eq(1)').addClass('locked');
					$('.ui-li-divider:eq(1)').css('top','0px');
					
				}
				else if(window.pageYOffset>positions[2]-75)
				{
					$('.ui-li-divider:eq(0)').removeClass('locked');
					$('.ui-li-divider:eq(1)').removeClass('locked');
					$('.ui-li-divider:eq(2)').addClass('locked');
					$('.ui-li-divider:eq(2)').css('top','0px');
				}
				});
});
</script>

以上纯属个人探索，仍有很多不完善之处，敬请谅解。

下面奉献官方demo：

解压缩下载的包，路劲demos\experiments\scrollview\list-divider.html

Wilsom

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jQuery mobile中固定list-divider

在jQuery mobile中使用listview，我们有时候希望list-divider能固定在顶端，特别是检索信息时。查看CSS的position属性，有四种不同类型的定位: static, relative, absolute, fixed。这里使用relative。关键技术——使用jqm绑定scroll事件，随着滚动实时改变list-divider的top属性。代码：
复制链接

扫一扫