Question

我在JQuery Mobile的页脚定义中使用div的“navbar”数据角色。当我添加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链接，并在标题数据角色内部工作。

有什么想法吗？

Answer 1

您需要的是父div上的以下内容（在您的页脚div上）

overflow: auto;
white-space: nowrap;

nowarp使div内容不会溢出到下一行，溢出auto会使它在任何不适合的方向上滚动，在这种情况下是水平的，因为我们关闭了自动换行

Answer 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 */
}

评论：

设置自动将在某些设备上运行，但将其设置为仅滚动可以肯定。
这是一种神奇的属性，可以实现原生的感觉滚动。
将此设置为对齐会创建等间距的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水平滚动

2 个答案: