4

どこでも AJAX を使用して Drupal 7 サイトを作成するために jQuery プラグインを評価していました。私はajaxyを使用しています。しかし、あまり積極的に維持されているようには見えません。

私が見つけた2つの可能な解決策は、pjaxとdjaxです。これらのプラグインについてどのような経験がありますか?

同様の機能を実行するプラグインを他に知っていますか? 非常に重要な機能は、SEO 対応です (できれば pushState を使用するため、ハッシュは使用されません。ハッシュは、サポートされていないブラウザーのフォールバックとして使用されます)。また、Drupal の HTML 構造と連携する必要があるため、非常に柔軟でなければなりません。

4

3 に答える 3

1

Drupal は、リンクのajax 化に簡単に使用できる独自のAJAX フレームワークを提供します。多くのAJAX コマンドが既に提供されているため、JavaScript コードを記述する必要はありません。ソリューションは SEO フレンドリーです。リンクはパス内の要素とともに出力され、フレームワークによって使用されるときに置き換えられます。nojsajax

API の使用法については、 AJAX Example、AJAX Graceful DegradationおよびAJAX Commandsサンプル モジュールを参照してください。

于 2012-06-01T17:20:25.147 に答える
0

PHPとjQueryを使用しているので、最善の策は私のプロジェクトであるphery http://phery-php-ajax.netであり、これは積極的に保守されており、過去2年間改善してきました。

ビューを使用することで、サイトを個々のajaxビューにセグメント化するか、AJAXを介して本格的なページコンテンツを使用することができます。これはSEOに対応しており、イベントの委任を使用しているため、すべての新しい要素はすでに修正されています。履歴APIまたはハッシュイベントの使用は強制されません。最適な機能を決定できます。

あなたのサイトの本格的なAJAXローディングコンテンツは次のようになります（もちろん、コンテナのみ、メニュー、フッターなどは除外されます）

    var ever_pushed = false; // needed for chrome

    phery.view({
        '#container': {
            'exclude': ['/blog'], // exclude wordpress from it
            'beforeSend': function(){
                $('body,html').scrollTop(0); // go to the top
            },
            'render': function(html, data, passdata){
                var $this = $(this);
                nav_items.removeClass('current').filter('.' + data.controller).addClass('current'); // update the menu
                document.title = data.title; // set the document title

                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

                _gaq.push(["_trackPageview"]); // Google analytics

                $('#content')
                .find('>div')
                .animate({'opacity':0}, 375) // fadeout
                .promise()
                .done(function(){
                    $body.removeClass().addClass(data.body_class);
                    $this.html('').html(html);
                    on_reload(); // restart events that need to be bound on new elements
                    cufonize(true); //apply cufon
                    $('#content').find('>div').animate({'opacity':1}, 375); // fadein
                });
            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });

同じコードの小さいバージョンは次のようになります。

$(function(){
    var ever_pushed = false;
    phery.view({
        '#container': {
            'afterHtml': function(html, data, passdata){
                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });
});

PHP側では、次のようになります。

function render_view($data, $params, $phery){
   return PheryResponse::factory()->render_view(views_get_view('all_projects')->execute_display('Block', array()));
}
//...
public function render($reset = FALSE){
   Phery::instance()->views(array(
     '#container' => array($this, 'render_view')
   ))->process();
}
//...
于 2012-12-05T18:38:48.110 に答える