01:53 Переходы по страницам без перезагрузки сайта своими руками | |
| Итак.Начнём сразу с корня.Это воплощение урока с руселлера для САР...ну и для всех сайтов. В общем,что нам нужно: 1.Библиотека Jquery - если подключена,то эт хорошо.Не подключена - качаем архив с конца статьи и ставим. 2.Немного знаний в ксс хотя б для самого GIF лоадера 3.Само собой,нужны познания в HTML Ставим: 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" > <font size='1' color="black"><fieldset> Пожалуйста,подождите!</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.Ну это для тех,кто очень хотел. Качаем файлик | |
|
| |
| Всего комментариев: 0 | |