2009-07-03 8 views
0

リンクをクリックすると、 のどこかのページがプルされ、現在のページのdivに挿入されるスクリプトです。かなりシンプルですが、私はそうであるように見える のように、私はそれを実装する方法を把握することはできません。このAjaxスクリプトはどのように実装できますか?

つまり、スクリプトをページに指し示すようにリンクを作成するにはどうすればいいですか? divにロードしますか?

スクリプト:

$(document).ready(function() { 

    // Check for hash value in URL 
    var hash = window.location.hash.substr(1); 
    var href = $('#nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content'; 
      $('#content').load(toLoad) 
     } 
    }); 

    $('#nav li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 
    $('#content').hide('fast',loadContent); 
    $('#load').remove(); 
    $('#wrapper').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('normal'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content').show('normal',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('normal'); 
    } 
    return false; 

    }); 
}); 

命令は次のように指定します。

  1. 私たちは、ナビゲーションメニュー内のリンクをターゲットとし、それらがクリックされたときに、関数を実行したい:

    $('#nav li a').click(function() { 
        // function here 
    }); 
    
  2. リンクがcliのときにデータを取得するページを定義する必要があります上cked:

    var toLoad = $(this).attr('href')+' #content'; 
    
  3. loadContent機能が要求されたページを呼び出します:

    function loadContent() { 
        $('#content').load(toLoad,'',showNewContent) 
    } 
    

それは上記 を意図したものではなくて、すべてのことは、スクリプトを実行するのに必要なのである可能性が非常に高いのですあなただけの場合それをする方法を知っている、私はそれをしない。

PS:このチュートリアルはすべてhereです。

答えて

3

基本的にすべてのリンククリックを傍受し、AJAXリクエストを行う...クリックコールバック機能の最後にreturn falseを思い出してください。

$('a').click(function() { 
    var href = $(this).attr('href'); 
    $.ajax({ 
    url: href, 
    success: function (res) { 
     $(res).appendTo('#target'); // add the requested HTML to #target 
    } 
    }); 
    return false; // important 
}); 
関連する問題