jQuery для верстальщика (часть 1): стрелочки для ссылочек

[Uznick]

По технической стороне: проще было обойтись css, по-моему.

Но как пример использования фреймворка — вполне.

[blv]

Если данная статья понравиться читателям блога, я выложу примеры посложнее, где голым CSS не обойтись.

[xaerom]

Жду продолжения. Плюсик ставить не могу :(

[poorum]

Понравится. С удовольствием прочту продолжение. Спасибо за эту.

[blv]

Я вижу, что понравилась, судя по плюсам, и тому, что статья вылезла на главную - значит с меня продолжения завтра.

[CurlyBrace]

Ждем примеров по-сложнее. Чем сложнее, тем лучше. Jquery rulez.

[blv]

Сложность будет по нарастающей, это только открывающая статья.

[CurlyBrace]

В добрый час )

[grimgav]

Как и xaerom, жду продолжения )) только хотелось бы чего-нибудь посложней )

[cloud]

Все зависит от задачи.
Мне вот, например, надо было прикрепить к каждой ссылке картинку, по клику на которую вываливалась контекстная менюшка.

[masterbo]

Может вы не заметили, но этот метод меняет не css а html. Внекоторых случаях это заметно гибче.

[Uznick]

может из моего комментария не понятно, но я про данный конкретный пример. Для запихивания одинаковых картинок в ссылки проще юзать css.

[masterbo]

Я великолепно понял о чём вы. Но в данном конкретном примере нет никакого дизайна, а будь у <a> собственный фоновый рисунок пришлось бы "чудить" с html. Именно для таких случаев этот пример актуален — не слать же все эти вложенные <img> с сервера, если их можно сгенерить "на месте".

[pepelsbey]

В общем, двумя руками поддерживаю оратора.
Про iQ и сам бы послушал. Как вариант темы: реализация CSS3 штуковин в IE. Нормальные браузеры обойдутся CSS-кодом, а для IE — заплатка.

[Zibx]

Напиши лучше не про аякс, а про дрэг эн дроп на jQuery. К примеру есть гора каких то дивов, и нам надо, чтобы можно было сформировать допустим меню ресторана на нужный день, перетянув в него рыбу, мясо и доширак (подобный пример очень прост если использовать расширение ui для jQuery). А усложнить можно допустим, сделав меню текущего дня сортируемым :)

[blv]

Спасибо за совет - учту. Пока выложу то, что есть у меня готовое: небольшие примеры для верстки, потом есть примеры посложнее с элементами программирования и, про аякс. Что касается Drag and Drop, то у меня готовых примеров нет, имеется в виду написанных самостоятельно.

[drJonnie]

Draggables и Droppables из jQuery User Interface вам поможет.

[Zibx]

И dimensions, без которого они не варят.

[lifestar]

В примере аякса нету же)
По поводу меню - можно использовать и плагин Interface, хотя я не исключаю, что в основу jQuery User Interface он и взят

[ganzer]

Да, очень интересно посмотреть. Хотя сейчас отвлекусь и скажу что такой подход неверен (имхо). Глубоко убежден что меню, изначальное, делается не на бумажке карандашиком и потом его на сайт арт-директор вставляет, а можно добится, чтобы оно изначально было в человеческом виде, неважно в какой программе, потом его экспортнуть на сайт и всех делов.

[blv]

Тут немного другое имели в виду, что-то типа корзины товаров. Посмотрите демки вот здесь: http://ui.jquery.com.

[Zibx]

Ну можно и так в принципе сделать, но я не занимаюсь ресторанами, это было первой идеей про драдэн дроп щас просто :)

[4g3n7]

Да, что-нибудь с драг-н-дропом думаю было бы очень в тему!
Или какие-нибудь продвинутые формы.

Ну например есть лента скажем товаров (каждый товар — горизонтальный блок название, фотка, описание, цена), и надо выбрать несколько.
Можно чекбоксы слева у каждого товара поставить, но это старо выглядит и не юзерфрендли)

Но однозначно про jQuery будет интересно еще что-нибудь узнать, пишите еще!

[blv]

Про формы будет дальше, главное чтобы интересно было.

[4g3n7]

Интересно-интересно! Особенно про формы)

[blv]

http://habrahabr.ru/blog/webdev/33739.ht… - вторая часть.

[lifestar]

Можно выбрать и просто нажав на кнопочку, которая аяксом запишет в сессию ваш товар (если вы не зарегестрированы). А так прочитав ваш пример, сам собой у меня напросился этот пример: http://interface.eyecon.ro/demos/cart.html

[totmakov]

А может кто-нибудь написать хорошую статью-обзор-сравнение js фреймворков вроде jQuery/mootoloos/др.? Или может где в Интернете есть?

Если надо что-то сделать на js, я использую mootools. Но почему я это делаю сказать не могу, просто потому что немного уже поработал с ним. Может в каких-то задачах лучше было бы использовать какой-либо другой фреймворк? Было бы неплохо почитать простой и объективный обзор, а вот заниматься особо поисками и сравнением некогда.

[blv]

Чтобы не разводить холиворов, скажу про 100% случаи: надо использовать jQuery для друпала, и Prototype для рельсов. В остальных случаях надо думать.
И по поводу "а вот заниматься особо поисками и сравнением некогда", поверьте, вы потратите больше времени, если будете забивать гвозди пилой, когда рядом лежит молоток, но у вас не времени, оценить, что в данном случае лучше :)

[blv]

Пример про пилу и молоток вымышлен, и никак не связан с "jQuery/mootoloos/др.".

[totmakov]

Честно говоря, по отрывкам кода, которые я видел, у меня сложилось впечатление, что фреймворки примерно одинаковы. Могут быть только вопросы с быстродействием... А по другим параметрам... У mootools, вот, сайт здорово выглядит, анимация вся гламурная :) (это не критерий конечно, но мне нравится).

А использую я их либо с пиотном (Django), либо под ASP.Net %)

[blv]

Какая JavaScript-библиотека лучшая?
В данном топике, наверное, стоит закончить обсуждать другие фреймворки ;)

[blv]

Тема только для подписчиков, которым это интересно.

[snow_wons]

А конструкция
a[href^="http://"]:not([href*="example.com"])::after {content: "\2197";}
уже не работает?
К тому же в приведённом Вами примере рисунок будет добавлен ко всем ссылкам. (или я что-то пропустил?)

[blv]

Не палите тему ;) ;) ;)

В этой статье я описал стрелочку именно для всех ссылок, дальше будет статья про менюшки, там как раз надо будет делать выборку по домену в ссылке.

[prudis]

Не лучше ли в CSS пару лишних строк писать? Этим JS уже вообще переполнены некоторые сайты/страницы.

[blv]

Я в статье отметил, что данную конкретную задачу можно решать и через CSS, но задачи чуть сложнее уже нет. В комментариях привели есть, кстати пример.

[blv]

jQuery поддерживает большинство браузеров (фактически везде, где есть техническая возможность):
· IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+

[sunnybear]

спасибо, что меня вспомнили :)

[blv]

Вспомнил не зря - у вас действительно очень неплохая статья, а что самое главная имеет практическую ценность, сейчас на хабре большей частью статьи стали новостными.

[Kefir]

http://rsdn.ru/article/inet/jQuery.xml?print

[blv]

Тоже неплохая ссылка, немного скомкано, правда, написано.

[diagn0z]

спасибо, жду следующих статей

[michas]

не плохая статья. в дальнейшем хотелось бы побольше примеров для использования в жизни

[minibikini]

прикольно. ждем продолжения.

[m151]

По-моему мнению, jquery отличная библиотека для создания фронт-эндов в плане функциональности

А вот mootools более подходит для всяких новомодных (а часто и полезных :) рюшечек.

Вооот, хотелось бы увидеть статьи о mootools, ибо эти самые рюшечки очень актуальны сейчас.

[blv]

По поводу сравнения библиотек, я давал ссылку выше, где можно поспорить, о том, какая библиотека лучше.

[danki]

Спасибо. Интересно, буду ждать продолжения.

[dyakov]

Думаю jQuery очень хорошо подходит для разного рода красивостей с минимумом html-кода.
Например, а контенте.
Представьте, html-код у вас одинаков на всех сайтах, а выглядит это всё как угодно и по разному.
Автору спасибо. Пишите дальше, как раз хочу освоить

[dyakov]

>Представьте, html-код у вас одинаков на всех сайтах, а выглядит это всё как угодно и по разному.
Я имею ввиду html-код контента, т.е. при редизайне контент трогать не нужно

[Marss]

А если, скажем, ссылки на странице необходимо заключить (которые target _blank) в теги noindex
сработает append?

[nicothin]

>>Как делать более сложные выборки (в том числе внешние ссылки) читайте в следующих частях.

а где же следующие части?