0

フェイスブックやグーグルメールのような「アンカーナビゲーション」でウェブサイトを作っています。私はそれを機能させましたが、完全ではありません。そのようなものでページをロードすると#contact、リンクをクリックしない限りロードされません。また、私がしていることを行うためのより良い、より効率的な方法はありますか？私はJSプログラミングの最高の人ではありません。

JavaScript：

$.navigate = function() {
  // a new link
  if($anchor != document.location.hash){
    // add a preloader
    $("#content")
      .empty()
      .html('<p class="align-center"><img src="assets/images/loading.gif" /></p>');
    // change the anchor saved for next time
    $anchor = document.location.hash;
    // get the variables ready for the get
    var i = $anchor.substring(1).split("/");
    var $page = i[0];
    var $y = (i[1]) ? i[1] : false;
    // get the file
    $.get("callback.php", { x: $page, y: $y }, function(data){
      $("#content")
        .empty()
        .html(data);
    },"html");
  }
};

$(function() {

  var $anchor = "";
  // change from the URI. This dont work.
  if(document.location.hash){ $.navigate(); }

  $("a","#nav")
    .css({backgroundColor:"#f7f7f7"})
    .each(function() { 
      $(this).attr("href","#" + $(this).attr("name")); 
    });  

  setInterval('$.navigate()', 300);

});

HTML：

<div id="nav">  
  <ul class="horizontal-nav">
    <li><a href="http://streetmafia.co.uk/" name="index">Home</a></li>
    <li><a href="http://streetmafia.co.uk/about" name="about">About</a></li>
    <li><a href="http://streetmafia.co.uk/portfolio" name="portfolio">Portfolio</a></li>
    <li><a href="http://streetmafia.co.uk/contact" name="contact">Contact</a></li> 
  </ul>
  <div id="l-nav"></div>
  <div id="r-nav"></div>  
</div>
4

3 に答える 3

2

ReallysimpleHistory jquery プラグインを試してみてください。

于 2009-12-21T19:27:18.657 に答える
1

ReallysimpleHistory プラグインについても同様です。あなたのコードを完全に理解しているかどうかはわかりませんが、コードを 2 つの関数に分けます。

  1. 1 つは ajax の読み込みを行います (プリローダーの表示を含む)
  2. もう 1 つは現在のハッシュを (URL から) チェックし、前の関数を呼び出します。

「$(function() {...」では、最初に 2 番目の関数を呼び出します (1 回だけ)。次に、リンクのクリック イベントを最初の関数にバインドします。$ を使用して、読み込み関数でハッシュを取得できます。 (これ).attr('名前').

簡単な例（テストされていません：P）：

function ajaxLoad()
{

 var anchor;

 // Check to see if it's being called from an event
 if ( $(this).length > 0 )
 {
   anchor =  $(this).attr('name');  
 }
 else
 {
   anchor = document.location.hash;
 }

}
于 2009-12-22T03:19:36.687 に答える
0

おそらく、jQuery History プロジェクト ( http://www.balupton.com/projects/jquery-history ) を確認してください。

それは他のものよりも少しフル機能で実装が簡単で、さらに素晴らしい場合はサポートがあります. フル機能の AJAX 拡張もあり、Ajax リクエストを状態/ハッシュに簡単に統合して、Web サイトをフル機能の Web 2.0 アプリケーションに変換できます: http://www.balupton.com/projects/jquery-ajaxy

jQuery History の使用例を次に示します (デモ サイトから取得)。

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    // Update the current element to indicate which state we are now on
    $current.text('Our current state is: ['+state+']');
    // Update the page"s title with our current state on the end
    document.title = document_title + ' | ' + state;
});

// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
    // Update Menu
    updateMenu(state);
    // Show apricots tab, hide the other tabs
    $tabs.hide();
    $apricots.stop(true,true).fadeIn(200);
});

jQuery Ajaxy の例 (デモ サイトから取得):

        'page': {
            selector: '.ajaxy-page',
            matches: /^\/pages\/?/,
            request: function(){
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
                // Adjust Menu
                $menu.children('.active').removeClass('active');
                // Hide Content
                $content.stop(true,true).fadeOut(400);
                // Return true
                return true;
            },
            response: function(){
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
                // Adjust Menu
                $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
                // Show Content
                var Action = this;
                $content.html(data.content).fadeIn(400,function(){
                    Action.documentReady($content);
                });
                // Return true
                return true;

そして、クエリ文字列のパラメータを取得したい場合は（そうyoursite/page.html#page1?a.b=1&a.c=2）、次のように使用できます。

$.History.bind(function(state){
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}

これらのデモ リンクをチェックして、実際の動作を確認し、すべてのインストールと使用方法の詳細を確認してください。

于 2010-08-05T18:16:39.517 に答える