Пока могу ползать по интернету — решил кинуть статью..ну плюс Xaker никак не втыкнёт как сделать,зато в исходнике ковыряться может…в общем,читаем и ставим.Итак.Начнём сразу с корня.Это воплощение урока с руселлера для САР…ну и для всех сайтов.
В общем,что нам нужно:
1.Библиотека Jquery — если подключена,то эт хорошо.Не подключена — качаем архив с конца статьи и ставим.
2.Немного знаний в ксс хотя б для самого GIF лоадера
3.Само собой,нужны познания в HTML
Сразу скажу,ajax я не знаю.Начинаю только разбираться.Тем не менее я в этом разобрался и для меня это далось нелегко…Так что кормим хряка и не забываем…ну а ниже само собой идёт инструкция по установке
Ставим:
1.Открываем header.php и перед тегом
добавляем:
<script type="text/javascript" src="/jquery.js" charset="windows-1251"></script>
<script type="text/javascript" charset="windows-1251">
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).animate({opacity:0}, //Прозрачность на 0
function(){ // загружает контент с помощью ajax
$('#gif_loader').show(); //показываем лоадер
$(container_div).load(url+" "+content_div, //загружает только выбранную часть
function(){
$(container_div).animate({opacity:1}); //возвращает прозрачность обратно на 1
$('#gif_loader').hide(); //скрываем лоадер при загрузке
}
);
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
return false; //предотвращает нажатие на ссылку
});
},
init: function(params){ //задает первоначальные настройки
container_div = params.containerDiv;
content_div = params.contentDiv;
return this; //выводит объект
}
}
}();
</script>
<script type="text/javascript" charset="windows-1251">
$(function(){
AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#ajaxgo a");
});
</script>
Этот яваскрипт не весь с руселлера — тут добавлен вывод лоадера.Но можно считать,что яваскрипт мы разобрали.Следом вставим:
<style type="text/css">
#gif_loader {
position: fixed;
top: 50%;
left: 50%;
background-color: #fff;
}
</style>
Объясняю:
position: fixed; — выводит объект(в данном случае лоадер) на выставлено позиции даже при прокрутке страницы.можно поставить на absolute (т.к. старый IE не видит fixed),тогда выведется фрагмент в том месте,где он загрузится и при прокрутке не будет \»ползать\»
top: 50%; — отступ сверху.можно задать пикселями,но я у себя ставил по центру
left: 50%; — отступ слева.
background: #fff; — цвет фона.Если шарите,то можете менять и цвет или лепить картинку.GIF анимация на фоне воспроизводиться не будет
2.Теперь мы вставим сам лоадер.После тега
Добавим:
<div id="gif_loader" style="display:none;" align="center" >
<fieldset>
<font size='1' color="black">
Пожалуйста,подождите!</font><br/>
<img src="/loader.gif" alt="Loading" />
</fieldset>
</div>
в принципе,тут разобраться просто.Это обычный HTML.Тут код лоадера,как у меня на проекте
3.Самое интересное,что пропустил и во что не врубился XAKER.Jquery парсит всё,что стоит в id=\»ajax-wrap\» и id=\»text\».Однако,каждую страницу нам править не вариант,т.к. это много вазни.Особенно влом было делать мне это для себя.Однако,если включить логику,то можно вставить div с этим id в header.php чтоб грузило не всю страницу,а только контент.В header.php в самый конец вставляем:
<div id="ajax-wrap">
<div id="text">
в принципе,месторасположение выберите сами,если есть познания в HTML ну и умение видеть код визуально.
Ну и конечно же в footer.php в самое начало вставить:
</div>
</div>
иначе лишние div-ы могут убить дизайн.50% проблемы есть.
4.Остальные 50% работы заключаются в том,что надо определить ссылки,по нажатию на которые будет грузиться контент страницы,на которую ведёт ссылка.Для этого самый рациональный вариант ограничить ссылку тегами:
и
Т.е. примерно должно выглядеть это так:
<span id="ajaxgo"><a href="страница">ссылка</a></span>
в принципе вот и вся вазня.Однако,остановимся на лоадере.Сами понимаете,что рисовать его впадлу.Для этого идём сюда и генерируем нужный лоадер.Там всё понятно,я надеюсь.После нажатия на \»Generate it!\» не забудьте его скачать,т.к. просто сохранить как картинку не получится.Потом назовём loader.gif и льём в корень.
Вот и вся статья.Надеюсь,что многим помог.Длф мфс редактируем файлы head.php и foot.php в папке blocks.Ну это для тех,кто очень хотел.
ну и наконец архив с необходимыми файлами: ajax.zip
Автор публикации
Отправить комментарий
Вы должны быть зарегистрированы чтобы оставить комментарий.
Вы должны быть зарегистрированы чтобы оставить комментарий.