使用jQuery Mobile创建iOS页面指示符(点)

Question

//我对角落里可爱女士的问题
我想创建一个分页来指示哪些页面是可见的,就像在iOS中一样(窗口下方的那些小点,在HIG中称为"页面指示符".)

- 我的项目在此称为"殿下".

我找到了一个例子,但我找不到关于重新创建布局的文档,而且它在实验部分:( http://jquerymobile.com/test/experiments/scrollview/#../../docs/工具栏/页脚,坚持-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更改为白色.