Как сделать так, чтобы твиттер «показал больше», но без ajax?

Question

У меня есть неупорядоченный список из 50 наименований.Я хочу показывать только 10 одновременно со ссылкой «Еще» внизу. Точно так же, как это только без ajax, поскольку мне это не нужно.

Не могли бы вы дать мне совет или направить меня к учебнику о том, как мне добиться этого эффекта?

Спасибо!

РЕДАКТИРОВАТЬ: Спасибо Рой Намир за ссылку .Я пытаюсь показать 2 элемента на странице из списка из 10, но не могу понять, что я делаю неправильно ...

JS

function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
                var items_per_page = 2;
                var max_elem = Math.min((page_index+1) * items_per_page, members.length);
                var newcontent = '';

                // Iterate through a selection of the content and build an HTML string
                for(var i=page_index*items_per_page;i<max_elem;i++)
                {
                                      newcontent = jQuery('#hiddenresult div.result:eq('+i+')').append();
                }

                // Replace old content with new content
                $('#Searchresult').html(newcontent);

                // Prevent click eventpropagation
                return false;
}

/** 
 * Initialisation function for pagination
 */
function initPagination() {
        // Create content inside pagination element
        $("#Pagination").pagination(10, {
                callback: pageselectCallback,
                load_first_page:true,
                items_per_page:2 
        });
 }

// When document is ready, initialize pagination
$(document).ready(function(){      
        initPagination();
});

HTML:

<div id="Pagination"></div>
    <br style="clear:both;" />
    <div id="Searchresult">
        This content will be replaced when pagination inits.
    </div>

    <!-- Container element for all the Elements that are to be paginated -->
    <div id="hiddenresult" style="display:none;">
        <div class="result">111</div>
        <div class="result">222</div>
        <div class="result">333</div>
        <div class="result">444</div>
    </div>

РЕДАКТИРОВАТЬ # 2: Нашел мой ответ: D http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

Answer 1

Загрузите весь контент, если вы не хотите использовать AJAX.

Вы можете скрыть элементы с помощью jQuery и CSS. Возьмем, к примеру, show() и hide(). Вы можете включить эту функцию, щелкнув ссылку показать больше и заменить вместо нее ссылку показать меньше .

http://api.jquery.com/show/
http://api.jquery.com/hide/

Answer 2

Самый простой способ, которым я могу придумать, это сделать через несколько скрытых ссылок.

добавьте этот простой код внизу вашей страницы.

    <script type="text/javascript">
  $(document).ready(function () {
        // choose text for the show/hide link - can contain HTML (e.g. an image)
        var showText = 'expand';
        var hideText = 'hide';

        // initialise the visibility check
        var is_visible = false;

        // append show/hide links to the element directly preceding the element with a class of "toggle"
        $('.toggle').prev().append(' <a href="#" class="toggleLink">' + showText + '</a>');

        // hide all of the elements with a class of 'toggle'
        $('.toggle').hide();

        // capture clicks on the toggle links
        $('a.toggleLink').click(function () {

            // change the link depending on whether the element is shown or hidden
            if ($(this).html() == hideText) {
                $(this).html(showText);
                $(this).removeClass('hide');
                $(this).parent().removeClass('purple');
            }
            else {
                $(this).html(hideText);
                $(this).addClass('hide');
                $(this).parent("h2").hide();
            }

            // toggle the display - uncomment the next line for a basic "accordion" style
            $(this).parent().next('.toggle').toggle();

            // return false so any link destination is not followed
            return false;

        });
    });
</script>

, затем просто оберните каждую группу из десяти предметов, как

<div class="nextresults">
        <h2 class="more">Show More</h2>
         <div class="toggle">
           {10 results go hear!!}    
         </div>
  </div>

Для полного завершения этого кода перейдите http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

Answer 3

уверен

http://plugins.jquery.com/project/pagination

демо здесь:

http://d -scribe.de / webtools / jquery-pagination / demo / demo_optionsHTM