Переходы по страницам без перезагрузки сайта своими руками
Переходы по страницам без перезагрузки сайта своими руками
Итак.Начнём сразу с корня.Это воплощение урока с руселлера для САР...ну и для всех сайтов.
В общем,что нам нужно:
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.Ну это для тех,кто очень хотел.

ну и наконец архив с необходимыми файлами: Вы не можете скачивать файлы с нашего сервера


Рубрика: Бесплатное » Дополнения   |   Автор: Alex   |   Просмотры: 10174
Комментариев: 52
Публикаций: 1
ICQ: 646864908
- 55 +
  Автор: Совесть   |   Группа: Пользователи   |   Дата: 09 марта 2011  
Прикольно! давно искал такую штуку)!
Комментариев: 2
Публикаций: 0
ICQ: --
- 0 +
  Автор: Zheny1   |   Группа: V.I.P.   |   Дата: 09 марта 2011  
Нужная вещь!
Комментариев: 134
Публикаций: 0
ICQ: 428155128
- 171 +
  Автор: SoooFast   |   Группа: Пользователи   |   Дата: 31 марта 2011  
После нажатия на "Generate it!" не забудьте его скачать,т.к. просто сохранить как картинку не получится

да ладно? а у мня получается :)))

Цитата: Zheny1
Нужная вещь!

ага, ток при обновлении страницы будешь попадать не туда, где был, а на главную!
Комментариев: 1
Публикаций: 0
ICQ: --
- 1 +
  Автор: armweb   |   Группа: Пользователи   |   Дата: 24 сентября 2011  
Скажите пожалуйста, как делать, чтоб внутри ajax-wrap работал яваскрипт?
Заранее спасибо!
Комментариев: 338
Публикаций: 169
ICQ: 650073308
- 291 +
  Автор: Alex   |   Группа: Пользователи   |   Дата: 28 ноября 2012  
Цитата: SoooFast
ага, ток при обновлении страницы будешь попадать не туда, где был, а на главную!

для этого в хтмл 5 изобрели history.pushstate()
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.