Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Для того что бы оставлять сообщения на форуме вам необходимо зарегистрироваться или войти под своим профилем.

Изменение адреса без перезагрузки страницы - Форум


  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Fro0st, lewonchik  
Форум » Веб мастеру » Интересные решения в uCoz » Изменение адреса без перезагрузки страницы
Изменение адреса без перезагрузки страницы
FrоstДата написания: Воскресенье, 29.05.2011, 20:00:17 | Сообщение № 1

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Я уже давно заметил, что во всеми нами любимой соц. сети «В Контакте» появился некий скрипт, который изменяет url без перезагрузки страницы, Но я не придавал этому особое значение. Но вчера заинтересовался как это сделано. Весь секрет в управлении историей, а конкретно в нехитрой javascript-функции history.pushState, которая появилась в html5. У многих html5 ассоциируется с отсутствием кроссбраузерности, поэтому вышеупомянутая функция работает не везде. Поддержка есть в Firefox 4+, Safari 5+ и Chrome 8+. Эта функция позволяет изменять адрес, находящийся после слэша. Если соединить это с ajax, можно создать эффект быстрой перезагрузки страницы. Что собственно и сделали разработчики ВК, обманув посетителей. Ну, хотя, может они не обманывали никого, загрузка действительно стала быстрее, но… Забудте.
На самом деле эта функция очень полезна, например, в случаях если больше половины контента на всех страницах сайта идентичная. Я покажу Вам как это работает на практике. Мы создадим вкладки, изменяющие контент и адрес в браузере. Не без помощи jQuery естественно.
Итак, создаём html-файлик с именем… ну допустим, first.html. Стоим каркас. Обычные ссылки, внутри обычной таблицы.
Code
<table cellspacing="0" cellpadding="0" border="0">
       <tr>
         <td width="150" class="links">
           <a href="first.html">first</a> <br/>
           <a href="second.html">second</a> <br/>
           <a href="third.html">third</a> <br/>
           <a href="fourth.html">fourth</a> <br/>
           <a href="fifth.html">fifth</a> <br/>
         </td>
         <td valign="top" class="wrapper">
           <div class="content">
             first block
           </div>
         </td>
       </tr>
</table>

Подключаем jQuery. Кто еще не знает как это делается, смотрим:
Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

Теперь пичкаем кодами.
Code
$(function($){
           /* Биндим функцию на клик */
       $('.links a').attr('onclick','return false;').click(function(){
             /* Запоминаем адрес ссылки */
         var href = $(this).attr('href');
             /* Добавляем надпись загрузки по вкусу */
         $('.wrapper').text('Loading...');
             /* Загружаем в объект с классом «wrapper» объект
             с классом «content» с другой страницы */
         $('.wrapper').load(href+' .content', function(){
               /* Меняем текст в адресной строке на тот, что был в адресе ссылки */
           history.pushState(null, null, href);
         });
       });
});
/* Happy End */

То, что должно получиться можно просмотреть и скачать по ссылкам ниже. (Данный код работает только на сервере)
Демо | Архив
Источник: www.frostart.ru
Прикрепления: tabs.rar (2.6 Kb)




Сообщение отредактировал Frоst - Понедельник, 30.05.2011, 23:50:41
 
mixoДата написания: Воскресенье, 29.05.2011, 21:21:07 | Сообщение № 2

Gm.Fuck...
Сообщений: 1176
Награды: 28
Репутация: 367
За что люблю твои релизы - это за то что в них есть примеры. ^_^

[text]Сайт о Lineage 2 и серверо-строении.[/text]
 
GoolfenДата написания: Понедельник, 30.05.2011, 09:54:32 | Сообщение № 3

Постоянный
Сообщений: 471
Награды: 2
Репутация: 47
Frоst, Все классно сделал и оформил, только Демо и архив не найдены пишет ошибку 404.

[text][/text]
[text][/text]
 
THE_KINGДата написания: Понедельник, 30.05.2011, 12:16:32 | Сообщение № 4

Освоившийся
Сообщений: 186
Награды: 1
Репутация: 112
Жаль демо не работает... А идея классная!

trollhaus.ru - все уже там!
 
FrоstДата написания: Понедельник, 30.05.2011, 19:45:26 | Сообщение № 5

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Я просто за сайт не платил, вот и отключили. blush
Сайт заработал. Можете смотреть демо. Архив на всякий случай залил в тему.


 
THE_KINGДата написания: Вторник, 31.05.2011, 11:15:46 | Сообщение № 6

Освоившийся
Сообщений: 186
Награды: 1
Репутация: 112
Frоst, демо посмотрел, я давно именно это и искал, вот только нельзя сделать, чтоб в строке адреса было небольшое изменение (Например сам документ остается - /first.html , а если переходишь на другой док., то в строке адреса это отображается не переходя на другой документ - /first.html?s=2 и т.п.) ? Если сможешь буду очень благодарен!

trollhaus.ru - все уже там!
 
FrоstДата написания: Вторник, 31.05.2011, 11:39:14 | Сообщение № 7

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Можешь по-подробнее, что то я не совсем понял wondering

 
THE_KINGДата написания: Вторник, 31.05.2011, 13:32:33 | Сообщение № 8

Освоившийся
Сообщений: 186
Награды: 1
Репутация: 112
Frоst, ну смотри, все точно так-же как и сейчас, только при переходе на сл. документ, у изначального URL добавляется, но не изменяется.
Пример:
Было - /first.html
Перешел на second.html
Стало - /first.html?s=2


trollhaus.ru - все уже там!
 
FrоstДата написания: Вторник, 31.05.2011, 14:24:03 | Сообщение № 9

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Code
<script type="text/jaavascript">
$(function($){
$('.second').click(function(){
$(document).load('/second.html');
history.pushState(null, null, '/first.html?s=2');   
});
});
</script>
<a href="#" class="second" onclick="return false">second.html</a>




Сообщение отредактировал Frоst - Вторник, 31.05.2011, 14:31:17
 
alex11waДата написания: Среда, 08.06.2011, 22:16:08 | Сообщение № 10

-= Уровень: 0 =-
Сообщений: 7
Награды: 0
Репутация: 6
всем привет! Frost, все работает, спасибо! но после этого метода перестали работать в браузере кнопки НАЗАД ВПЕРЁД! может есть какое нибуть решение?

С уважением.
 
ГостикДата написания: Среда, 08.06.2011, 22:16:52 | Сообщение № 11

-= Уровень: 1 =-
Сообщений: 44
Награды: 0
Репутация: 26
alex11wa,
Quote (Frоst)
Изменение адреса без перезагрузки страницы


7.2. Запрещено ставить более двух ссылок - предупреждение, бан 2 дня

Взято с: http://rucoz.com/forum/42-8938-1
 
alex11waДата написания: Среда, 08.06.2011, 22:34:46 | Сообщение № 12

-= Уровень: 0 =-
Сообщений: 7
Награды: 0
Репутация: 6
Quote (Гостик)
Цитирую Frоst
Изменение адреса без перезагрузки страницы


Гостик, пример взят был с соц. сети "В Контакте" у них тоже не работают кнопки "назад вперёд"? или взять одноклассники... у них тоже Изменяется адрес без перезагрузки страницы, но история работает.
 
FrоstДата написания: Четверг, 09.06.2011, 12:52:16 | Сообщение № 13

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
alex11wa, лично у меня работают кнопки истории, если учесть адресную строку. А чтобы контент менялся через ajax, нужно писать отдельную функцию.
Quote (alex11wa)
пример взят был с соц. сети "В Контакте" у них тоже не работают кнопки "назад вперёд"? или взять одноклассники
В одноклассниках нет данного метода. Там адресная строка меняется после символа "#". После него адрес меняется без перезагрузки в любом браузере без всяких скриптов. Тоже самое на фейсбуке и в твиттере.


 
alex11waДата написания: Четверг, 09.06.2011, 17:46:48 | Сообщение № 14

-= Уровень: 0 =-
Сообщений: 7
Награды: 0
Репутация: 6
Quote (Frоst)
В одноклассниках нет данного метода. Там адресная строка меняется после символа "#". После него адрес меняется без перезагрузки в любом браузере без всяких скриптов. Тоже самое на фейсбуке и в твиттере.


Frost, если я правильно понял... то, для того чтобы работали кнопки надо использовать якорь? (#) но, метод который ты показал интересней... может есть для него решение?
 
FrоstДата написания: Четверг, 09.06.2011, 18:09:18 | Сообщение № 15

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
alex11wa, ты меня не понял. Этот метод создан для манипулирования историей. Т. е. в истории адреса должны сохраняться, исходя из этого, можно смело предположить, что кнопки истории тоже должны работать. Возможно проблемы с браузером. Попробуй в моём демо использовать кнопки истории через другие браузеры.
А про якорь я упомянул только чтобы исправить твоё неверное предположение об одноклассниках. Там суть другая.


 
THE_KINGДата написания: Четверг, 09.06.2011, 20:59:45 | Сообщение № 16

Освоившийся
Сообщений: 186
Награды: 1
Репутация: 112
кнопки истории не работают и работать не должны - все елементарно просто, ведь фактически Вы остаетесь на 1-м документе, так как же Вам сработает история?
Прикрепления: 1535938.gif (2.6 Kb)


trollhaus.ru - все уже там!
 
alex11waДата написания: Четверг, 09.06.2011, 21:12:14 | Сообщение № 17

-= Уровень: 0 =-
Сообщений: 7
Награды: 0
Репутация: 6
Forst, я папробывал ваше демо, я видемо не так поставил был вопрос! прошу прощения! кнопки работают, но при нажатии не подгружают те страницы которые соответствуют URL, то есть адрес меняется, а контент остаётся прежним. Получается что у пользователя пропадает возможность перейти назад или вперёд?
 
FrоstДата написания: Четверг, 09.06.2011, 23:15:48 | Сообщение № 18

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
THE_KING,
Quote (Frоst)
Этот метод создан для манипулирования историей. Т. е. в истории адреса должны сохраняться, исходя из этого, можно смело предположить, что кнопки истории тоже должны работать.
Читать умеем? История должна работать. Если не веришь, можешь погуглить.

alex11wa,
Quote (Frоst)
А чтобы контент менялся через ajax, нужно писать отдельную функцию.

Смену контента я создал для наглядного применения метода. Чтобы вместо с историей он менялся нужно писать отдельную функцию. Сам метод только меняет адресную строку.


 
alex11waДата написания: Пятница, 10.06.2011, 00:36:39 | Сообщение № 19

-= Уровень: 0 =-
Сообщений: 7
Награды: 0
Репутация: 6
Quote (Frоst)
Смену контента я создал для наглядного применения метода. Чтобы вместо с историей он менялся нужно писать отдельную функцию. Сам метод только меняет адресную строку.


да, да это я и имел ввиду что адрес URL меняется, а контент нет! Frost, извиняюсь за навязчивость)) а вы знаете как написать такую функцию которая будет и контент менять при переходе НАЗАД ВПЕРЁД??
 
FrоstДата написания: Пятница, 10.06.2011, 12:32:23 | Сообщение № 20

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Ммм... Как найдётся свободная минутка, обязательно напишу. Просто я сейчас сильно занят. Сделаю.

 
Форум » Веб мастеру » Интересные решения в uCoz » Изменение адреса без перезагрузки страницы
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Обсуждение темы на форуме веб мастеров 3aKa4Ka.at.ua

© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.