-1

我制作了一个有两个侧边栏（左侧和右侧）的网站。

两个侧边栏都通过 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 应用程序中开发更简洁的代码）。

实际上，它们都提供的其中一件事是Router将哈希绑定到事件（也称为函数）。

主干.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 回答