Bymas | AniCMS

Топ дня:

AdRed

Kaito, Как раз будет где посмотреть примеры применения ajax

CreepMatis (05.09.2015 в 19:12)
Kaito, Как раз будет где посмотреть примеры применения ajax

http://bymas.ru/modules/smiles/smiles/psh.png

CreepMatis, в интернете их полно. да и не сложно то )))

mir007 (05.09.2015 в 19:14)
CreepMatis, в интернете их полно. да и не сложно то )))

Надо бы для начала усесться за js

CreepMatis (05.09.2015 в 19:15)
mir007 (05.09.2015 в 19:14)
CreepMatis, в интернете их полно. да и не сложно то )))

Надо бы для начала усесться за js

Навигация по сайту с помощью
Ajax
Вы наверное видели, что на некоторых
сайтах при переходе по страницам не
происходит ее перезагрузки. Это
существенно увеличивает скорость
переходов, уменьшает трафик клиента и
соответственно нагрузку на сервер. В
общем одни плюсы. Сегодня я покажу
вам как создать такой эффект. Я буду
использовать jQuery 2.
Для начала нужно понять что именно мы
хотим получить в итоге.
1. Страницы не должны перезагружаться
2. Скрипт не должен конфликтовать с
другими js скриптами
3. Сайт должен адекватно работать,
даже если клиент отключит у себя js
4. Сайт должен нормально
индексироваться поисковиками
5. Должны работать кнопки вперед/
назад в браузере
Приступим.
1. Подключаем скрипт jquery. Надеюсь
вы знаете как это делать.
2. Создаем файл ajax.js и так же
подключаем его.
3. Пишем в него следующее
[code=js]
if(history.pushState){
$(window).on('popstate', function(event){
var loc = event.location ||
( event.originalEvent &&
event.originalEvent.location )||
document.location;
ajaxNav(loc.href);
});
$('body').on('click', 'a[data-ajax]', function(){
var url = $(this).attr('href');
history.pushState(url, $('#title-page').text(),
url);
ajaxNav(url);
return false;
});
}
function ajaxNav(url){
$('#ajax-container').load(url+ ' #ajax-
container', function(){
document.title = $('#title-page').text();
});
}
[/code]
Ну собственно все.
Весь контент, который должен
обновляться без перезагрузки должен
быть обернут в #ajax-container. В этом
контейнере должен присутствовать
такой элемент <div id="title-page"
style="display: none"></div>
Он позволяет менять титл страницы при
переходах. Конечно, это грязный хак,
можно было сделать более элегантно, но
мне лень))
Для того, чтобы сделать ссылку ajax,
нужно добавить ей атрибут data-ajax
Например <a href="#" data-ajax>link</a>
Далеко не всем ссылкам нужно делать
ajax переход.
В конечном итоге DOM должен
выглядеть примерно так
[code=xml]
<html>
<head>
<title>title</title>
</head>
<body>
<div id="ajax-container">
<div id="title-page" style="display:
none">title</div>
// Весь контент, который должен
загружаться при переходах
<a href="/test/" data-ajax>Ссылка</a>
</div>
</body>
</html>

mir007 (05.09.2015 в 19:16)
CreepMatis (05.09.2015 в 19:15)
mir007 (05.09.2015 в 19:14)
CreepMatis, в интернете их полно. да и не сложно то )))

Надо бы для начала усесться за js

Навигация по сайту с помощью
Ajax
Вы наверное видели, что на некоторых
сайтах при переходе по страницам не
происходит ее перезагрузки. Это
существенно увеличивает скорость
переходов, уменьшает трафик клиента и
соответственно нагрузку на сервер. В
общем одни плюсы. Сегодня я покажу
вам как создать такой эффект. Я буду
использовать jQuery 2.
Для начала нужно понять что именно мы
хотим получить в итоге.
1. Страницы не должны перезагружаться
2. Скрипт не должен конфликтовать с
другими js скриптами
3. Сайт должен адекватно работать,
даже если клиент отключит у себя js
4. Сайт должен нормально
индексироваться поисковиками
5. Должны работать кнопки вперед/
назад в браузере
Приступим.
1. Подключаем скрипт jquery. Надеюсь
вы знаете как это делать.
2. Создаем файл ajax.js и так же
подключаем его.
3. Пишем в него следующее
[code=js]
if(history.pushState){
$(window).on('popstate', function(event){
var loc = event.location ||
( event.originalEvent &&
event.originalEvent.location )||
document.location;
ajaxNav(loc.href);
});
$('body').on('click', 'a[data-ajax]', function(){
var url = $(this).attr('href');
history.pushState(url, $('#title-page').text(),
url);
ajaxNav(url);
return false;
});
}
function ajaxNav(url){
$('#ajax-container').load(url+ ' #ajax-
container', function(){
document.title = $('#title-page').text();
});
}
[/code]
Ну собственно все.
Весь контент, который должен
обновляться без перезагрузки должен
быть обернут в #ajax-container. В этом
контейнере должен присутствовать
такой элемент <div id="title-page"
style="display: none"></div>
Он позволяет менять титл страницы при
переходах. Конечно, это грязный хак,
можно было сделать более элегантно, но
мне лень))
Для того, чтобы сделать ссылку ajax,
нужно добавить ей атрибут data-ajax
Например <a href="#" data-ajax>link</a>
Далеко не всем ссылкам нужно делать
ajax переход.
В конечном итоге DOM должен
выглядеть примерно так
[code=xml]
<html>
<head>
<title>title</title>
</head>
<body>
<div id="ajax-container">
<div id="title-page" style="display:
none">title</div>
// Весь контент, который должен
загружаться при переходах
<a href="/test/" data-ajax>Ссылка</a>
</div>
</body>
</html>

Интересненько

CreepMatis, все просто))

mir007, мой отличается

неспорю, при реализации роботоспособности кнопки "назад" заглянул в эту статью, но не более

В твоем примере не работают подгруженные скрипты :)

mir007, Го ссылку на материал, который скопипастил

CreepMatis (05.09.2015 в 19:29)
mir007, Го ссылку на материал, который скопипастил

На code-info.ru видал статейку