Пользовательский URL для jQuery

Question

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

Вот ссылка на страницу, над которой я работал, чтобы понять, что я хотел бы сделать.

http://dl.dropbox.com/u/2600525/Overflow/home.html

Кроме того, у меня возникла проблема с Firefox, неправильно выполняющим slideToggle. Если у кого-то есть информация о том, как это исправить, я бы очень оценил это.

Спасибо

Answer 1

вы можете использовать window.location.search для обновления части строки запроса вашего URL, позволяя пользователям обмениваться определенными URL, которые будут отличаться в зависимости от выбранной кнопки.

$('#myButton').click(function(){  
  window.location.search = "location=" + $(this).val(); // or any property from your clicked button
}); 

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

http://dl.dropbox.com/u/2600525/Overflow/home.html?location=home   ==> home page
http://dl.dropbox.com/u/2600525/Overflow/home.html?location=anout ==> about page

используя ту же технику, вы можете использовать window.location.hash для той же цели, но теперь вы собираетесь сделать все свои кнопки href похожими на следующие:

<a href="#WhoWeAre"></a>
<a href="#WhatWeDo"></a>

затем используйте тот же способ для обновления URL-адреса и проверьте значение при посещении вашей страницы.

также я настоятельно рекомендую вам посетить следующую страницу https://developer.mozilla.org/en/DOM/window.location, которая объяснит различные варианты, которые вы имеете, когда имеете дело с window.location.

Answer 2

Я работал на сайте, который использовал много AJAX (загрузка контента без обновления всей страницы). Они хотели, чтобы история и закладки были возможны. Поэтому мы использовали URL-хэши для представления разделов страницы с динамическими данными (например, site.com/account#settings или site.com/account#profile). После (document).load мы будем загружать соответствующие сегменты данных на основе хеша.

Вы можете:

1. получить текущий хеш с помощью:

   var hash = window.location.hash;
   

2. установите его с помощью

   window.location = '#...';
   // or (depending on use)
   window.location.href = '#...';
   

3. Прослушайте изменения с помощью

   $(window).bind('hashchange',function()
   {
       ...
   });
   

Надеюсь, это поможет.

Редактировать: включает базовый рабочий пример:

1. Создать файл index.html

2. Внутри head из index.html:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript">
   // load data from hash value (map it to url)
   function load_hash() {
       var hash = window.location.hash;
       var content = $('#content');
       if (hash == '#about') {
           content.load('about.html');
       }
       else if (hash == '#contact') {
           content.load('contact.html');
       }
   }
   
   // load data based on hash and listen to changes
   $(document).ready(function() {
       load_hash();
       $(window).bind('hashchange', function() {
           load_hash();
       });
   });
   </script>
   

3. Внутри body из index.html:

   <a href="#about">About</a>
   <a href="#contact">Contact</a>
   <div id="content"></div>
   

4. Создайте файлы about.html и contact.html в одном каталоге; вставьте в них любой текст, но убедитесь, что вы можете различить их (например, я поставил <h1>About</h1> и <h1>Contact</h1> соответственно)