jquerymobile实现手机导航条的滚动

最新推荐文章于 2021-06-02 11:19:07 发布

hnczlzj

最新推荐文章于 2021-06-02 11:19:07 发布

阅读量1.3k

点赞数

分类专栏： jquerymobile java 文章标签： Jquerymobile overfl java 手机微信开发

本文链接：https://blog.csdn.net/hnczlzj/article/details/53376856

版权

java 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jquerymobile

2 篇文章 0 订阅

订阅专栏

导航条主要代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<link href="qxcss/phone/index.css" rel="stylesheet" type="text/css" />
<link href="qxcss/phone/jqueryphone.css" rel="stylesheet" type="text/css" />


<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>


<script>
$("#currentorders").live("pageshow", function () {
var width = 0;
$("#overflow .menu li").each(function () {
width += $(this).outerWidth(true);
});
$("#overflow .menu").css("width", width + "px");
});
</script>

<div id="hea">

<div data-role="page" id="currentorders">
<header data-role="header" data-position="fixed">
<nav data-role="navbar">

<div class="hd left">
<div class="hd_left left"><a href="phoneindex"><img src="qximg/phone/logo.png" /></a></div>
<div class="hd_login right"><a href="javascript:void();">登录</a></div>
</div>

<div id="overflow" >
<div class="menu w100 left" style="overflow:hidden;overflow-x:scroll;">//重点控制左右滑动
<ul>
<li><a href="phoneindex" class="cur">首页</a></li>
<li><a href="#">研究</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">国内</a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>

</div>

jqueryphone.css中代码

样式控制

#overflow {
border: 1px solid #000;
/* overflow-x: scroll; */
overflow-y: hidden;
height: 35px;
position: relative;
}
#overflow .menu{
position: relative;
}
#overflow .menu li {
float: left;
width: 60px;
float: left;
position: relative;
}
/*
*媒体屏幕上的缩放有以下几种
*/
@media only screen and (max-width : 1024px) {
#overflow {width: 480;
height: 60px;}
#overflow .menu li{
height: 30px;
}
}
@media only screen and (max-width : 768px) {
#overflow {width: 480;
height: 60px;}
#overflow .menu li{
height: 30px;
}
}
@media only screen and (max-width : 480px) {
#overflow {width: 480;
height: 35px;}
#overflow .menu li{
height: 17px;
}
}
@media only screen and (max-width : 320px) {
#overflow {width: 320;
height: 35px;}
#overflow .menu li{
height: 17px;
}
}

使用说明：

1、添加<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> jquerymobile插件

2、添加
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">类似于配置语言中的特定俗称。

3、左右滑动功能实现像素的计算

4、由于该jsp是被引用文件，故去除了<html><body>

hnczlzj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquerymobile实现手机导航条的滚动

导航条主要代码 pageEncoding="UTF-8"%> --> $("#currentorders").live("pageshow", function () { var width = 0; $("#overflow .menu li")
复制链接

扫一扫