JQM水平滚动导航栏 [英] JQM horizontal scroll navbar
本文介绍了JQM水平滚动导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我"一直在寻找文档,并且似乎找不到在 jQuery mobile 上制作可滚动的水平导航栏的方法. a>有人做到了吗?
i"ve been hunting the docs and can't seem to find a way to make a scrollable horizontal navbar in jQuery mobile has anybody accomplished this yet ?
这是到目前为止我对navbar的拥有
here's what i have for navbar so far
<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)}, speed, null);
}
return false;
});
});
这篇关于JQM水平滚动导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文