Использование jQuery для ограничения количества элементов списка - PullRequest
Новая
       11

Использование jQuery для ограничения количества элементов списка

6 голосов
/ 20 июня 2009

У меня есть элемент списка, содержащий от 20 до 30 событий. Я хочу показать только 5 из них, и у меня есть ссылка «Еще», которую я могу нажать, чтобы посмотреть следующие пять. Неважно, будут ли добавлены пять следующих событий.

Не могу найти скрипт jQuery, который на самом деле это делает, или я просто слепой? Я не хочу использовать плагины карусели или что-то в этом роде.

Ответы [ 5 ]

6 голосов
/ 20 июня 2009 
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  $("ul.more").each(function() {
    $("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
    $("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
  });
  $("li.more a").live("click", function() {
    var li = $(this).parents("li:first");
    li.parent().children().show();
    li.remove();
    return false;
  });
});
</script>
</script
</body>
</html>

В основном, что это делает:

  1. Скрывает 6-й и последующие элементы списка;
  2. Вставляет элемент списка после 5-го высказывания "Еще ...";
  3. Использует живые события для добавления обработчика событий к ссылкам «Еще ...», чтобы при нажатии на них отображались все элементы списка в этом списке, а затем удалялись

Редактировать: Исправлено несколько небольших ошибок. Выше приведен полностью рабочий пример (просто убедитесь, что ссылка jquery верна).

6 голосов
/ 20 июня 2009

К счастью для нас, программистов, которые пишут код для еды и славы, не все мыслимые функциональные возможности были написаны как плагин:)

Но это довольно просто: 

var from = 0, step = 5;

function showNext(list) {
  list
    .find('li').hide().end()
    .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
      .show();
  from += step;
}

function showPrevious(list) {
  from -= step;
  list
    .find('li').hide().end()
    .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
      .show();
}

// show initial set
showNext($('ul'));

// clicking on the 'more' link:
$('#more').click(function(e) {
  e.preventDefault();
  showNext($('ul'));
});

Конечно, это лучше извлекать в подобную плагину функцию, но я оставлю это как упражнение для читателя;)

3 голосов
/ 20 июня 2009

Вы хотите начать с каждого скрытого элемента в списке (CSS: display: none). Затем добавьте свою ссылку далее под элементом списка. 

$(document).ready(function()
{
    $("a#myMoreLink").click(function()
    {
        var items = $("ul#myList > li:hidden");

        if(items.length > 0)
            items.slice(0, 5).show();
        else
            $(this).html("No more");

        return false;
    });

    $("a#myMoreLink").click();
});

С HTML: 

<ul id="myList">
    <li style="display: none"></li>
    <li style="display: none"></li>
</ul>
<a href="http://" id="myMoreLink">More</a>

Нечто подобное. $ ( "# MyMoreLink") нажмите кнопку (). вызывается для отображения начальных 5 пунктов при загрузке страницы.

2 голосов
/ 20 июня 2009

Это работает, но уверен, что вам придется немного подправить, что:)

HTML: 

<div style="width:200px;border:3px groove blue;">
   <ul id="list">
    <li>Thai</li>
    <li>Turkish</li>
    <li>Portuguese</li>
    <li>American English</li>
    <li>Arabic</li>
    <li>Canadian French</li>
    <li>Chinese Simplified</li>
    <li>Chinese Traditional</li>
    <li>Czech</li>
    <li>Danish</li>
    <li>Dutch</li>
    <li>English</li>
    <li>Finnish</li>
    <li>French</li>
    <li>German</li>
    <li>Greek</li>
    <li>Hebrew</li>
    <li>Hungarian</li>
    <li>Italian</li>
    <li>Japanese</li>
    <li>Norweigan</li>
    <li>Polish</li>
    <li>Russian</li>
    <li>Spanish</li>
   </ul>    
   <a href="#" id="lnkMore">More</a>
</div>

JavaScript: 

<script type="text/javascript">
    var len = 0;
    var curStart = 0;
    var count = 5;
    var items=new Array();
    function BackupList() {
        var lst = $("ul#list");
        len= $("ul#list li").length;
        if (len <= count)
            return;

        $("ul#list li").each(function() {
            items.push($(this));
            $(this).remove();
        });

        var html="";
        for (curStart; curStart < count && curStart < len; curStart++) {
            html += "<li>" + $(items[curStart]).html() + "</li>";
        }
        $(html).appendTo($(lst));
    }

    function ShowMore() {
        if (curStart >= len) {
            curStart = 0;
        }

        $("ul#list li").each(function() {
            $(this).remove();
        });

        var l = curStart;
        var html = "";
        for (curStart; curStart < (l + count) && curStart < len; curStart++) {
            html += "<li>" + items[curStart].html() + "</li>";
        }
        $(html).appendTo($("ul#list"));
    }
</script>

Провода jquery для события: 

<script type="text/javascript">
    $(document).ready(function() {
        BackupList();
        $("a#lnkMore").click(function() { ShowMore(); });
    });
</script>
1 голос
/ 14 декабря 2010

Я написал плагин hideMaxListItems, который может быть тем, что вы искали. Вы можете установить максимальное количество элементов списка, скорость анимации для слайд-анимации, а также развернуть / свернуть кнопку HTML. Анимация слайдов выполняется последовательно для каждого элемента списка, чтобы обеспечить плавную анимацию.

http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/

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

Нет похожих вопросов

...