使用jQuery Mobile创建iOS页面指示符（点）

Question

//我对角落里可爱女士的提问 我想创建一个分页来指示哪些页面是可见的，就像在iOS中一样（窗口下方的那些小点，在HIG中称为“页面指示符”。）

- 我的项目在此称为“殿下”。

我找到了一个示例，但我找不到有关重新创建布局的文档，而且它位于实验部分：（ http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html

Answer 1

我不确定为什么这对你来说很难，但如果你正在谈论如何用html / css3制作圈子，那么我有一个简单的答案。只需将边框半径等于高度/宽度的一半制作点。

<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>

...

.dot {
    display: inline-block;
    width:12px;height:12px;
    border-radius:6px;
    background-color:#8999A6;
}
.page4 .dot4 {
    background-color: white;
}

如果你无法弄清楚除此之外该做什么，你基本上需要有人为你做整件事，但我会给你一个提示。在某处更高的位置，您将设置一个指示活动页面的类。这将允许您触发可以说明哪个匹配点处于活动状态的CSS规则，并将bg更改为白色。

Answer 2

根据罗素的回答阅读讨论之后，我想我明白了你的想法。

1. 创建一个presistent页脚。这不是一件小事，但可以做到。 你可以看看我的插件有两个列布局http://jquerymobiledictionary.dyndns.org/dualColumn.html 或者等我在周末工作时考虑你的问题（我建议你：P）。

2. 获得预设页脚后，您可以从页面列表中生成点，然后处理pageshow事件以突出显示正确的点。

将整个内容包装在一个小部件代码中将使其成为渐进式增强功能，而不是一堆混乱的代码，可以使用非升级浏览器来影响用户。