JQuery Back / Forward Функциональность с Ajax - PullRequest
Новая
       14

JQuery Back / Forward Функциональность с Ajax

1 голос
/ 24 июля 2010

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

Заранее спасибо! 

    <!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, и не смог заставить их работать.Еще раз спасибо заранее за любой совет или помощь, я действительно надеюсь, что кто-то может помочь мне.

Ответы [ 2 ]

0 голосов
/ 18 сентября 2010

Вместо этого попробуйте Balupton jQuery History , из моего опыта это работает лучше всего и является самым простым в использовании. Его поддержка также превосходна.

0 голосов
/ 24 июля 2010

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

  1. измените функцию "selectThis", чтобы изменить хеш, но не более
  2. добавить функцию, которая запускается каждые 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.

когда вы нажимаете назад / вперед в вашем браузере, хэш изменится, и ваша страница перейдет в соответствующий контент.

...