Комментарии 83
В статье не увидел важного замечания — очень полезно для мобильных сайтов.
прошу прощения, не совсем понял что вы имеете ввиду
Должен существовать только один глобальный обработчик нажатия на ссылки $(“a”).click(…), который и делает всю работу по перегрузке нужных элементов страницы. Если же JavаScript отключен, то этот обработчик просто не срабатывает, и сайт продолжает работать в обычном режиме.
В таком подходе плохо то, что на свежедобавленные ссылки такое поведение вешатся не будет. Стоит использовать
$(document).click(function (e) {
if (e.target.tagName == 'A') {
// работаем со ссылкой
}
});
Ну или jQuery.delegate использовать
да да, согласен, это я дал маху в заголовке, на самом деле в коде, как видите не $(«a»).click(), а $(«a»).live()
// Обработчик на ссылки
$(selector+":not(.noajax) a:not(.noajax)").live("click.myEvent", function(e){
...........
}
у вас немножко ошибка:
jQuery.fn — аналог jQuery.prototype, то есть оно доступно из this каждого jquery- объекта, например $('div').lego.
В вашем случае эти статические переменные и методы стоит добавлять в jQuery.lego, тогда они не будут добавлятся каждому объекту
В вашем случае эти статические переменные и методы стоит добавлять в jQuery.lego, тогда они не будут добавлятся каждому объекту
и, соответственно такой подход
$().lego не очень хорош. надо отделить часть кода, который отвечает за глобальные действия и определить его в $.lego и часть кода, который отвечает за выбранный элемент и определить его в $.fn.legoТам понимаете, в оригинале есть еще одна функция, сейчас я её скопипастю… Вот:
Каждый Лего-див имеет класс .lego. Я в попыхах забыл об этом написать. И благодаря этому плагину можно у каждого элемента получит его лего-див, например $("#my_link").lego() — вернет первый родительски легодив, у него можно взять имя и все такое. Т.е. это для того, чтобы в коде знать какой элемент какому лего пренадлежит, допустим чтобы затемнить его или еще что. На самом деле не используется почти, но потенциальная возможность приятна
jQuery.fn.lego = function(e){
var ret = $(this).parents(".lego").first();
return ret;
}
Каждый Лего-див имеет класс .lego. Я в попыхах забыл об этом написать. И благодаря этому плагину можно у каждого элемента получит его лего-див, например $("#my_link").lego() — вернет первый родительски легодив, у него можно взять имя и все такое. Т.е. это для того, чтобы в коде знать какой элемент какому лего пренадлежит, допустим чтобы затемнить его или еще что. На самом деле не используется почти, но потенциальная возможность приятна
тогда стоит разделить на глобальные скрипты для всего документа и на локальные для каждого элемента, ато записывать переменные в свойства конструктора — не айс) еще больший не айс — создавать пустой элемент каждый раз вместо использования статических переменных
аха, я понял, да, действительно. Надо повторно используемые элементы вынести статическими. Мне на самом деле в JavaScript-е немного прокачаться не мешало бы. Очень много непонятного…
shock@jabber.com.ua — спрашивайте, если что
Может быть, тогда и перестанете его не любить )
Также могу порекомендовать книгу, которую проще всего найти по аббревиатуре SICP, в т.ч. на русском. Она не о конкретном языке, а о программировании вообще, но на JS научиться нормально программировать поможет однозначно.
Также могу порекомендовать книгу, которую проще всего найти по аббревиатуре SICP, в т.ч. на русском. Она не о конкретном языке, а о программировании вообще, но на JS научиться нормально программировать поможет однозначно.
Абсолютные ссылки не обрабатывем
Сюда можно было бы еще добавить проверку на
email:admin@example.com, а так же ftp, и другие протоколы)
Остается вопрос, нафига это надо? Этакий браузер в браузере? Зачем? Чем это лучше обычного перехода по страницам?
Я думаю это станет понятным, если вы пощелкаете сайт микросеть.рф. Там в самом верху есть кнопочка переключения режимов («надежный» — это как обычно, переход по страницам, и «быстрый» — это с перезагрузкой только текущего элемента). Просто получается быстрее. Особенно если вы листаете анекдоты в маленьком блочке: следующи, следующи… Одно дело вам будет загружаться вся страница с шапкой там и со всеми делами, а другое дело только текст следующего анекдота. И еще есть такой момент — браузер тратит какое-то время на построение дерева элементов, и если вы не заставляете его стоить все дерево целиком, а только вставляете один див — получается быстрее.
Еще один плюс — возможность кэшировать на стороне браузера некоторые блоки, особенно это помогает в листалке фотографий — когда нажимаете «предыдущая фотография», то она открывается мгновенно, а в случае с обычным режимом есть некоторая задержка. Как говориться мелочь, а приятно
Еще один плюс — возможность кэшировать на стороне браузера некоторые блоки, особенно это помогает в листалке фотографий — когда нажимаете «предыдущая фотография», то она открывается мгновенно, а в случае с обычным режимом есть некоторая задержка. Как говориться мелочь, а приятно
mojura.110mb.com/ — ещё быстрее и без каких либо аяксов
Еще одно из достоинств: экономия на трафике.
Еще бы ко всему этому какой-нибудь механизм, который будет автоматически формировать красивые URL-ы. То есть, чтобы в случае асинхронного доступа по адресу site.com/page/sub-page/, адрес лишь менялся на site.com/#/page/sub-page/.
И кнопки браузера будут работать.
И кнопки браузера будут работать.
Кнопки назад/вперед браузера будут работать?
Если страница длинная, то клик по нижней ссылке приведет при аякс запросе к перемотке фокуса наверх?
Если страница длинная, то клик по нижней ссылке приведет при аякс запросе к перемотке фокуса наверх?
Да, можете сами проверить, там последний загруженный урл сохраняется в document.location.hash — и когда вы нажимаете назад — он изменяется. Скрипт замечает изменение hash и загружает нужный блок.
А по поводу перемотки… Я пробовал сначала перематывать при переходах — но потом отказался. Не приятно когда страница дергается вверх. Хочется оставаться в той же позиции. Хотя для длинных страниц может это более ожидаемое поведение
А по поводу перемотки… Я пробовал сначала перематывать при переходах — но потом отказался. Не приятно когда страница дергается вверх. Хочется оставаться в той же позиции. Хотя для длинных страниц может это более ожидаемое поведение
пример реализации подобного механизма на базе Fullajax. В идеале можно натянуть на любую CMS, переписывать на сервере и клиенте ничего не нужно, только добавить некоторую логику для возможности «урезанной» выдачи при АЯКС запросах.
Гыыы, прикольная либа :) Спасибо, скачал, изучаю. Масюля такая. Надо автору написать, может идей каких подкинет.
Да да, нужно чтобы можно было получить любую ветку дерева контроллеров отдельно, без всего предшествующего и последующего выводов. Тогда можно не только на своем сайте блоки как хочешь размещать, но и встраивать в сайты партнеров, без дополнительной писанины — так на каждом блоке кнопочка «встроить себе на сайт» и опа, у тебя информер появился. А ваще в идале зашел на сайт друга, перетащил мышкой блочек себи и опа, он у тебя. Я думаю браузеры скоро дотумкают до драг энд дропа. Получится типа весь интернет — один лего конструктор, мать его ити. Зуб даю так и будет
Да да, нужно чтобы можно было получить любую ветку дерева контроллеров отдельно, без всего предшествующего и последующего выводов. Тогда можно не только на своем сайте блоки как хочешь размещать, но и встраивать в сайты партнеров, без дополнительной писанины — так на каждом блоке кнопочка «встроить себе на сайт» и опа, у тебя информер появился. А ваще в идале зашел на сайт друга, перетащил мышкой блочек себи и опа, он у тебя. Я думаю браузеры скоро дотумкают до драг энд дропа. Получится типа весь интернет — один лего конструктор, мать его ити. Зуб даю так и будет
>Я думаю браузеры скоро дотумкают до драг энд дропа.
В HTML5 уже додумали.
В HTML5 уже додумали.
Я думаю браузеры скоро дотумкают до драг энд дропа
Ну так Хром и FF уже дотумкали, по одноименному тегу можно найти массу интересного: drag-and-drop
sirus и является автором этой библиотеки ;)
Подобный принцип работы сайта на Zend_Framework реализуется тремя строчками, давно этим пользуюсь. И как мне кажется, более красиво чем у вас)
В том-то и дело, что у автора целый велосипед на тему mvc.
Предлагаете пользоваться Зенд? Хмм… может быть. Приведите, пожалуйста, пример этих трех строчек, для сравнения. Меня уже попрекали изобретением велосипедов, а я все равно продолжаю этим заниматься. Но факт в том, что иногда они получаются лучше других
В зенде смотрите mvc архитектуру в купе с помощником (action helper) Ajax, который при Ajax запросе меняет файл вида.
В велосипедах нет ничего плохого кроме того, что на продакшене предпочтение стоит отдавать проверенным и общераспространенным решениям. Распространенность играет ключевую роль в плане совместной работы и сопровождения кода.
В велосипедах нет ничего плохого кроме того, что на продакшене предпочтение стоит отдавать проверенным и общераспространенным решениям. Распространенность играет ключевую роль в плане совместной работы и сопровождения кода.
Я вас понимаю, сам этим раньше занимался) Я считаю это нормально и через это должен пройти каждый нормльный программист, это своего рода тренировка. Полученые таким образом знания мне часто помогают в работе.
А по поводу примера, есть как минимум два решения:
Одно из решений, в класс вашего базового контроллера (от которого наследуются все остальные) просто добавить такой код. Лучше всего в метод init() — своего рода конструктор в контроллерах Zend'a.
Немного поясню, если к нам пришёл асинхронный запрос (проверяется это наличием заголовка 'X-Requested-With: XmlHttpRequest' в принимаемом запросе) то мы отключаем глобальный шаблон и отдаём только шаблон который отвечает за основной контент.
И немного JavaScript:
А по поводу примера, есть как минимум два решения:
Одно из решений, в класс вашего базового контроллера (от которого наследуются все остальные) просто добавить такой код. Лучше всего в метод init() — своего рода конструктор в контроллерах Zend'a.
if ($this->getRequest()->isXmlHttpRequest()) {
$this->getHelper('layout')->disableLayout();
}
Немного поясню, если к нам пришёл асинхронный запрос (проверяется это наличием заголовка 'X-Requested-With: XmlHttpRequest' в принимаемом запросе) то мы отключаем глобальный шаблон и отдаём только шаблон который отвечает за основной контент.
И немного JavaScript:
$('a.ajax').click(function(){
$.get($(this).attr('href'), function(data) {
$('.result').html(data);
});
});
Чтобы, если JavaScript включен, блоки сайта перегружались AJAX-сом, а если JavaScript-а нет, то происходил просто переход на новую страницу?
Какая глупость. Не нужно пихать AJAX куда ни попадя.
ИМХО, автор переизобрел unobtrusive javascript и REST.
И как подобные посты вылезают на главную-то?
Нет, похоже автор переизобрел AJAX :)
А заодно изобрел и новый PHP фреймворк с новым MVC подходом.
Остается только предложить пойти на www.books.ru/shop/search?search_type=+&query=ajax
А заодно изобрел и новый PHP фреймворк с новым MVC подходом.
Остается только предложить пойти на www.books.ru/shop/search?search_type=+&query=ajax
благодарю, предпочитаю думать своей головой. Пусть изобрел велосипед, но зато маленький и я знаю для чего нужна каждая строчка его кода
Честное слово. Много книг хороших и разных. В некоторых все на столько четко и детально (порой даже слишком) описано, что и вопросов никаких не останется. Ведь AJAX появился не сегодня и не вчера. Философия подхода уже давно пережевана десятки раз.
А современные PHP фреймворки предоставляют средства для упрощения жизни с AJAX.
Тем не менее, топик стал довольно популярным. Это знак того, что не для всех все так прозрачно… Либо просто люди книг не читают…
За что выражаю благодарность, так это за пропаганду ненавязчивого JS. Только я бы не стал вешать на все ссылки поголовно. Лучше определить их каким-либо классом.
А современные PHP фреймворки предоставляют средства для упрощения жизни с AJAX.
Тем не менее, топик стал довольно популярным. Это знак того, что не для всех все так прозрачно… Либо просто люди книг не читают…
За что выражаю благодарность, так это за пропаганду ненавязчивого JS. Только я бы не стал вешать на все ссылки поголовно. Лучше определить их каким-либо классом.
graceful degradation ajax
По моему мнению отключенный javascript большая утопия в наш современный век, я имею ввиду обычные ПК, т.е. телефоны и прочее в расчет не берем. Како процент пользователей без поддержки JS, 0,1%
прочитал, возник вопрос что если js еще не успел подгрузиться и юзер кликает по ссылке, будет ли переход?
Очень резонный вопрос! Если началась загрузка блока — его область затеняется полупрозрачным белым дивом («белая плева» в коде). Она не дает кликать по ссылкам, пока идет загрузка. Клянусь придумал сам, потом пошел вконтакте и увидел у них то же самое, обидно было :(. А потом оказалось так делают все нормальные сайты, ну кроме гугла — он затеняет и дает кликать по ссылкам сквозь плеву. Да гугл вообще неудачники ИМХО.
> Не знаю, как ты, дорогой хаброчтец, но я, твою мать, лучше продам свою душу дьяволу, чем буду дебажить свой JavaScript во всех многообразиях браузеров!
Use jQuery, man!
Use jQuery, man!
А чтобы получить вывод только нужного Lego-объекта, нам всего лишь нужно дописать параметр ajax в адресную строку
// например:
// example.ru/?LegoSite=fotos&ajax={имя_лего_вывод_которого_нам_надо_получить}
JQuery умеет посылать специальный заголовок (кажется X-Requested-With), о том, что выполняется AJAX запрос, поэтому не нужно указывать дополнительный избыточный GET-параметр. Эту особенность используется ASP.NET MVC.
// например:
// example.ru/?LegoSite=fotos&ajax={имя_лего_вывод_которого_нам_надо_получить}
JQuery умеет посылать специальный заголовок (кажется X-Requested-With), о том, что выполняется AJAX запрос, поэтому не нужно указывать дополнительный избыточный GET-параметр. Эту особенность используется ASP.NET MVC.
Спасибо всем за коменты, побегу на работу…
на медленном интернете — при клике по нескольким ссылкам — глючит
«Думали ли Вы когда-нибудь о том, чтобы Ваш сайт одинаково хорошо работал с включенным JavaScript-ом и без JavaScript-а?»
— я в таких случаях банально делаю полнофункциональный сайт без яваскрипта вообще, а потом навешиваю красивости и аяксы. для цмс которую я использую (Contao) есть хороший простенький php-скрипт, который позволяет через себя вызывать нужные модули и контентные элементы с параметрами, не запрашивая целую страницу. и всё в шоколаде
— я в таких случаях банально делаю полнофункциональный сайт без яваскрипта вообще, а потом навешиваю красивости и аяксы. для цмс которую я использую (Contao) есть хороший простенький php-скрипт, который позволяет через себя вызывать нужные модули и контентные элементы с параметрами, не запрашивая целую страницу. и всё в шоколаде
Вам бы еще озаботится нормальными URL, потому как время index.php?million_bukv несколько прошло…
// белая плева, закрывающая загружаемый блок
этот комментарий в коде выдавил у меня слезу!
этот комментарий в коде выдавил у меня слезу!
Такой интерактив конечно круто, но подойдет он не для каждого сайта (ИМХО). Т.к. будут проблемы с SEO ссылки, со сторонних ресурсов (хотя конечно не все) будут идти с #, а они не обработаются ПС — будут вести не на релевантные страницы.
не не, у каждой ссылки есть её «нормальный аналог», т.е. ссылку конечно надо давать на него (ну посмотрите поиск в кконтакте тоже использует #bla-bla-bla) та же фигня, но ссылку лучше давать без решетки конечно. Т.е. то что после решетки, перенести в место, сразу после домена
не не, у каждой ссылки есть её «нормальный аналог», т.е. ссылку конечно надо давать на него (ну посмотрите поиск в кконтакте тоже использует #bla-bla-bla) та же фигня, но ссылку лучше давать без решетки конечно. Т.е. то что после решетки, перенести в место, сразу после домена
Приведу пример.
Есть допустим медиа ресурс (новости, статьи и т.д.). Есть раздел site.ru/news/ у него будут Ajax ссылки site.ru/news/#page/1/. Пользователь копирует ссылку из адресной строки и пуляет ее в свой блог. Поисковый бот видит ссылку site.ru/news/#page/1/ и дает считает ее ссылкой на — site.ru/news/, но мы хотели не этого.
Вот, как то так. Идеально бы было если ПС ввели какой-то маркер (Google вроде предлагал что то) и если в ссылке его находили, то удаляли и получали обычную ссылку.
Есть допустим медиа ресурс (новости, статьи и т.д.). Есть раздел site.ru/news/ у него будут Ajax ссылки site.ru/news/#page/1/. Пользователь копирует ссылку из адресной строки и пуляет ее в свой блог. Поисковый бот видит ссылку site.ru/news/#page/1/ и дает считает ее ссылкой на — site.ru/news/, но мы хотели не этого.
Вот, как то так. Идеально бы было если ПС ввели какой-то маркер (Google вроде предлагал что то) и если в ссылке его находили, то удаляли и получали обычную ссылку.
Все просто, если ссылка содержит хеш, то нужно её из вида:
site.ru/news/#/some/other/path
превращать в
site.ru/some/other/path
т.е. отсекать все что между доменом и решеткой, включая решетку.
и отображать его внизу страницы (ссылка на эту страницу: site.ru/some/other/path)
Пояснив пользователям, что если они помещают где-то на других проекта ссылки, то нужно использовать её
site.ru/news/#/some/other/path
превращать в
site.ru/some/other/path
т.е. отсекать все что между доменом и решеткой, включая решетку.
и отображать его внизу страницы (ссылка на эту страницу: site.ru/some/other/path)
Пояснив пользователям, что если они помещают где-то на других проекта ссылки, то нужно использовать её
А вообще, по мне так лучше бы браузеры использовали то, что после решетки как путь элементов, загруженных AJAX-ом. Все таки это актуальнее чем переход по меткам.
А еще лучше чтобы браузеры давали менять адресную строку из яваскрипта, не совершая переход. Тогда и проблема красивых урлов решилась бы сама собой. Есть то, что видит пользователь — а есть то что на самом деле. И чем они только думают
А еще лучше чтобы браузеры давали менять адресную строку из яваскрипта, не совершая переход. Тогда и проблема красивых урлов решилась бы сама собой. Есть то, что видит пользователь — а есть то что на самом деле. И чем они только думают
прикол в демке, если драгнуть загруженную большую картинку, то все хинты мигнут два раза, как будто я два раза быстро нажал CTRL
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
PHPLego: Ненавязчивый AJAX