Создание индикатора страницы iOS (точек) с помощью jQuery Mobile - PullRequest
5 голосов
/ 23 марта 2011

// мой вопрос к прекрасной даме в углу Я хотел бы создать нумерацию страниц, чтобы указать, какая страница видна, как в iOS (эти маленькие точки под окном, известные как «индикаторы страниц» в HIG.)1006 *

- Мой проект называется Ее Высочество.

Я нашел пример, но не могу найти документацию по воссозданию макета, и он находится враздел эксперимента: ( http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html

Ответы [ 2 ]

15 голосов
/ 23 марта 2011

Я не уверен, почему эта часть кажется вам сложной, но если вы говорите о том, как создавать круги с помощью 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 на белый.

2 голосов
/ 23 марта 2011

Прочитав обсуждение под ответом Рассела, я думаю, что понимаю, чего Вы хотите.

  1. Создайте постоянный нижний колонтитул.Это не тривиальная вещь, но может быть сделано.Вы можете взглянуть на мой плагин для двух макетов столбцов http://jquerymobiledictionary.dyndns.org/dualColumn.html или подождать, пока я учту вашу проблему, пока я работаю над ней в выходные дни (что я советую вам: P).

  2. После получения постоянного нижнего колонтитула вы можете сгенерировать точки из списка страниц и затем обработать событие pageshow, чтобы выделить правильную точку.

Завершение всего этого в код виджета позволило бы сделать его прогрессивным улучшением, а не беспорядочной кучей кода, который бы раздражал пользователей браузерами, не являющимися пользователями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...