使用jQuery Mobile创建iOS页面指示符(点) [英] Creating iOS page indicator (dots) with jQuery Mobile

问题描述

//我对角落里可爱的女士的问题
我想创建一个分页来指示可见的页面，例如在iOS中(窗口下方的小点，在HIG中称为页面指示器".)

// my Question to the lovely lady in the corner
I would like to create a pagination for indicating what page is visible, like in iOS, (those little dots below a window, known as "page indicators" in the HIG.)

-我的项目特此称为殿下.

-- My project is hereby referred to as, Her Highness.

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

推荐答案

我不确定为什么这对您来说很难，但是如果您正在谈论如何用html/css3制作圆圈，那么我有一个简单的答案.只需使边界半径等于高度/宽度的一半的点即可.

I'm not sure why this is the part that seems hard to you, but if you're talking about how to make circles with html/css3, then I've got a simple answer. Just make your dots with a border radius equal to half the height/width.

<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更改为白色.

If you can't figure out what to do beyond that, you're going to basically need someone to do the whole thing for you, but I'll give you a hint. Somewhere higher up, you're going to set a class indicating the active page. That will allow you to trigger CSS rules that could say which matching dot is active, and change the bg to white.

这篇关于使用jQuery Mobile创建iOS页面指示符(点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！