RayZ Apr 9 2009 at 16:19

Исследование на тему замены стандартных кнопок

8 min

2.8K

JavaScript*

+39

113

Comments 113

LeKot Apr 9 2009 at 16:32

Жесть. Я недооценивал труд веб-работников.

MisterX Apr 9 2009 at 17:11

А демку можно где-то глянуть?

khizhaster Apr 9 2009 at 17:21

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

RayZ Apr 9 2009 at 17:46

Читаем update к статье, или просто переходим по ссылке:
rayz.ru/misc/custombuttons/

Supercharged Apr 9 2009 at 17:24

Да чтоб я на сайты ходил с такими кнопками…

khizhaster Apr 9 2009 at 17:33

Простой пример — GMail :-) И ходят, поверьте мне, ходят!

Pirate Apr 9 2009 at 21:11

Ходят, потому что аналогов нет. Но после введения этих кнопок, у меня сначала было какое-то отвращение к ним. Но это со временем прошло. Сейчас уже не обращаю на них внимание.

khizhaster Apr 9 2009 at 21:33

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

znvPredatoR Apr 10 2009 at 02:43

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

slesar Apr 9 2009 at 17:37

Вот есть хороший топик про кнопки habrahabr.ru/blogs/css/56389/

RayZ Apr 9 2009 at 17:54

Я больше делал упор не на сам результат «посморите, какая красота», а на функциональность и применение.
В смысле — как это сделать и каковы подводные камни.

Поэтому и заголовок — Исследование…

pgg Apr 9 2009 at 21:49

У вас код избыточный, посмотрите в камментах мой пример.

Arekus Apr 9 2009 at 17:52

Вы меня простите конечно, но 126кб плюс 36 секунд ожидания окончания загрузки (в примере отвалился один файл) — проверял Firebug'ом — ради двух кнопок — это как-то чересчур.

RayZ Apr 9 2009 at 17:57

Пардон, сейчас поправим ;)

В реалии интерфейс продукта требует наличие какого-нибудь js-фреймворка, и вышеописанное делалось далеко не для двух кнопок, а для сотен ;)

И не только для кнопок.

Думаю, вскоре появится ещё одно небольшое исследование по поводу другого рода «удобности»

gooddy Apr 9 2009 at 18:15

задисейбленая кнопка не нажимается если жать где-то по середине, а если навести где-то с самого краю и попробовать нажать, то оппаньки :)

RayZ Apr 9 2009 at 18:24

;) Это не баг, это фича
В цсс в демке забыл добавить пару строчек

kex Apr 11 2009 at 22:52

В опере и ие6 жмется по всей ширине.

alekciy Apr 9 2009 at 19:08

Эх… старая избитая тема. Учитывая, извините меня, ублюдочный уровень поддежки оформления стиля кнопок как со стороны браузеров, так со стороны и стандартов проще всего использовать дефолтные стили офорления. А свете юзабили это даже предпочтительно делать, т.к. на каком бы сайте я не был я сразу вижу, где есть кнопки ибо стиль оформления у них от сайта к сайту один и тот же — дефолтный.

И вообще главное ехать, а не шашечки ;)

RayZ Apr 9 2009 at 19:36

Обоснуйте.

Кнопки рисуются как бы следуя законам гуя в котором порожден был браузер.
Любое приложение использует один стиль отображения интерфейса и по идее не должен выглядеть иначе. А тут у нас разброс и шатание. Я понимаю, какую сторону вы представляете. И вы правы, только не в моем случае.

Не с проста я статью начал со вышеперечисленных слов. Это было сделано ДЛЯ веб-приложения.
Юзабилити и дизайн имеет смысл. И попробуйте оспорить.

alekciy Apr 10 2009 at 02:11

А я о веб и говорю. Законы гуя это все звучит хорошо я с этим согласен. Но в рамках какого то скомпилированного приложения. В рамках же веб приложения которое работает череб браузер не совсем согласен. Порой видишь на страницах такой закон гуя, что хочеться настучать дизайнеру по созвучному выступающему органу… Я привык к определенному виду кнопок в своем браузере, на какую бы страницу я не попал я всегда на ней без труда нахожу нужные кнопки. Но порой не сразу получается сориентироваться когда кнопки следуют законам гуя (особо когда их делает кривой дизайнер или кодер). И это не говоря уже о том, что у меня картинки отключены по дефолту…

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

MTonly Apr 9 2009 at 21:08

Теперь увеличиваем размер шрифта средствами браузера и смотрим, что стало с кнопками. ;-)

pgg Apr 9 2009 at 22:22

Только один маньяк из десяти использует эту функцию.
Остальные 99.9999% пользователей сети даже не догадываются о существовании этого.

Тем более адекватные браузеры давно делают zoom.

pvp Apr 9 2009 at 23:30

фф3 — адекватный браузер? ну, по крайней мере, зум делает. Но с кнопками, как нам и намекал предыдущий оратор, при зуме происходит жопа.

MTonly Apr 10 2009 at 00:41

20% пользователей, в отличие от пользователей IE, выбрали Firefox осознанно. И столь же осознанно изменят размер шрифта. Не сомневайтесь. ;-)

RayZ Apr 10 2009 at 00:06

Что-то я не понял, а в чем проблема? Графика растягивается? :)

MTonly Apr 10 2009 at 00:38

RayZ Apr 10 2009 at 01:09

оу :) Какой ужас!

UFO landed and left these words here

MTonly Apr 12 2009 at 00:17

Вид → Масштаб → Только текст.

Mordraug Apr 10 2009 at 05:23

я думаю, что можно немного усложнить разметку и сделать их масштабируемыми по самое «не балуйся» :)

Auru Apr 9 2009 at 21:13

Не учитывается размер шрифта, в IE задизабленная кнопка реагирует на… фингеринг )

non7top Apr 9 2009 at 21:15

блин. фф3 же поддерживает системные оформления. зачем еще нужны эти сложные и объемные велосипеды

Auru Apr 9 2009 at 21:18

кроссбраузерность нужна видимо кому-то все еще

non7top Apr 9 2009 at 21:40

кроссбраузерность — ненужный миф. бровзер должен быть удобным. отсутствие кроссброузерности — лишний повод подтолкнуть пользователей пересесть на нормальные бровзеры.

SegaZero Apr 9 2009 at 23:14

нормальные — это на оперу?=) не раздувайте холивар:)

non7top Apr 9 2009 at 23:20

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

Mordraug Apr 10 2009 at 05:26

<holywar:off>
ie вполне себе нормальный браузер — он умеет показывать страницы.

Докажите обратное той колде народа, что его используют (какая-то часть даже сознательно) :D
</holywar:off>

non7top Apr 10 2009 at 12:03

да вот только страницы он не умеет показывать. и 99.9% кто его использует делают это несознательно.

MTonly Apr 10 2009 at 00:43

Браузер, бровзер, броузер. Вы бы уже определились с написанием (подсказка: правильно — браузер). ;-)

non7top Apr 10 2009 at 00:44

бровзер. все что с кросс — от лукавого

MTonly Apr 10 2009 at 00:49

А теперь внимание: правильный ответ (подсказка: смотреть надо на транскрипцию). ;-)

non7top Apr 10 2009 at 01:04

да и без транскрипции ясно как слово browser читается по-английски, достаточно вспомнить правило о произношении «o» под ударением. но ведь мы ж здесь не на чистом английском говорим. и вообще речь о бровзерах.

MTonly Apr 10 2009 at 01:20

Жесть.

pgg Apr 10 2009 at 12:31

Специально поинтерисовался у нашего переводчика:

англичане: "[броузер]"
американцы: "[браузер]"

Правильно и БРАУЗЕР и БРОУЗЕР, но никак не бровзер (уж вы меня простите, но это вообще не правильно). Так говорят все как хотят. Да, кстати и ВАЛИДАЦИЯ звучит как [вэлидэйшн].

GO — Гоу
MAKE — Мэйк
RUN — Ран
BROTHER — Бразер, браза.

non7top Apr 10 2009 at 13:05

>англичане: "[броузер]"
вот это очень интересно. похоже это какие-то новые тенденции в разговорном языке англичан. тем более что они нарушают правила произношения. да и вряд ли англичане говорят р на конце слова.

>BROTHER — Бразер, браза.
да, браза, ты очень ч0ток.

для тех кто все еще в танке. бровзер это не то как читается browser. бровзер — это программа вэб страниц, т.е. то что в английском называется browser

Riddler Apr 10 2009 at 15:01

Тогда уж бровСер

DMS Apr 9 2009 at 21:22

вам не кажется, что тут явно что-то не так?

pgg Apr 9 2009 at 22:05

Всё нетак!

RayZ Apr 10 2009 at 00:07

Кажется. :) Но все началось далеко до создания кода, не так ли?

claymore Apr 9 2009 at 21:24

позвольте спросить, а чем ExtJs то не подошел? там и стилизация есть и иконки на кнопке

RayZ Apr 10 2009 at 00:08

:) Весом библиотек, скоростью работы, надобностью/ненадобностью функционала.

Prometheus Apr 9 2009 at 21:32

Афигеть, конечно, стока кода и стилей и все ради какой-то кнопочки :)
Должно быть таких кнопочек в проект дофигища.

pgg Apr 9 2009 at 22:15

Согласен, тут можно половину отрезать.

RayZ Apr 10 2009 at 00:08

Предложите оптимальный код, будем хлопать в ладоши!

Octane Apr 9 2009 at 21:33

Лучше взять обычный <button>…</button>, сбросить его стандартное оформелние и положить внутрь необходимые элементы. Тогда кнопка сохранит превычное поведение и будет оформлена в нужном стиле.

pgg Apr 9 2009 at 21:54

Я так и сделал :-) pavelgorlov.ru/pgbtn/

RayZ Apr 10 2009 at 00:11

Молодец! Мне нравится реализация.

Xobb Apr 10 2009 at 01:10

В никс браузерах глючит. подтверждаю (:

s1im Apr 10 2009 at 07:30

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

Arefiev Apr 10 2009 at 11:05

при нажатии на кнопку текст смещается немного — как и должно быть — респект

pgg Apr 10 2009 at 11:31

Спасибо! У меня нехватает вермени, чтобы пофиксить это по все остальные браузеры и кармы для того, что бы писать об этом.

pgg Apr 9 2009 at 21:42

В вот мой вариант кнопки, без таблицы и с png32. И код меньше.

pavelgorlov.ru/pgbtn/

+ jQuery PG-плагин
+ Невалидны CSS код :-)
+ Два встроенных метода:
.pgFlash() — флешит кнопку,
.pgEnable(boolean) — выключает\включает кнопку, а при включеннии флешит.
+ Одна картинка:

Reey Apr 10 2009 at 04:27

М, поехало чуть чуть.
www.picamatic.com/show/2009/04/10/04/24/3199431_365x202.png
Vista, ff 3.1b3 :)

pgg Apr 10 2009 at 10:26

Будем лечить! Самое страшное это заставить эту конопку быть резиновой и поддерживать png-32 на фоне в IE6

mocksoul Apr 11 2009 at 01:37

пациент мёртв, чего там лечить.

вы хоть понимаете что если умудрились сделать разное поведение в ff2, ff3 и ff3.1 — то с огромной доли вероятности вам для каждого багфикса фф придётся кнопки переделывать.

Да и значит накосячили вы там порядком. Слишком шатко.

alexkartashev Apr 11 2009 at 11:03

А прозрачность png-8 методом cssing.org.ua/2008/11/07/png-8-alpha/ не пробывал заменить? Почти везде удается безболезненно перейти с png-24 на png-8. Часть проблемы уйдет так думаю.

pgg Apr 11 2009 at 11:18

Нет, не читал, но читал в техногрете, а потом и проверял.
ИЕ неумеет, а гуглхром глуюч, отображать png8+alpha_channel

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

alexkartashev Apr 11 2009 at 11:34

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

Krovosos Apr 9 2009 at 22:14

Я боюсь подумать о выпадающем списке в Ваших руках… ;-)

ЗЫ В Хроме 2.0.169.1 кнопка PushMe не работает

RayZ Apr 10 2009 at 00:12

Кнопка ПушМи DISABLED. Вы статью читали?

badlittleduck Apr 9 2009 at 22:38

Как это сделали в Google
www.usability.by/recreating-the-button/

shtirlic Apr 9 2009 at 22:42

Про кнупки гмейла тут
stopdesign.com/archive/2009/02/04/recreating-the-button.html
и тут stopdesign.com/eg/buttons/3.0/code.html#

MKrivosheev Apr 9 2009 at 22:59

Маленький оффтоп: а как Вы счиатаете, при наведении на кнопку курсор должен становиться таким же, как при наведении на ссылку или оставаться стрелкой?

nobr Apr 10 2009 at 00:03

Мне кажется, что любой элемент на сайте должен вести себя также, как и в реальной ОС: при наведении кнопка подсвечивается, а курсор остаётся обычной стрелкой.

UFO landed and left these words here

RayZ Apr 10 2009 at 00:18

Кнопки в стиле системы. Эта система — продукт для которого делаются кнопки. :)

nobr Apr 10 2009 at 00:02

Потрясающая работа. Спасибо за хорошую статью.

Мне стало интересно: можно ли сделать кнопку, которая растягивалась бы не только по ширине, но и по высоте? Нужна таблица на девять ячеек?

RayZ Apr 10 2009 at 00:18

Нет.

RayZ Apr 10 2009 at 00:19

Будут некоторые изменения со стилями и позиционированием бэкграундов. В остальном все остается примерно так же.

apkawa Apr 10 2009 at 00:04

Я так и не понял что изменилось.
s57.radikal.ru/i155/0904/b4/1af64d5001d3.png
Кнопка как была обчыной так и осталась, разве что в правой какая то иконка появилась, которая невписывается.

RayZ Apr 10 2009 at 00:20

Не скопированы картинки-спрайты для кнопок.

TonyClifton Apr 10 2009 at 02:07

chikuyonok.ru/2009/04/buttons-reloaded/

UFO landed and left these words here

padonaque Apr 10 2009 at 03:49

вот она — логика пользователей браузера опера.

RayZ Apr 10 2009 at 07:19

да и Опера в расчет не бралась при изготовлении. :) Я конечно извиняюсь перед пользователями оперы, что обошел этот браузер во время изготовления статьи.

assTeT Apr 10 2009 at 16:21

Ахахаха =) Браво!!!
Так их, этих двух!!!

mocksoul Apr 11 2009 at 01:29

эм… 9.6 — не криво =)

Mordraug Apr 10 2009 at 05:30

интересное исследование :)

одно время меня устраивало вот такое решение.

RayZ Apr 10 2009 at 07:20

Ссылка не открывается :-/

Mordraug Apr 10 2009 at 22:37

не знаю почему может не открываться.

попробуйте нагуглить Wii Buttons — по ссылке, собственно — они.

aps Apr 10 2009 at 07:31

[span][div]...[/div][/span] — некрасиво, даже если через CSS переопределено.
Кстати, если вы используете jquery, не смотрели в сторону CSS FrameWork jquery UI? Там куча заготовок для кнопок, панелей, иконок и т.п.

RayZ Apr 10 2009 at 08:24

Я знаю про него, конечно же, но нет. Какой бы был смысл в моем опыте и исследовании?

aps Apr 10 2009 at 11:39

>Какой бы был смысл
В принципе подобный опыт всегда положительный, Но я придерживаюсь мнения, что на смену всякой самодеятельности в области ui должны придти типовые решения. Может конечно я и ошибаюсь. Но глядя на эволюцию ui в десктопных приложениях все к тому должно идти.

Triall Apr 10 2009 at 10:41

По-моему слишком перегружено все, а jQuery можно юзать для наведения и нажатия.

aps Apr 10 2009 at 11:31

>а jQuery можно юзать для наведения и нажатия.
хорошо хоть jQuery, а не extJS.

Для наведения и нажатия НУЖНО юзать соответствующие CSS-свойства hover и active. Они кстати и в ie6 ограниченно но работают.

Duke Apr 10 2009 at 10:52

а что будете делать для?

Duke Apr 10 2009 at 10:52

input type=file…

TiGR Apr 10 2009 at 15:22

Видимо, отрисовывать заново, выставляя основному элементу 100% прозрачность. Где-то эта техника описывалась.

pgg Apr 10 2009 at 15:56

Соберу плагин из моей кнопки и моего textinput'a с включенным readonly

almirus Apr 10 2009 at 11:48

а firefox на первой кнопке появляется рамка при нажатии
вторая кнопка не нажимается хотя в explorer 6 и opera 9.5 кнопка визуально нажимается

milax Apr 10 2009 at 14:09

Ничего себе))

brmn Apr 10 2009 at 15:56

а так?
stopdesign.com/eg/buttons/3.0/code.html

Nedomolkin Apr 10 2009 at 16:22

интересное исследование.

небольшая опечаточка:

// Замечательный атрибут,
// предотвращающий выделение текстовой информации внутри блока
newBtnContainer.setAttribute('uselectable', 'on');

uselectable -> unselectable

mocksoul Apr 11 2009 at 01:25

бу

$(el).disableSelection() / $(el).enableSelection() — кроссбраузерный вариант (effects.core вроде).

Nedomolkin Apr 11 2009 at 17:26

да, верно. такое есть в ui.core. там: .attr(«unselectable»,«on»).css(«MozUserSelect»,«none»).
и у автора newBtnContainer не jquery объект по коду.

mocksoul Apr 12 2009 at 00:56

не только:

(ui.core.js)

disableSelection: function() {
    return this
        .attr('unselectable', 'on')
        .css('MozUserSelect', 'none')
        .css('KhtmlUserSelect', 'none')
        .bind('selectstart.ui', function() { return false; });
},

mocksoul Apr 11 2009 at 01:31

спорно…

а почему бы в IE6/7 рисовать обычные инпуты (один фиг юзеры оных браузеров не особо за финтифлюшками следят) а во всех остальных (включая IE8) по-человечески заюзать inline-block (коим на самом деле должна быть кнопка, а вовсе не inline).

mocksoul Apr 11 2009 at 01:35

1) это будет гораздо быстрее работать
2) в IE при этом пострадает только дизайн, что терпимо, лишь бы функционал работал
3) будет больший охват браузеров. Уж лучше инпут обычный показать, чем все развалилось бы нахрен =)

terloger Apr 12 2009 at 13:41

«В конце концов за основу была взята концепция, используемая в ExtJS, а именно — таблица.»

Блин, да вы оттуда все стащили и html и css и спрайты. Не есть гуд. Про лицензию вспомните.

RayZ Apr 12 2009 at 17:28

Спрайты сделаны своими руками. И код, впрочем тоже. ;) А то, что я подглядел идею не делает меня нарушителем лицензии. Все свое.

BleSSeD Apr 22 2009 at 13:11

У меня в Опере 9.25 глюки. Края и средина кнопки разорваны…

mihdan Oct 22 2010 at 11:28

Это просто не описуемо, к чему такие страшные извращения?