我已经在搜索文档,似乎没有找到一种方法,使一个可滚动的水平导航栏在
jQuery mobile有任何人完成了吗?
这是我到目前为止导航栏
<div data-role="header" data-scroll="x"> <ul> <li class="logo"><a href="#"><img src="img/iphoneheader.gif" alt="Penn State Live" /></a></li> <li id="link"><a href="#type=colleges">Colleges</a></li> <li><a href="#">Campuses</a></li> <li><a href="#">Faculty and Staff</a></li> <li><a href="#">Of Interest</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Video</a></li> <li><a href="#">Newswire Subscription</a></li> <li><a href="#">PSUTXT</a></li> </ul> </div>
解决方法
我想这是你想要的.
HTML.
<div class="categories"> <ul> <li><span><a href="">ABC</a></span></li> <li><span><a href="">DEF</a></span></li> <li><span><a href="">GHI</a></span></li> <li><span><a href="">JKL</a></span></li> </ul> </div>
JQuery的
$(function(){ var step = 1; var current = 0; var maximum = $(".categories ul li").size(); var visible = 2; var speed = 500; var liSize = 120; var height = 60; var ulSize = liSize * maximum; var divSize = liSize * visible; $('.categories').css("width","auto").css("height",height+"px").css("visibility","visible").css("overflow","hidden").css("position","relative"); $(".categories ul li").css("list-style","none").css("display","inline"); $(".categories ul").css("width",ulSize+"px").css("left",-(current * liSize)).css("position","absolute").css("white-space","Nowrap").css("margin","0px").css("padding","5px"); $(".categories").swipeleft(function(event){ if(current + step < 0 || current + step > maximum - visible) {return; } else { current = current + step; $('.categories ul').animate({left: -(liSize * current)},speed,null); } return false; }); $(".categories").swiperight(function(){ if(current - step < 0 || current - step > maximum - visible) {return; } else { current = current - step; $('.categories ul').animate({left: -(liSize * current)},null); } return false; }); });
原文地址:https://www.jb51.cc/jquery/178815.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。