@blv11 янв 2008 в 13:38

jQuery для верстальщика (часть 2): вкусные меню

3 мин

4.9K

Веб-разработка *

+12

Комментарии 72

@PavloPoliakov 11 янв 2008 в 13:41

Мне кажется такого рода статьи разумно укомплектовывать работающими демонстрационными примерами

@blv 11 янв 2008 в 13:52

Спасибо за комментарий, но в статье приведен полностью весь код, за исключением, тегов html, head и тому подобное.

@PavloPoliakov 11 янв 2008 в 13:56

я это и имею в виду) просто открыв такую статью мне в первую очередь хочется открыть результат и поклацать, посмотреть что получилось, а уже потом посмотреть как это получилось(если мне покажется интересен результат).

@pudovkin 11 янв 2008 в 16:32

поддерживаю.

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

@ArCH 11 янв 2008 в 17:08

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

@ArCH 11 янв 2008 в 17:11

тоесть ссылку для просмотра примерчика :)

НЛО прилетело и опубликовало эту надпись здесь

@blv 11 янв 2008 в 14:10

Если бы сформулировали свой комментарий без полуматерной лексики, я бы вам ответил по существу.

@Astralian 11 янв 2008 в 14:29

Тем неменее крайне важное замечание.

@blv 11 янв 2008 в 14:35

Я написал, что не согласен с формой, а не содержанием. Возможно, кто-то выложит код для вырезания тега ссылки у текущей страницы - изменений требуется минимум :) Про вырезание тегов и очистку "html от ворда" я расскажу в другой статье - материал у меня по этому поводу есть.

@PaulColomiets 11 янв 2008 в 20:12

Ну вот примерно такой вариант мне кажется более приемлимым:

var a = $("a[@href$=" + document.location.pathname + "]");
a.parent().text(a.text()).addClass('selected');

@blv 11 янв 2008 в 20:41

Если не возражаете, я ваш комментарий утащу в пост. Спасибо.

НЛО прилетело и опубликовало эту надпись здесь

@EvilShadow 11 янв 2008 в 20:41

http://ru.wikipedia.org/wiki/Хрен_(значения)

@Q_Zma 22 янв 2008 в 04:08

а если заменить "хреновое" на "фиговое", смысл разве изменится? :)

@Over 11 янв 2008 в 14:49

А вот представьте, что ссылки в списке - это разделы, у которых есть свои подстраницы. И на этих подстраницах необходимо также выделять раздел (хотя урл ссылки на раздел, и урл текущей подстраницы будут отличаться). Вот поэтому Ваш способ слабо применим на практике.

Статейка подойдет для ознакомления с селекторами в jQuery, но ни в коем случае как руководство к действию.

Кстати, по поводу "выключения" текущей ссылки - то же самое, если нужно вернуться в раздел - то жмут обычно её.

@blv 11 янв 2008 в 14:59

Спасибо за комментарий. Но, пожалуйста, перечитайте статью - я в самом начале написал про условия: меню - список, про подразделы там ничего не говориться. Про разворачивающиеся меню у меня вроде есть материал - выложу.

> Статейка подойдет для ознакомления с селекторами в jQuery, но ни в коем случае как руководство к действию.
Цитирую статью: "А прочитав статью, вы поймете, как делать более сложные выборки и цепочки запросов."

@kost 11 янв 2008 в 15:04

Если ты обратил внимание, то название параметра font-weight, написано немного по-другому fontWeight, то есть стилем «верблюд», который используется в JavaScript.

Поясните, с какой целью так сделано.

И еще. Начинается статья с обращения на "вы", а потом переходите на "ты". Неприятно.

@blv 11 янв 2008 в 15:11

Спасибо поправил.

@kost 11 янв 2008 в 15:14

Спасибо.

А по-поводу "fontWeight" поясните?

@blv 11 янв 2008 в 15:15

Пояснил, чуть ниже. :)

@blv 11 янв 2008 в 15:13

По поводу стиля верблюд, в JS насколько я знаю не используется символ дефис в идентификаторах.

@kost 11 янв 2008 в 15:21

Так здесь же описывается не идентификатор, а именно CSS-свойство. Надо писать его нормально.

@blv 11 янв 2008 в 15:31

Именно идентификатор, ведь это код на JS.

@kost 11 янв 2008 в 15:48

Хм...
Если верить документации, то в таком варианте вы правы.

Я использую Visual jQuery в качестве документации, там это неочевидно.

Вариант .css({'font-weight': "bold"}) также работает, единственное, font-weight надо взять в кавычки (из-за дефиса).

@blv 11 янв 2008 в 16:02

Да это тоже вариант, рад что удалось прояснить ситуацию.

@powerman 11 янв 2008 в 22:27

IMHO, раз уж Вы всё-равно несколько раз правили статью из-за комментариев, это тоже лучше изменить. Использование 'font-weight' значительно лучше, т.к. не вводит новых странных стилей требующих дополнительных комментариев "что есть верблюд и зачем он нужен".

@blv 11 янв 2008 в 22:32

Дело в том, что оба варианты равноценны. А по поводу правки статьи, я предпочитаю вносить в пост комментарии, которые дают что-то новое, точнее усовершенствование, а в комментах мы подробно обсудили, что есть "верблюд" (это, кстати, один из стандартных стилей именования идентификаторов) ;)

@minibikini 11 янв 2008 в 17:09

Спасибо. Очень ясно и без воды объясняете. Надеюсь продолжите :-)

@blv 11 янв 2008 в 17:18

Да продолжу. разумеется.

@minibikini 11 янв 2008 в 17:12

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

@blv 11 янв 2008 в 17:18

Я очень положительно отношусь к критике, особенно конструктивной. Если человек пишет "это все лажа и фигня, я с закрытыми глазами делаю лучше", я просто не реагирую, а если пишет, что "лучше использовать такое-то свойство, вот ссылочка на пример", то я безусловно плюсую его.

@Marss 11 янв 2008 в 18:18

а как быть, если урлы вроде /about/ ?
а если находимся на главной, т.е. нет никаких "menu.html"
то все ссылки жиром, пояните плиз..
Спасибо за статью! )

@blv 11 янв 2008 в 18:41

Спасибо за комментарий.
1) "При изменении формата ссылок (я использовал относительные пути), необходимо будет поменять и скрипт." Менять надо именно селектор.
2) Я не пробовал, но, по-моему, и в вашем случае будет работать, хотя я могу ошибаться.

@msfs11 11 янв 2008 в 19:47

спасибо! очень не хватало таких практических примеров

@pepelsbey 11 янв 2008 в 21:13

Полезно для изучения jQuery и абсолютно бессмысленно с точки зрения применения.
Вы пытаетесь почесать ухо левой ногой, иначе я не могу описать смысл клиентских манипуляций с меню.
Попробуйте мыслить категориями "документ", а не "веб-страничка". Документ должен быть понятен и без стилей, поэтому ссылки со страницы на саму себя и какие-то ухищрения с JS-выделением выглядят дико.

НЛО прилетело и опубликовало эту надпись здесь

@blv 11 янв 2008 в 22:13

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

НЛО прилетело и опубликовало эту надпись здесь

@blv 11 янв 2008 в 21:30

Спасибо за конструктивный комментарий, я его украду. ОК?

@pepelsbey 11 янв 2008 в 21:50

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

Рискну подсказать один пример из того, что делал сам: выдайте пользователю ненумерованный список месяцов, разделённый запятыми и порубленный в четыре строки, по три месяца в каждой. Причём запятых в коде нет (семантика, ага) и для человеческих браузеров это будет CSS, а для IE и всех, кто не справится с CSS3, это будет скриптовая вставка.

Вот это будет увлекательно ;) Как думаете?

@blv 11 янв 2008 в 22:11

Отвечаю по порядку.
1) Спасибо за конструктивный комментарий.
2) Мне не хочется ничего писать про jQuery, статьи я писал в свое время для одного журнала, когда это библиотека только появилась, и по ней не было русских материалов вообще. В данный момент, я перерабатываю эти материалы, и выкладываю сюда, потому что люди заинтересовались.
3) Проблем с примерами у меня нет - они все для обучения, причем последовательного, прочитайте, пожалуйста, первую статью, потом вторую, завтра послезавтра - третью.
4) Что касается вашего примера, мне кажется, что он очень узкому кругу лиц. Опять же, как обучающий пример - он не очень годиться. Вы мне можете возратить, написав, небольшую заметку, где ваш пример подробно разберете и напишите соответствующий код. С удовольствием поставлю плюсик вашему топику.
5) По поводу моих надуманности примеров, первый взят из небольшего и не очень известного сайта Википедия :) Второй (выделение текущего пункта меню) есть на многих сайтах и движках, но реализован на стороне сервера.
6) В любом случае спасибо за конструктивную критику, ей я всегда рад.

НЛО прилетело и опубликовало эту надпись здесь

@Q_Zma 22 янв 2008 в 05:06

jQuery('ul', context).css({'display': 'block', 'margin-left': '0px', 'padding-left': '0px'}).find('li').css({'display': 'inline', 'list-style': 'none', 'padding-left': '0px'}).end().find('li:nth-child(4n)').after('<br />').end().find('li:not(li:last)').after(',');

Разве это увлекательно? Стоит ради этого писать отдельный пост :-)? А вообще претензии по существу — надоели уже статьи с пустяковыми примерами (автор, простите), хочется какого-нибудь «мяска» и побольше, побольше! Вроде бы название ресурса не «First Steps», здесь матёрые волчары в основном тусуются ;-)

@blv 22 янв 2008 в 05:18

Уважаемый господин "волчара"! У вас есть все возможности написать пост с "мясом", причем большой! Только вы почему-то данной возможностью пока не воспользовались.

@Q_Zma 22 янв 2008 в 05:22

кармы не хватает :)

@Q_Zma 22 янв 2008 в 05:23

а минусовать было не обязательно, можно было бы наоборт кармы подкинуть, чтобы дать мне возможность что-то написать :-P

@blv 22 янв 2008 в 05:28

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

@Q_Zma 22 янв 2008 в 05:31

кто ж будет его читать, личный-то блог…

@Q_Zma 22 янв 2008 в 05:43

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

(автор, простите)

ну да ладно, фиг с ней, с кармой… простите ещё раз, если обидел чем — не хотел, честно :)

@blv 22 янв 2008 в 05:48

Я вам отписал в приват и зафрендил, а по поводу кармы, я же сказал - пишите и вас оценят. Давайте оффтопик закончим, особенно учитывая что статье сто лет в обед.

ЗЫ "чукча, кстати, в большей степени читатель, чем писатель" - в этом-то и дело.

@pepelsbey 22 янв 2008 в 13:01

Эмм… Писать весь CSS в jQuery? Вот это мясо, не спорю…

@Q_Zma 22 янв 2008 в 13:32

ну понятно дело, что не весь, просто чтобы компактно воткнуть сюда :)

@pepelsbey 22 янв 2008 в 14:01

%) верю

@Q_Zma 22 янв 2008 в 14:16

кстати, проверил в IE, кривовато работает, вылилось так вот походу прямо в камент :)

@anephew 12 янв 2008 в 10:20

так где можно посмотреть онлайн пример?

@brmn 12 янв 2008 в 16:17

Господа, устал бороться. Подскажите, плз, новичку:

имею длинную страницу div-ов с уникальными id. при вызове в середине страницы функции $(id).slideDown(600);
вся страница передергивается и переносит пользователя в начало, при этом выполняя задачу.
где грабли могут быть?

@Vro 14 янв 2008 в 12:13

Селекторы работают по тем же правилам что и CSS, в Вашем случае необходимо писать так: $('#'+id).slideDown(600);

@Q_Zma 22 янв 2008 в 05:17

для начала было бы неплохо ознакомиться с документацией и понять, что jQuery !== Prototype

@6epcepk 21 янв 2008 в 14:51

Ну а все-таки как если относительные ссылки?
Надо первый слэш обрезать..

@Q_Zma 22 янв 2008 в 05:21

jQuery([brain, eyes]).each(function () { this.switchOn(); }); ? :-D

@6epcepk 22 янв 2008 в 05:41

Что-то я не нашел описания не одной функции на сайте-прозводителе.
Вроде как "идем по всем элементам и переставляем местами"?
Или это вообще не к моему вопросу?)

@Q_Zma 22 янв 2008 в 05:48

это шутка :) означает дословно следующее: заполняем массив объектами «мозг» и «глаза», а потом проходимся циклом по элементам массива и для каждого элемента выполняем метод switchOn, т.е. "мозг"->"включить" и "глаза"->"включить", смысл всего этого: "включить мозг и глаза" :) блин, мне за мои шуточки карму в минус загонят…

@6epcepk 22 янв 2008 в 14:36

Ага, вот оно как, хорошо хоть не в гугл =)
Ну а по существу-то?)

@gro 22 янв 2008 в 14:05

Широко вошедшие в употребление в сфере интерфейсов слова "вкусные" и "богатые", символизируют новую эру в развитии интерфейсов или всего лишь беспомощность переводчиков и читателей?

@blv 22 янв 2008 в 14:36

Извините, вы кого имеете в виду под словом "переводчик"?

@gro 22 янв 2008 в 19:03

Тех, кто первым тупо переносит слова, которые бездумно подхватывают другие, даже, в том числе, и не при переводе, а при написании собственных текстов.

@blv 23 янв 2008 в 06:16

Извините, но вы бред откровенный пишите.

@gro 23 янв 2008 в 18:25

Я всего лишь выражаю своё скромное мнение, что словосочетание "вкусные меню" — блевотное.

@nicothin 24 авг 2008 в 21:38

очень жду продолжения цикла статей об этом JS-фреймворке!

@kamiram 10 авг 2012 в 08:03

а куда первую часть похерили?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий