Раскрывающийся список JQuery с пейджингом

Question

Раскрывающийся список JQuery с пейджингом

0

У меня есть раскрывающийся список, как показано ниже:

Вопрос в том:
Мне нужно всего лишь 3 элемента в кадре, они должны быть в javascript

сама выпадающая структура основана на структуре ul li.

поэтому я думал о том, чтобы отображать все элементы и разделять их на группы ul, но я не знаю, как это реализовать в javascript (JQuery) .each(function(){}); когда пользователь нажимает на кнопки со стрелками в строке, ему необходимо отобразить в раскрывающемся списке два 3 элемента/(группы).

Надеюсь, у кого-то есть хорошая идея, как это реализовать.

http://jsfiddle.net/9pBgZ/18/

Stefan van de Laarschot 23 март 2014, в 18:08

Источник

0

Пожалуйста, не добавляйте "привет" / "спасибо" / "привет" на ваши вопросы. Пожалуйста, приложите усилия для правильного использования заглавных букв, так как это облегчает чтение вопросов.
Charles 24 март 2014, в 03:49

Теги:

c#

javascript

jquery

asp.net

drop-down-menu

1 ответ

Ещё вопросы

Пожалуйста, не добавляйте "привет" / "спасибо" / "привет" на ваши вопросы. Пожалуйста, приложите усилия для правильного использования заглавных букв, так как это облегчает чтение вопросов.

Nick N. · Answer 1 · 2014-03-23T15-19-00.000Z

Сначала скройте все ли css (display: none;), используя jQuery slice (как вы сказали), а затем покажите только те элементы, которые вы хотите показать, на основе вашей страницы:

$( "li" ).slice( 0, 2).show();

или

$( "li" ).slice( 3, 5).show();

Вы также можете посмотреть функцию jQuery get.

Вы можете получить предметы по индексу следующим образом:

$( "li" ).get( 0 )

Вы можете использовать обычный цикл for или foreach, а затем выбирать только те элементы, которые хотите показать, на основе текущей выбранной вкладки.

Решение (спасибо FWieP)

<script type="text/javascript">
    var PageNumber = 0;
    var PageSize = 3;

    $(document).ready(function(){
        Paging();

    $("#Back").click(function(){
        PageNumber = PageNumber -1;
        console.log(PageNumber);
        Paging();
    });

    $("#Forward").click(function(){
        PageNumber = PageNumber +1;
        console.log(PageNumber);
        Paging();
    });
});

    function Paging()
    {
       $("#ListItems li").hide();
    var lis = $('#ListItems li').slice(PageNumber*PageSize, (PageNumber*PageSize)+PageSize);
    $(lis).show();
    }


</script>

<div class="Dropdown"> 

<ul id="ListItems">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
     <li><a href="#">Item 5</a></li>
     <li><a href="#">Item 6</a></li>
     <li><a href="#">Item 7</a></li>
</ul>

 <div class="PagingButtons" id="pnlPaging">
   <a class="Back" href="#" id="Back">&lt;</a>
   <a class="Forward" href="#" id="Forward">&gt;</a>
 </div>

</div>