JQuery Back/Forward Functionality с Ajax

Я кодировал сайт с помощью JQuery для загрузки различных .html-файлов в содержимое div на странице. Конечно, это означает, что кнопки «Назад» и «Вперед» не очень помогают перемещаться по сайту. Я провел некоторое исследование и нашел множество вариантов, таких как история, и даже нашел this Stack Overflow question относительно моей проблемы. К сожалению, я провел два дня, покачала головой о клавиатуру, пытаясь заставить один из этих плагинов jquery работать. Может ли кто-нибудь помочь мне реализовать один из этих плагинов для включения/выключения на моем сайте? Ваша помощь будет высоко оценена.JQuery Back/Forward Functionality с Ajax

Заранее благодарен!

<!DOCTYPE html> 
    <html lang="en"> 

     <head> 
     <title>Toward Maximum Independence</title> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
     <link rel="stylesheet" href="pagesstyle.css" type="text/css" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/javascript.js"></script> 
     </head> 

    <body> 
     <div id="header"> 
     <div id="menu"> 
      <ul id="nav"> 
      <li> 

       <a href="#">DONATE&nbsp;</a> 
       <ul> 
       <li><a href="#" id="donationform">Donation Form</a></li> 
      <li><a href="#" id="donateyourcar">Donate Your Car</a></li> 
      </ul> 
      </li> 

      <li><a href="#">GET INVOLVED</a> 
      <ul> 
       <li><a href="#" id="referaconsumer">Refer a Consumer</a></li> 
       <li><a href="#" id="upcomingevents">Upcoming Events</a></li> 
       <li><a href="#" id="prospectiveemployers">Prospective Employers</a></li> 
       <li><a href="#" id="takepoliticalaction">Take Political Action</a></li> 

      </ul> 
      </li> 

      <li><a href="#">OUR PROGRAMS</a> 
      <ul> 
       <li><a href="#" id="jobplacement">Job Placement</a></li> 
       <li><a href="#" id="fostercare">Foster Care</a></li> 
       <li><a href="#" id="independentliving">Independent Living</a></li> 
       <li><a href="#" id="projectconnect">Project Connect</a></li> 
      </ul> 
     </li> 

     <li><a href="#">WHO WE ARE</a> 
      <ul> 
      <li><a href="#" id="missionstatement">Mission Statement</a></li> 
      <li><a href="#" id="history">History</a></li> 
      <li><a href="#" id="boardofdirectors">Board of Directors</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 


    <div id="content"> 
     <div id="text"> 
     <!--Content goes here --> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 

</body>

и мой JavaScript:

jQuery.event.add(window, "load", initialize); 
jQuery.event.add(window, "resize", initialize); 



function initialize() 
{ 

    $('#header').css({'visibility':'visible'}); 
    var h = $(window).height(); 
    var w = $(window).width(); 
    $('#header').css({'width': w, 'height': w*.190}); 
    $('#nav a').bind("click", selectThis); 
    $('#leftcolumn a').bind("click", selectThis); 
} 

function selectThis() 
{ 
    var url='text/' + $(this).attr('id') + '.html'; 
    $('#text').load(url); 
}

Похоже, что это не должно быть трудно, но я предполагаю, что я просто не понимаю, как это должно работать. Мой контент div называется «#text», и все ссылки в его содержимом заголовка. Я пробовал jquery.history и jquery.address как широко, так и не мог заставить их работать. Еще раз спасибо за любой совет или помощь, я действительно надеюсь, что кто-то может мне помочь.

источник

2010-07-23 travisshawnhill86

Самый простой способ - использовать встроенные механизмы браузера, т. Е. Изменить отображаемый URL-адрес. Если вы сделаете это, добавив хэш-тег в конец URL-адреса, навигация не будет выполнена. Основные шаги

изменить функцию «selectThis», чтобы изменить хэш, но сделать больше
добавить функцию, которая проходит каждые 100 мс, и АЯКС ваш DIV, если значение хэш-функции изменилось.

Вы можете сделать это с чем-то вроде этого:


function selectThis() 
{ 
    window.location.hash = $(this).attr('id'); 
} 

var lastUrl; // adding a global variable for short code, ideally you'd find a way to avoid this. 

$(
window.setInterval(function() { 
    var url='text/' + window.location.hash + '.html'; // possibly you have to remove the first character of the hash to make this work... 
    if (lastUrl != url) { 
     lastUrl = url; 
     $('#text').load(url); 
    } 
}, 100); 
); // wrapping this function in the jQuery selector delays setting up the timeout until the page has loaded.

вы нажмите назад/вперед в вашем браузере, хэш изменится, и ваша страница будет АЯКС в соответствующем содержании.

источник

2010-07-23 21:50:14

-1

Попробуйте bakupton's jQuery History вместо этого, из моего опыта он работает лучше всего и является самым простым в использовании. Это тоже превосходная поддержка.

источник

2010-09-18 11:51:19 balupton

ответ

Смежные вопросы