Итак.Начнём сразу с корня.Это воплощение урока с руселлера для САР...ну и для всех сайтов.
В общем,что нам нужно:
1.Библиотека Jquery - если подключена,то эт хорошо.Не подключена - качаем архив с конца статьи и ставим.
2.Немного знаний в ксс хотя б для самого GIF лоадера
3.Само собой,нужны познания в HTML
Сразу скажу,ajax я не знаю.Начинаю только разбираться.Тем не менее я в этом разобрался и для меня это далось нелегко...Так что кормим хряка и не забываем...ну а ниже само собой идёт инструкция по установке
Ставим:
1.Открываем header.php и перед тегом
добавляем:
Этот яваскрипт не весь с руселлера - тут добавлен вывод лоадера.Но можно считать,что яваскрипт мы разобрали.Следом вставим:
Объясняю:
position: fixed; - выводит объект(в данном случае лоадер) на выставлено позиции даже при прокрутке страницы.можно поставить на absolute (т.к. старый IE не видит fixed),тогда выведется фрагмент в том месте,где он загрузится и при прокрутке не будет \"ползать\"
top: 50%; - отступ сверху.можно задать пикселями,но я у себя ставил по центру
left: 50%; - отступ слева.
background: #fff; - цвет фона.Если шарите,то можете менять и цвет или лепить картинку.GIF анимация на фоне воспроизводиться не будет
2.Теперь мы вставим сам лоадер.После тега
Добавим:
Пожалуйста,подождите!

в принципе,тут разобраться просто.Это обычный HTML.Тут код лоадера,как у меня на проекте
3.Самое интересное,что пропустил и во что не врубился XAKER.Jquery парсит всё,что стоит в id=\"ajax-wrap\" и id=\"text\".Однако,каждую страницу нам править не вариант,т.к. это много вазни.Особенно влом было делать мне это для себя.Однако,если включить логику,то можно вставить div с этим id в header.php чтоб грузило не всю страницу,а только контент.В header.php в самый конец вставляем:
в принципе,месторасположение выберите сами,если есть познания в HTML ну и умение видеть код визуально.
Ну и конечно же в footer.php в самое начало вставить:
иначе лишние div-ы могут убить дизайн.50% проблемы есть.
4.Остальные 50% работы заключаются в том,что надо определить ссылки,по нажатию на которые будет грузиться контент страницы,на которую ведёт ссылка.Для этого самый рациональный вариант ограничить ссылку тегами:
и
Т.е. примерно должно выглядеть это так:
в принципе вот и вся вазня.Однако,остановимся на лоадере.Сами понимаете,что рисовать его впадлу.Для этого идём сюда и генерируем нужный лоадер.Там всё понятно,я надеюсь.После нажатия на \"Generate it!\" не забудьте его скачать,т.к. просто сохранить как картинку не получится.Потом назовём loader.gif и льём в корень.
Вот и вся статья.Надеюсь,что многим помог.Длф мфс редактируем файлы head.php и foot.php в папке blocks.Ну это для тех,кто очень хотел.
ну и наконец архив с необходимыми файлами:
В общем,что нам нужно:
1.Библиотека Jquery - если подключена,то эт хорошо.Не подключена - качаем архив с конца статьи и ставим.
2.Немного знаний в ксс хотя б для самого GIF лоадера
3.Само собой,нужны познания в HTML
Сразу скажу,ajax я не знаю.Начинаю только разбираться.Тем не менее я в этом разобрался и для меня это далось нелегко...Так что кормим хряка и не забываем...ну а ниже само собой идёт инструкция по установке
Ставим:
1.Открываем header.php и перед тегом
добавляем:
Этот яваскрипт не весь с руселлера - тут добавлен вывод лоадера.Но можно считать,что яваскрипт мы разобрали.Следом вставим:
Объясняю:
position: fixed; - выводит объект(в данном случае лоадер) на выставлено позиции даже при прокрутке страницы.можно поставить на absolute (т.к. старый IE не видит fixed),тогда выведется фрагмент в том месте,где он загрузится и при прокрутке не будет \"ползать\"
top: 50%; - отступ сверху.можно задать пикселями,но я у себя ставил по центру
left: 50%; - отступ слева.
background: #fff; - цвет фона.Если шарите,то можете менять и цвет или лепить картинку.GIF анимация на фоне воспроизводиться не будет
2.Теперь мы вставим сам лоадер.После тега
Добавим:
Пожалуйста,подождите!

в принципе,тут разобраться просто.Это обычный HTML.Тут код лоадера,как у меня на проекте
3.Самое интересное,что пропустил и во что не врубился XAKER.Jquery парсит всё,что стоит в id=\"ajax-wrap\" и id=\"text\".Однако,каждую страницу нам править не вариант,т.к. это много вазни.Особенно влом было делать мне это для себя.Однако,если включить логику,то можно вставить div с этим id в header.php чтоб грузило не всю страницу,а только контент.В header.php в самый конец вставляем:
в принципе,месторасположение выберите сами,если есть познания в HTML ну и умение видеть код визуально.
Ну и конечно же в footer.php в самое начало вставить:
иначе лишние div-ы могут убить дизайн.50% проблемы есть.
4.Остальные 50% работы заключаются в том,что надо определить ссылки,по нажатию на которые будет грузиться контент страницы,на которую ведёт ссылка.Для этого самый рациональный вариант ограничить ссылку тегами:
и
Т.е. примерно должно выглядеть это так:
в принципе вот и вся вазня.Однако,остановимся на лоадере.Сами понимаете,что рисовать его впадлу.Для этого идём сюда и генерируем нужный лоадер.Там всё понятно,я надеюсь.После нажатия на \"Generate it!\" не забудьте его скачать,т.к. просто сохранить как картинку не получится.Потом назовём loader.gif и льём в корень.
Вот и вся статья.Надеюсь,что многим помог.Длф мфс редактируем файлы head.php и foot.php в папке blocks.Ну это для тех,кто очень хотел.
ну и наконец архив с необходимыми файлами:
Теги
5 комментарии
162 загрузки
Детали
- Первый релиз 02 мар 2011
- Последнее обновление 16 сен 2026
- Документация Есть
- Содержимое файлов Исходные файлы
- Всего товаров 203
- Рейтинг (0)
- Регистрация 19 фев 2011
- Уровень 0
- Пользователь подтверждён Да
- Телефон подтверждён Нет
- Email подтверждён Нет

Alex
- 28 ноя 2012для этого в хтмл 5 изобрели history.pushstate()
armweb
- 24 сен 2011Скажите пожалуйста, как делать, чтоб внутри ajax-wrap работал яваскрипт?
Заранее спасибо!
SoooFast
- 31 мар 2011да ладно? а у мня получается :)))
ага, ток при обновлении страницы будешь попадать не туда, где был, а на главную!
Zheny1
- 09 мар 2011Нужная вещь!
Совесть
- 09 мар 2011Прикольно! давно искал такую штуку)!