أرغب في إنشاء ترحيل بين مجموعات الأعمدة التي تم إنشاؤها عبر المكون الإضافي

Question

//تحديث//

لقد وجدت بعض التعليمات البرمجية للقيام بالترحيل الذي قمت بتعديله للعمل مع المكون الإضافي Columnizer (عينة النشرة الإخبارية 10) لـ jQuery. المشكلة الوحيدة هي أنه لا يمكنني الذهاب إلا إلى الجزء التالي من المقالة (يتم تقسيمها إلى 3 أعمدة لكل جزء). لسبب ما لا يمكنني العودة إلى الجزء السابق من المقال. إذا قمت بالنقر فوق ".articleprevbutton" ، فسيأخذني الأمر إلى الجزء التالي. رمز الترحيل من هنا http://pastebin.me/217b55dff89af94ad04de32328dca62a وهو مصنوع لالتقاط صورة. لا أحتاج إلى حلقة جولة إلى البداية في الجزء الأخير من المقالة عندما أنقر بعد ذلك. أنا فقط لا أعرف كيف أخرجها دون كسرها.

    $(function(){
        var content_height = 466;

        var page = 1;

        function buildNewsletter(){
            if($('#theArticle').contents().length > 0){

                $page = $("#page_template").clone(true).addClass("page").css("display", "block");

                $page.find("#partnumbertext h3").append(page);
                $("#singlepostbox").append($page);
                page++;

                $('#theArticle').columnize({
                    columns: 3,
                    target: ".page:last .content",
                    overflow: {
                        height: content_height,
                        id: "#theArticle",
                        doneFunc: function(){
                            buildNewsletter();
                        }
                    }
                });
            }


            $('.page').hide();
            $('.page:first').show();


                $('.articleprevbutton, .articlenextbutton').click( function (ev) {
                //prevent browser jumping to top
                ev.preventDefault();

                //get current visible item
                var $visibleItem = $('.page:visible');

                //get total item count
                var total =  $('.page').length;

                //get index of current visible item
                var page = $visibleItem.prevAll().length;

                //if we click next increment current index, else decrease index
                $(this).attr('href') === 'Next' ? page++ : page--;

                //if we are now past the beginning or end show the last or first item
                if (page === -1){
                   page = total-1;
                }
                if (page === total){
                   page = 0
                }

                //hide current item
                $visibleItem.hide();

                //fade in the relevant item
                $('.page:eq(' + page + ')').fadeIn(500);

            });



        }


        setTimeout(buildNewsletter);
    });

إلى حد كبير مستخدم jQuery الهواة يحتاج إلى مساعدة. أي سيكون رائعا. أيضا أي تحسينات موضع ترحيب.

Answer 1

حسنًا ، لقد عملت أخيرًا باستخدام بعض التعليمات البرمجية من سؤالي والباقي من هنا: http://www.jsfiddle.net/brunolm/256mu/. انتهى الألم ، إذا كان لديك أي نصائح حول كيفية تقليل أو تحسين الكود الذي يكون أكثر من موضع ترحيب.

$(function(){


        // columnizer section creating all the pages of columns, I have 3 
        // columns per page, goto the link at the bottom to find out more about the 
        // columnizer newslettter code.

 var content_height = 466;

 function buildNewsletter(){
 if($('#theArticle').contents().length > 0){

 $page = $("#page_template").clone(true).addClass("page").css("display", "block");

 $("#singlepostbox").append($page);

 $('#theArticle').columnize({
  columns: 3,
  target: ".page:last .content",
  overflow: {
   height: content_height,
   id: "#theArticle",
   doneFunc: function(){
    buildNewsletter();
   }
  }
 });
}


        // Code for post nav info before click, total of pages reused on click. For example 1 of 3
        var $pagination = $("#PostNav");
        var total = $('.page').length;
        var current = $pagination.data("Current") ? $pagination.data("Current") : 1;

        // Hides all pages except the very first page and shows the current page number + total number of pages
        $('.page').hide();
        $('.page:first').show();
        $("#pagenumbertext").text("page " + (current) + " of " + total + "");  

        }

setTimeout(buildNewsletter);

});


$("#PostNav a").click(function (e) {
 e.preventDefault();

 var $this = $(this);

 var $pagination = $("#PostNav");

 var $thepage = $(".page");

                // total number of pages
 var total = $('.page').length;

          // Current page index    
 var current = $pagination.data("Current") ? $pagination.data("Current") : 0;

 /* handling prev & next buttons */
 if ($this.index() == 0) /* Previous */
 {
  /* go 1 back or start at the end */
  current = ((current - 1) < 0 ? (total - 1) : (current - 1));
 }
 else /* Next */
 {
  /* go 1 forward or start at the beginning */
  current = ((current + 1) == total ? 0 : (current + 1));
 }

 /* Save the current index for next time */
 $pagination.data("Current", current);

 /* Transition to next or previous page and Update which page is visible*/
 $thepage.css("display", "none").eq(current).css("display", "").fadeIn(500);

 $("#partnumbertext").text("part " + (current+1) + " of " + total + "");
});

إذا كنت بحاجة إلى مزيد من المعلومات وتساعد في العمل مع Columnizer للحصول على مقالاتك ومحتوىك في أعمدة متعددة تلقائية تقسيم إلى صفحات أو أجزاء فقط ابحث عن Google عن Columnizer. آمل أن يساعد هذا أي شخص يريد حقًا إعطاء موقع على شبكة الإنترنت شعورًا أكثر بمجلة. مع الاستفادة الإضافية التي تمكنت من تقسيمها إلى صفحات بدلاً من أن تسقط كل شيء إلى ما لا نهاية في الصفحة. شكرًا.