Javascript fazla işlevi yükleyin

2 Cevap php

EDIT: Bu soru başlangıçta çok genel olduğunu, ben düşünüyorum. Yani ne ben gerçekten ihtiyacınız Twitter website (mobile.twitter.com) yaptığı gibi iPhone için Safari Yük daha fazla işlevi uygulamak için nasıl çok iyi bir öğretici olduğunu. Sadece bir wordpress eklentisi gerçekten yardımcı olmayacaktır. Eklenti de o WPtouch eğer gibi açıklanabilir Ama eğer, evde (bu da bu fonksiyona sahiptir) de yapabilirsiniz.

I know that it doesn't really matter that it is being displayed on a mobile device, but the point I am stressing is that if such a function is well explained, then it will be up to me to know how to customize it to suit me.

Ben dinamik veritabanından gelen girdileri yüklemek için bir javascript fonksiyonu kullanıyorum, böylece içeriği (twitter (tweets beslemek) ve facebook (news feed) gibi) aynı sayfada açılır.

Php / html sürümü (Yani yeni bir sekmede bir sayfa açılır) olduğunu

echo '<a href="http://'. $_SERVER['HTTP_HOST'] .'/'.$domain_page.'?form='.$form_id.'&page='.($page+1).'">Load more entries&rsaquo; </a>';

Javascript / ajax sürümü:

<div id="call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="ajax-load-more">

                <img id="spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="spin" src="<?php bloginfo('template_directory'); ?>/images/main-ajax-loader.gif" style="display:none" alt="" /> 

                <a class="ajax" href="javascript:$ajax_hv('#spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeIn(200); 

                $ajax_hv('#ajaxentries_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').load('form='<? echo $form_id; ?>&page=<?php echo $page+1;?>', {}, 

                function(){ $ajax_hv('#call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeOut();})">Load more entries... 

                </a>

2 Cevap

Temel fikir olayları ilerlemek dinlemek, ve sunucu tarafında sayfalama uygulamaktır.

A scroll olay tetiklenir her belge veya içerdiği HTML öğesi kayar. Aklımda aşağıdaki şeyleri tutmak referans için bu kroki kullanacağız:

Adlı tarayıcı penceresinin yüksekliği 800px ve içeriğin başlangıç ​​yüksekliği 2500px diyelim. AJAX içeriğini yüklemeden için eşik olduğunda kullanıcı (ilk 2400px sonra) içeriğine alt 100px kaydırır.

alt text

Biz aşağıdaki 2 öğeleri takip etmek gerekir:

  1. Eşyalar / Sayfalar kadar yüklendi.
  2. How far are we from the bottom of the page.

Kod referanslar mooTools olan, ancak kavram aynıdır. Bunu anlamak kez jQuery dönüştürerek önemsiz bir iştir.

var maxPage = 1;
var threshold = 100;

Biz her sayfa verilirse biliyorum, bu yüzden scroll events için bir işleyici eklemek gerekir. Sayfanın altına kaydırma mesafe bulun. Bu tanımlanmış eşiğinden az ise (100px), sonra bir sonraki sayfa yüklenirken bir AJAX isteği kapalı yangın. Yanıt (başarılı ise) söz konusu olduğunda, sayfa ve artım maxPage numarasına ekleyebilir.

Akılda tutulması gereken bir diğer şey, içerik zaten yüklü olan değilse, sadece bir AJAX isteği ateş etmektir. Sayfa isteği hala beklemede olup olmadığını gösteren bir bayrak var.

var isLoading = false;

window.addEvent('scroll', function() {
    // the height of the entire content (including overflow)
    var contentHeight = window.getScrollSize().y;
    // current scroll is height of content that's above the viewport plus
    // height of the viewport.
    var contentScrolled = window.getScroll().y + window.getSize().y;
    var distanceToBottom = contentHeight - contentScrolled;
    var closeToBottomOfPage = distanceToBottom < threshold;
    var shouldLoadMoreContent = !isLoading && closeToBottomOfPage;

    if(shouldLoadMoreContent) {
        // create an ajax request
        var request = new Request({
            url: 'http://www.example.com/more',
            onSuccess: function(responseText) {
                $('page').append(responseText);
                maxPage++;
            },
            onRequest: function() {
                isLoading = true;
            },
            onComplete: function() {
                isLoading = false;
            }
        });
        // fire off ajax request with the page # as a querystring param
        request.send({page: maxPage});
    }
}

Yaygın bir Sonsuz kaydırma denir. JQuery ve Wordpress için eklentileri vardır:

http://www.infinite-scroll.com/

etiketler