jQuery mobile中固定list-divider

来源：互联网发布：php分页编辑：程序博客网时间：2024/05/23 21:02

在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 onclick="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