-1

2 つのサイドバー (左側と右側) を持つ Web サイトを作成しました。

両方のサイドバーは、ajax.load()関数 (leftside.html と rightside.html) を介してコンテンツを読み込みます。

左のサイドバーにはメニューがあります。誰かがメニュー リンクをクリックする'#mainside'と、ハッシュ関数を使用してページを更新せずに div で開き、履歴を保存して、ブラウザの戻るボタンと 'history.back' が完全に機能するようにします。

これが私の実際のコードです。

leftside.html :

<div class="sidebars"><div id="ls"><ul>
  <li><a href="#a.html" class="left-ajax">AAA</a></li>
  <li><b href="#b.html" class="left-ajax">BBB</a></li></ul>
  <ul class="submenu">
  <li><a href="#c.html">CCC</a></li></ul>
  </div>
</div>

mainside: ('a.html' または 'b.html' はデータをロードする必要があります)

<div id="mainside"></div>

現在、この JavaScript コードを使用してコンテンツをロードし、URL バーにハッシュを配置しています (ただし、履歴を保存することはできません)。

JavaScript:

var Anand = {
  Config:{
    animSpeed: 300,
    screenDuration: 2500,
  },
  sideInit: function() {
    $("body").on("click","#ls li >a", function(e){
      e.preventDefault();
      $("body").scrollTop(0);
      var me = this;
      Aanad.Util.showLoading(function() { 
        $.ajax({
          url: $(me).attr("href").replace("#", ""),
          success: function(r) {
            $("#mainside").html(r);
            setTimeout(function() {
               Anand.Util.doneLoading();
            }, 600);
          }
        });
      });
    });
    $("body").on("click","#ls .submenu li >a", function(e){
      e.preventDefault();
      $("body").scrollTop(0);
      var me = this;
      Anand.Util.showLoading(function() { 
        $.ajax({
           url: $(me).attr("href").replace("#", ""),
           success: function(r) {
             r = r + "<br/><br/><br/><br/>";
             $("#mainside").html(r);
             Anand.Util.doneLoading();
           }
        });
      });
    });
    $(window).bind("hashchange", Anand.processHash);
  },
  processHash: function() {
    hash = window.location.hash;
    if (hash)
      $(hash).click();
    if (hash == "#home")
      $("#home-button").click();
  },
  windowLoaded: function() {
    if (window.location.hash && $(window.location.hash).length) {
      Anand.processHash();
      setTimeout(function() {
    $("#preloader").fadeOut()
      }, Anand.Config.screenDuration);
    } else {
      $(".sidebars li >a:first").click();
      setTimeout(function() {
    $("#preloader").fadeOut()
      }, Anand.Config.screenDuration);
      window.location.hash = "home";
    }
  },
  Util: {
    showLoading: function(callback) {
      $(".loading-progress").hide();
      $("#mainside *").unbind("click");
      $("#mainside").fadeOut(Anand.Config.animSpeed);
      setTimeout(function() {
        callback();
      }, 501);
    },
    doneLoading: function(callback) {
      $(".loading-progress").hide();
      $("#mainside").fadeIn(Anand.Config.animSpeed, function() {
        $(this).scrollTop(0);
        callback();
      });
    },
    activateMenu: function(el) {
      $(document).ready(function() {
        $(".sidebars li >a").removeClass("active");
        $(el).addClass("active");
        $("#ls-" + $(el).attr("id")).addClass("active");
        Anand.Util.silentHashChange($(el).attr("id") != undefined ? $(el).attr("id") : "")
        $("body, html").scrollTop(0);
     });
    },
    silentHashChange: function(hash) {
      $(window).unbind("hashchange");
      window.location.hash = hash;
      setTimeout(function() {
        $(window).bind("hashchange", Anand.processHash);
      }, 100);
    }
  }
};
$(document).ready(Anand.sideInit);

このコードを使用すると、リンクはターゲットをロードでき'#mainside'、ハッシュ関数も正常に機能します。しかし、戻るボタンを使用すると、ページのコンテンツを前のハッシュに変更することなく、現在のハッシュを前のハッシュに変更するだけです。

「bbq」も試しましたが、結果は「0」です。

私を助けてください...

感謝と敬意

4

1 に答える 1

1

のような JavaScript MVC ライブラリを確認することをお勧めします。backbone.jsまたはember.js、構築している種類のアプリに最適です (このような大規模なマルチステート Web アプリでよりクリーンなコードを開発するのに役立ちます)。

実際、両方が提供するものの 1 つは、Routerハッシュをイベント (別名関数) にバインドすることです。

backbone.js の例:

var Workspace = Backbone.Router.extend({
  routes: {
    "":                     "default"  // # 
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    //...
  },

  search: function(query, page) {
    //...
  }
});

var router = new Workspace();

// Another way to listen to routes.
router.on("route:defualt", function() {
  //...
});

// Starts listening to the hashchange event.
Backbone.history.start();

http://backbonejs.org/#Router

http://emberjs.com

于 2013-07-20T06:35:43.270 に答える