Подсчет div для разбивки на страницы в Jquery - PullRequest
Новая
       18

Подсчет div для разбивки на страницы в Jquery

1 голос
/ 17 мая 2010

Я хочу создать хорошую нумерацию страниц в Jquery для нескольких div, которые у меня есть. EG: 

<div class="container">  
    <div id="one">content</div>  
    <div id="two">content</div>  
    <div id="three">content</div>  
    <div id="four">content</div>  
</div>

Число не всегда будет одинаковым, поэтому мне нужно посчитать div и отобразить нумерацию страниц, как показано ниже.

1|2|3|4

Нажатие на номер страницы отобразит соответствующий div. Я знаю, как показывать и скрывать элементы, используя Jquery и CSS, и понял, что могу подсчитать div, используя

var numPages = $('.container').size();

но я не могу понять, как я могу отобразить нумерацию страниц.

Есть указатели?

Ответы [ 3 ]

1 голос
/ 17 мая 2010

Примерно так: 

// Get all immediate child divs and their count
var $divs = $('div.container > div');
var pages = $divs.length;

// Hide every one but the first
$divs.not(':first').hide();

// Create a container for the pagination
$ul = $('<ul />');

// Create links for pagination inside the ul
for(var i = 0; i < pages; i++) {
    $ul.append($('<li><a href="#" class="pagination" rel="'+i+'">'+i+'</a></li>'));
}

// Insert the pagination container
$('div.container').before($ul);

// Behaviour for clicking the links inside pagination container
$ul.find('a.pagination').click(function() {
    // Get the index from current element's rel attribute
    var index = parseInt($(this).attr('rel'), 10);
    // Hide every div and show the div at the current index's location
    $divs.hide().eq(index).show();
    return false;
});

Не проверял это, но это должно дать вам стартеры. По сути, он просто создает элемент ul, который контролирует, какие элементы div отображаются.

0 голосов
/ 17 мая 2010

Как насчет этого? 

    // Opens a certain div in the .container
    function openUpPage(id) {
        $('.container div').hide(); // hide all divs in container
        $('#'+id).show(); // show only this one
    }

    // Gets called on document load
    $(function() {
        var i = 0;
        $('.container div').each(function (){
            i++;
            $(this).hide(); // hide
            $('#paginator').append("<a href=\"javascript: openUpPage('"+$(this).attr('id')+"')\">"+i+"</a>|");
        });

    });

Обратите внимание, добавьте это в свой HTML-код, куда должна идти нумерация страниц: 

<div id="paginator">  </div>

В противном случае, есть много плагинов, которые делают это для вас (например, таблица сортировщика с tablesorter.paginated), или вы можете использовать вкладки пользовательского интерфейса jQuery. Удачи!

0 голосов
/ 17 мая 2010

Используйте .addClass () и .removeClass - просто поместите класс на первую отображаемую страницу (div) и все остальные, которые скрывают, и поменяйте их местами (скрывая один с текущей видимостью, добавив класс скрытия и удалив класс show и инверсия для новой страницы, которую вы хотите показать, добавляя / удаляя CSS-классы.

...