Меню на JS

[nightgremlin]

У меня такой вопрос. Например у меня есть меню примерно такого типа:

<ul id="right-menu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

Нужно с помощью JS проверить что количество пунктов в меню больше 3-х, если это так то создать меню из 3-х пунктов, а внизу добавить кнопку для навигации (кнопку пагинации) с определенным id. Соответственно если у меня 9 пунктов, то три кнопки пагинации.

Пока изучаю JS и плохо его знаю, поэтому прошу помощи в данном вопросе. 

[abrahadabra]

Задача — жуть!

Вам не избежать мудрёных манипуляций с DOM.

jQuery поможет.

http://api.jquery.com/size/— посчитать количество элементов;

http://api.jquery.com/jQuery/— самая главная функция. Поможет при создании нового элемента;

http://api.jquery.com/append/или http://api.jquery.com/appendTo/ — когда нужно будет элемент добавлять в новое место;

http://api.jquery.com/detach/— а это пригодится, когда удалять настанет пора;

http://api.jquery.com/click/— не избежать, если кнопкам навигации уготована судьба работать.

 

Но ещё раз подумайте: точно это нужно делать средствами js? Может всё-таки в шаблоне это лучше решить?

[nightgremlin]

Я тоже думал шаблоном, но не понимаю как осуществить пагинацию без перезагрузки страницы. А так шаблоном, вы правы, проще в разы.

Вы полностью поняли задачу. Я подозреваю, что её решение упростит жизнь очень многим.

 

Есть задача попроще, но тоже из этой серии. Можно сделать слайдер. То есть, если пунктов в меню >3, то создаётся меню из 3-х пунктов и две стрелочки для пролистывания остальных пунктов. 

[abrahadabra]

можно разбить задачу пополам. Часть в шаблоне решить, а часть на клиенте.

То есть, в шаблоне сделать примерно такой код:

<ul class="right-menu">    <li class="right-menu__page page1 active">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>        </ul>    </li>    <li class="right-menu__page page2">        <ul>            <li>4</li>            <li>5</li>            <li>6</li>        </ul>    </li>    <li class="right-menu__page page3">        <ul>            <li>7</li>            <li>8</li>            <li>9</li>        </ul>    </li></ul>

а на клиенте только назначать класс active тому  списку, который нужно показать.

[nightgremlin]

можно разбить задачу пополам. Часть в шаблоне решить, а часть на клиенте.

То есть, в шаблоне сделать примерно такой код:

<ul class="right-menu">    <li class="right-menu__page page1 active">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>        </ul>    </li>    <li class="right-menu__page page2">        <ul>            <li>4</li>            <li>5</li>            <li>6</li>        </ul>    </li>    <li class="right-menu__page page3">        <ul>            <li>7</li>            <li>8</li>            <li>9</li>        </ul>    </li></ul>

а на клиенте только назначать класс active тому  списку, который нужно показать.

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

 

Движок WP. Есть рубрика, содержащая около 50-70 записей. На странице рубрики выводятся записи по датам, снизу расположена пагинация. Как вы думаете этого достаточно посетителю для навигации по сайту?