Jquery Mobile Footer NavBar 水平滚动
Posted
技术标签:
【中文标题】Jquery Mobile Footer NavBar 水平滚动【英文标题】:Jquery Mobile Footer NavBar Horizontal Scroll 【发布时间】:2013-10-10 16:01:32 【问题描述】:我在 JQuery Mobile 的页脚定义中为 div 使用“导航栏”数据角色。当我添加超过 5 个项目时,它会将菜单项分为两列。这是根据 JQM 文档的默认行为。我希望通过在页脚区域内向左或向右滑动来滚动图标。
<div data-role="footer" data-theme="d" data-position="fixed" id="divFooter">
<div data-role="navbar" id="divNavBar">
<ul>
<li><a href="javascript:;" id="icPortfolio" data-icon="custom">Profile</a></li>
<li><a href="javascript:;" id="icStatus" data-icon="custom">Status</a></li>
</ul>
</div>
</div>
作为参考,我查看了这个潜在的解决方案:JQM horizontal scroll navbar。然而,它将菜单图标转换为 html 链接并在标题数据角色中工作。
有什么想法吗?
【问题讨论】:
请注意标签是独立的。结合horizontal
和scroll
与标签horizontal-scrolling
的含义不同。
【参考方案1】:
您需要的是父 div 上的以下内容(在您的页脚 div 上)
overflow: auto;
white-space: nowrap;
nowarp 使 div 内容不会溢出到下一行,并且溢出自动使它可以在任何不适合的方向滚动,在这种情况下是水平方向,因为我们关闭了自动换行
【讨论】:
【参考方案2】:您可以仅使用 HTML/CSS 实现此目的:
HTML
<header>
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="#" class="nav-toggle">Menu</a>
</header>
CSS
nav
overflow-x: scroll; /* 1 */
-webkit-overflow-scrolling: touch; /* 2 */
ul
text-align: justify; /* 3 */
width: 30em; /* 4 */
ul:after /* 5 */
content: '';
display: inline-block;
width: 100%;
li
display: inline-block; /* 6 */
评论:
-
设置自动在某些设备上可以工作,但将其设置为仅滚动
可以肯定。
这是赋予原生感觉的神奇属性
滚动。
将此设置为 justify 会创建等间距的 li
为计算利润感到头疼。
您必须将宽度设置为
大于所有 li 宽度之和的值。
这是
text-align: justify
的clearfix 版本。
这也必须设置为等间距工作。
应该在以下设备上工作:
iOS 5+ Android 3.0 Blackberry 6+(未亲自检查) Windows Phone (IE10) 原生支持动量滚动取自这里:http://hugogiraudel.com/2013/08/23/scroll-overflow-menu/
【讨论】:
以上是关于Jquery Mobile Footer NavBar 水平滚动的主要内容,如果未能解决你的问题,请参考以下文章