Comments 113
Жесть. Я недооценивал труд веб-работников.
А демку можно где-то глянуть?
Да-да, покажите демку. Очень интересно, я как раз ковыряю гугло и ExtJS кнопки.
Читаем update к статье, или просто переходим по ссылке:
rayz.ru/misc/custombuttons/
rayz.ru/misc/custombuttons/
Да чтоб я на сайты ходил с такими кнопками…
Простой пример — GMail :-) И ходят, поверьте мне, ходят!
Ходят, потому что аналогов нет. Но после введения этих кнопок, у меня сначала было какое-то отвращение к ним. Но это со временем прошло. Сейчас уже не обращаю на них внимание.
Ой, да ладно ) Ну в конце-концов, если не утрировать, то какая разница? Кнопки то функциональны, во всех смыслах, выглядят оригинально и достаточно строго, выполняют свою работу. Чего же боле? Отчего же не ходить и не пробовать?
К тому же, лишние 20кб уже и не заметить. А ежели так тяжко, то можно включить стандартную версию (ну это касательно только гмыла :))
К тому же, лишние 20кб уже и не заметить. А ежели так тяжко, то можно включить стандартную версию (ну это касательно только гмыла :))
Вот есть хороший топик про кнопки habrahabr.ru/blogs/css/56389/
Вы меня простите конечно, но 126кб плюс 36 секунд ожидания окончания загрузки (в примере отвалился один файл) — проверял Firebug'ом — ради двух кнопок — это как-то чересчур.
задисейбленая кнопка не нажимается если жать где-то по середине, а если навести где-то с самого краю и попробовать нажать, то оппаньки :)
Эх… старая избитая тема. Учитывая, извините меня, ублюдочный уровень поддежки оформления стиля кнопок как со стороны браузеров, так со стороны и стандартов проще всего использовать дефолтные стили офорления. А свете юзабили это даже предпочтительно делать, т.к. на каком бы сайте я не был я сразу вижу, где есть кнопки ибо стиль оформления у них от сайта к сайту один и тот же — дефолтный.
И вообще главное ехать, а не шашечки ;)
И вообще главное ехать, а не шашечки ;)
Обоснуйте.
Кнопки рисуются как бы следуя законам гуя в котором порожден был браузер.
Любое приложение использует один стиль отображения интерфейса и по идее не должен выглядеть иначе. А тут у нас разброс и шатание. Я понимаю, какую сторону вы представляете. И вы правы, только не в моем случае.
Не с проста я статью начал со вышеперечисленных слов. Это было сделано ДЛЯ веб-приложения.
Юзабилити и дизайн имеет смысл. И попробуйте оспорить.
Кнопки рисуются как бы следуя законам гуя в котором порожден был браузер.
Любое приложение использует один стиль отображения интерфейса и по идее не должен выглядеть иначе. А тут у нас разброс и шатание. Я понимаю, какую сторону вы представляете. И вы правы, только не в моем случае.
Не с проста я статью начал со вышеперечисленных слов. Это было сделано ДЛЯ веб-приложения.
Юзабилити и дизайн имеет смысл. И попробуйте оспорить.
А я о веб и говорю. Законы гуя это все звучит хорошо я с этим согласен. Но в рамках какого то скомпилированного приложения. В рамках же веб приложения которое работает череб браузер не совсем согласен. Порой видишь на страницах такой закон гуя, что хочеться настучать дизайнеру по созвучному выступающему органу… Я привык к определенному виду кнопок в своем браузере, на какую бы страницу я не попал я всегда на ней без труда нахожу нужные кнопки. Но порой не сразу получается сориентироваться когда кнопки следуют законам гуя (особо когда их делает кривой дизайнер или кодер). И это не говоря уже о том, что у меня картинки отключены по дефолту…
Я не говорю, что не стоит следовать общей задумку дизайна, но, имхо, процентах в 90 это излишество. Лучше сосредоточиться на создании более практичных элементов страницы чем сбивать пользователя с привычного визуального образа кнопки в его браузере.
Я не говорю, что не стоит следовать общей задумку дизайна, но, имхо, процентах в 90 это излишество. Лучше сосредоточиться на создании более практичных элементов страницы чем сбивать пользователя с привычного визуального образа кнопки в его браузере.
Теперь увеличиваем размер шрифта средствами браузера и смотрим, что стало с кнопками. ;-)
Только один маньяк из десяти использует эту функцию.
Остальные 99.9999% пользователей сети даже не догадываются о существовании этого.
Тем более адекватные браузеры давно делают zoom.
Остальные 99.9999% пользователей сети даже не догадываются о существовании этого.
Тем более адекватные браузеры давно делают zoom.
Что-то я не понял, а в чем проблема? Графика растягивается? :)
я думаю, что можно немного усложнить разметку и сделать их масштабируемыми по самое «не балуйся» :)
Не учитывается размер шрифта, в IE задизабленная кнопка реагирует на… фингеринг )
блин. фф3 же поддерживает системные оформления. зачем еще нужны эти сложные и объемные велосипеды
кроссбраузерность нужна видимо кому-то все еще
кроссбраузерность — ненужный миф. бровзер должен быть удобным. отсутствие кроссброузерности — лишний повод подтолкнуть пользователей пересесть на нормальные бровзеры.
нормальные — это на оперу?=) не раздувайте холивар:)
холивар не подразумевался. бывают нормальные бровзеры и бывает IE. в силу того что у IE нет сторонников, холивар не получится.
Браузер, бровзер, броузер. Вы бы уже определились с написанием (подсказка: правильно — браузер). ;-)
бровзер. все что с кросс — от лукавого
А теперь внимание: правильный ответ (подсказка: смотреть надо на транскрипцию). ;-)
да и без транскрипции ясно как слово browser читается по-английски, достаточно вспомнить правило о произношении «o» под ударением. но ведь мы ж здесь не на чистом английском говорим. и вообще речь о бровзерах.
Жесть.
Специально поинтерисовался у нашего переводчика:
англичане: "[броузер]"
американцы: "[браузер]"
Правильно и БРАУЗЕР и БРОУЗЕР, но никак не бровзер (уж вы меня простите, но это вообще не правильно). Так говорят все как хотят. Да, кстати и ВАЛИДАЦИЯ звучит как [вэлидэйшн].
GO — Гоу
MAKE — Мэйк
RUN — Ран
BROTHER — Бразер, браза.
англичане: "[броузер]"
американцы: "[браузер]"
Правильно и БРАУЗЕР и БРОУЗЕР, но никак не бровзер (уж вы меня простите, но это вообще не правильно). Так говорят все как хотят. Да, кстати и ВАЛИДАЦИЯ звучит как [вэлидэйшн].
GO — Гоу
MAKE — Мэйк
RUN — Ран
BROTHER — Бразер, браза.
>англичане: "[броузер]"
вот это очень интересно. похоже это какие-то новые тенденции в разговорном языке англичан. тем более что они нарушают правила произношения. да и вряд ли англичане говорят р на конце слова.
>BROTHER — Бразер, браза.
да, браза, ты очень ч0ток.
для тех кто все еще в танке. бровзер это не то как читается browser. бровзер — это программа вэб страниц, т.е. то что в английском называется browser
вот это очень интересно. похоже это какие-то новые тенденции в разговорном языке англичан. тем более что они нарушают правила произношения. да и вряд ли англичане говорят р на конце слова.
>BROTHER — Бразер, браза.
да, браза, ты очень ч0ток.
для тех кто все еще в танке. бровзер это не то как читается browser. бровзер — это программа вэб страниц, т.е. то что в английском называется browser
вам не кажется, что тут явно что-то не так?
позвольте спросить, а чем ExtJs то не подошел? там и стилизация есть и иконки на кнопке
Афигеть, конечно, стока кода и стилей и все ради какой-то кнопочки :)
Должно быть таких кнопочек в проект дофигища.
Должно быть таких кнопочек в проект дофигища.
Лучше взять обычный <button>…</button>, сбросить его стандартное оформелние и положить внутрь необходимые элементы. Тогда кнопка сохранит превычное поведение и будет оформлена в нужном стиле.
Я так и сделал :-) pavelgorlov.ru/pgbtn/
Молодец! Мне нравится реализация.
В никс браузерах глючит. подтверждаю (:
«больная» кнопка, на которой написано, что она не лечится, почему-то выздоравливает :)
при нажатии на кнопку текст смещается немного — как и должно быть — респект
В вот мой вариант кнопки, без таблицы и с png32. И код меньше.
pavelgorlov.ru/pgbtn/
+ jQuery PG-плагин
+ Невалидны CSS код :-)
+ Два встроенных метода:
.pgFlash() — флешит кнопку,
.pgEnable(boolean) — выключает\включает кнопку, а при включеннии флешит.
+ Одна картинка:
pavelgorlov.ru/pgbtn/
+ jQuery PG-плагин
+ Невалидны CSS код :-)
+ Два встроенных метода:
.pgFlash() — флешит кнопку,
.pgEnable(boolean) — выключает\включает кнопку, а при включеннии флешит.
+ Одна картинка:
М, поехало чуть чуть.
www.picamatic.com/show/2009/04/10/04/24/3199431_365x202.png
Vista, ff 3.1b3 :)
www.picamatic.com/show/2009/04/10/04/24/3199431_365x202.png
Vista, ff 3.1b3 :)
Будем лечить! Самое страшное это заставить эту конопку быть резиновой и поддерживать png-32 на фоне в IE6
пациент мёртв, чего там лечить.
вы хоть понимаете что если умудрились сделать разное поведение в ff2, ff3 и ff3.1 — то с огромной доли вероятности вам для каждого багфикса фф придётся кнопки переделывать.
Да и значит накосячили вы там порядком. Слишком шатко.
вы хоть понимаете что если умудрились сделать разное поведение в ff2, ff3 и ff3.1 — то с огромной доли вероятности вам для каждого багфикса фф придётся кнопки переделывать.
Да и значит накосячили вы там порядком. Слишком шатко.
А прозрачность png-8 методом cssing.org.ua/2008/11/07/png-8-alpha/ не пробывал заменить? Почти везде удается безболезненно перейти с png-24 на png-8. Часть проблемы уйдет так думаю.
Нет, не читал, но читал в техногрете, а потом и проверял.
ИЕ неумеет, а гуглхром глуюч, отображать png8+alpha_channel
Хотя вы знаете, у меня нинастолько большое изображение, что бы его оптимизировать
ИЕ неумеет, а гуглхром глуюч, отображать png8+alpha_channel
Хотя вы знаете, у меня нинастолько большое изображение, что бы его оптимизировать
Я боюсь подумать о выпадающем списке в Ваших руках… ;-)
ЗЫ В Хроме 2.0.169.1 кнопка PushMe не работает
ЗЫ В Хроме 2.0.169.1 кнопка PushMe не работает
Как это сделали в Google
www.usability.by/recreating-the-button/
www.usability.by/recreating-the-button/
Про кнупки гмейла тут
stopdesign.com/archive/2009/02/04/recreating-the-button.html
и тут stopdesign.com/eg/buttons/3.0/code.html#
stopdesign.com/archive/2009/02/04/recreating-the-button.html
и тут stopdesign.com/eg/buttons/3.0/code.html#
Маленький оффтоп: а как Вы счиатаете, при наведении на кнопку курсор должен становиться таким же, как при наведении на ссылку или оставаться стрелкой?
UFO just landed and posted this here
Потрясающая работа. Спасибо за хорошую статью.
Мне стало интересно: можно ли сделать кнопку, которая растягивалась бы не только по ширине, но и по высоте? Нужна таблица на девять ячеек?
Мне стало интересно: можно ли сделать кнопку, которая растягивалась бы не только по ширине, но и по высоте? Нужна таблица на девять ячеек?
Я так и не понял что изменилось.
s57.radikal.ru/i155/0904/b4/1af64d5001d3.png
Кнопка как была обчыной так и осталась, разве что в правой какая то иконка появилась, которая невписывается.
s57.radikal.ru/i155/0904/b4/1af64d5001d3.png
Кнопка как была обчыной так и осталась, разве что в правой какая то иконка появилась, которая невписывается.
UFO just landed and posted this here
UFO just landed and posted this here
[span][div]...[/div][/span] — некрасиво, даже если через CSS переопределено.
Кстати, если вы используете jquery, не смотрели в сторону CSS FrameWork jquery UI? Там куча заготовок для кнопок, панелей, иконок и т.п.
Кстати, если вы используете jquery, не смотрели в сторону CSS FrameWork jquery UI? Там куча заготовок для кнопок, панелей, иконок и т.п.
Я знаю про него, конечно же, но нет. Какой бы был смысл в моем опыте и исследовании?
По-моему слишком перегружено все, а jQuery можно юзать для наведения и нажатия.
а что будете делать для?
а firefox на первой кнопке появляется рамка при нажатии
вторая кнопка не нажимается хотя в explorer 6 и opera 9.5 кнопка визуально нажимается
вторая кнопка не нажимается хотя в explorer 6 и opera 9.5 кнопка визуально нажимается
Ничего себе))
интересное исследование.
небольшая опечаточка:
// Замечательный атрибут,
// предотвращающий выделение текстовой информации внутри блока
newBtnContainer.setAttribute('uselectable', 'on');
uselectable -> unselectable
небольшая опечаточка:
// Замечательный атрибут,
// предотвращающий выделение текстовой информации внутри блока
newBtnContainer.setAttribute('uselectable', 'on');
uselectable -> unselectable
бу
$(el).disableSelection() / $(el).enableSelection() — кроссбраузерный вариант (effects.core вроде).
$(el).disableSelection() / $(el).enableSelection() — кроссбраузерный вариант (effects.core вроде).
да, верно. такое есть в ui.core. там: .attr(«unselectable»,«on»).css(«MozUserSelect»,«none»).
и у автора newBtnContainer не jquery объект по коду.
и у автора newBtnContainer не jquery объект по коду.
спорно…
а почему бы в IE6/7 рисовать обычные инпуты (один фиг юзеры оных браузеров не особо за финтифлюшками следят) а во всех остальных (включая IE8) по-человечески заюзать inline-block (коим на самом деле должна быть кнопка, а вовсе не inline).
а почему бы в IE6/7 рисовать обычные инпуты (один фиг юзеры оных браузеров не особо за финтифлюшками следят) а во всех остальных (включая IE8) по-человечески заюзать inline-block (коим на самом деле должна быть кнопка, а вовсе не inline).
«В конце концов за основу была взята концепция, используемая в ExtJS, а именно — таблица.»
Блин, да вы оттуда все стащили и html и css и спрайты. Не есть гуд. Про лицензию вспомните.
Блин, да вы оттуда все стащили и html и css и спрайты. Не есть гуд. Про лицензию вспомните.
У меня в Опере 9.25 глюки. Края и средина кнопки разорваны…
Это просто не описуемо, к чему такие страшные извращения?
Sign up to leave a comment.
Исследование на тему замены стандартных кнопок