3

我在 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 水平滚动导航栏。然而，它将菜单图标转换为 HTML 链接并在标题数据角色中工作。

有任何想法吗？

4

2 回答 2

2

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

overflow: auto;
white-space: nowrap;

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

于 2013-10-03T20:17:54.947 回答
1

您可以仅使用 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 */
}

注释：

  1. 设置 auto 可以在某些设备上使用，但为了确保可以将其设置为滚动。
  2. 这是使本机感觉滚动的神奇属性。
  3. 将此设置为证明会创建等距的 li，这让计算边距感到头疼。
  4. 您必须将宽度设置为大于所有 li 宽度之和的值。
  5. 这是text-align: justifyclearfix 的版本。
  6. 这也必须设置为等间距工作。

应该在以下设备上工作：

  • iOS 5+
  • 安卓3.0
  • 黑莓6+（没有亲自检查）
  • Windows Phone (IE10) 原生支持动量滚动

取自这里：http ://hugogiraudel.com/2013/08/23/scroll-overflow-menu/

于 2016-01-11T14:58:55.000 回答