Переходы по страницам без перезагрузки сайта своими руками

Пока могу ползать по интернету — решил кинуть статью..ну плюс Xaker никак не втыкнёт как сделать,зато в исходнике ковыряться может…в общем,читаем и ставим.Итак.Начнём сразу с корня.Это воплощение урока с руселлера для САР…ну и для всех сайтов.
В общем,что нам нужно:
1.Библиотека Jquery — если подключена,то эт хорошо.Не подключена — качаем архив с конца статьи и ставим.
2.Немного знаний в ксс хотя б для самого GIF лоадера
3.Само собой,нужны познания в HTML

Сразу скажу,ajax я не знаю.Начинаю только разбираться.Тем не менее я в этом разобрался и для меня это далось нелегко…Так что кормим хряка и не забываем…ну а ниже само собой идёт инструкция по установке

Ставим:
1.Открываем header.php и перед тегом

</head>


добавляем:


<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.Теперь мы вставим сам лоадер.После тега

<body>


Добавим:


<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">


и

</span>

Т.е. примерно должно выглядеть это так:


<span id="ajaxgo"><a href="страница">ссылка</a></span>

в принципе вот и вся вазня.Однако,остановимся на лоадере.Сами понимаете,что рисовать его впадлу.Для этого идём сюда и генерируем нужный лоадер.Там всё понятно,я надеюсь.После нажатия на \»Generate it!\» не забудьте его скачать,т.к. просто сохранить как картинку не получится.Потом назовём loader.gif и льём в корень.

Вот и вся статья.Надеюсь,что многим помог.Длф мфс редактируем файлы head.php и foot.php в папке blocks.Ну это для тех,кто очень хотел.

ну и наконец архив с необходимыми файлами: ajax.zip

Автор публикации

не в сети 14 лет

Alex

Комментарии: 0Публикации: 166Регистрация: 19-02-2011

Понравилась статья? Поделись в соц. сетях:

Похожие новости

Отправить комментарий

wpDiscuz
Авторизация
*
*
Регистрация
*
*
*
Генерация пароля