Onatolich Interface Solutions

с удовольствием все прочитал, ну очень понравились все методы, спасибо

К стати самые простые подсказки, которые появляются при наведении на любой элемент делаются так:

$('*[title]').tooltip();

Как видите все предельно просто, но если нужно, то можно и усложнить.

Onatolich (18.03.2013 / 14:30)
Первое, о чем я хотел бы здесь написать: стилизация радиокнопок и чекбоксов на чистом CSS, без JS, дополнительной разметки и прочих извращений, в чем и состоит уникальность данного метода(по крайней м

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

И тут бац - VARG подкидывает мне ссылку на эту тему
Onatolich, это именно то, что мне сейчас нужно, точнее не для форм, а для другого применения, для каталога смайлов.
Отличное исследование.
В связи с этим, у меня сейчас будет вопрос...

Вопрос, точнее проблема заключается вот в чем...
В новом двиге весьма активно юзается CSS3, но при этом нельзя забывать, что пока еще есть довольно много относительно старых дивайсов, которые не поймут современных наворотов.
При том, весь макет верстки я делаю таким образом, что даже вообще без CSS файла, сайт хоть и потеряет свой вид, но тем не менее будет читабельным и главное, юзабельным.
Будут работать все формы, навигация и все такое...
---
Мне сейчас понадобится стилизация чекбоксов.
Спрайт - это как раз то, что нужно, мне надо заменить стандартный вид чекбокса на картинку.
Вопрос вот в чем:
Если вообще отключить CSS файл, сам чекбокс появится (вместо спрайта), он будет кликабельным и юзабельным?

AlkatraZ (18.03.2013 / 17:48)
Вопрос, точнее проблема заключается вот в чем...
В новом двиге весьма активно юзается CSS3, но при этом нельзя забывать, что пока еще есть довольно много относительно старых дивайсов, которые не пойм

Да. В этом моя фишка я всегда продумываю вариант со старыми девайсами. У тебя будет самый обычный чекбокс. В моей реализации просто берется спрайт и накладывается на чекбокс, при чем сам чекбокс не скрывается, его просто не видно под картинкой. Более того данная реализация отлично работает и с применением тега <label>. Врят ли получится добится этого используя JS.

Что касается темы затронутой Олегом: я лично так делаю и всем советую делать анимации на CSS, а не на JS.

Вот допустим есть у вас какой-то класс:

.class{ background: #fff; }

И вы хотите, чтобы при наведении он становился синим. Тогда просто дописываем его так:

.class{ 
  background: #fff; 
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  -webkit-transition: background 0.2s linear;
}
.class:hover{ background: #00f; }

Преимущество в том, что если не поддерживается JS и анимация сделана на нем, то эффекта вообще не будет, а вот в этом случае, если не поддерживается CSS3, то фон изменится, просто без анимации. Да и нагрузка на клиента меньше будет. Вот такая нехитрая арифметика.

абсолютно верный подход

Вообще здесь я выкладываю отдельные плагины библиотеки OIS(что-то типа jQuery UI но с многими решениями, которых там нет, такое себе расширение возможностей UI, в первую очередь в плане стилизации), которую я выложу полностью и даже офф. сайтик сделаю с примерами когда закончу. Сейчас с её помощью можно стилизовать почти все(чекбоксы, радиокнопки, селектбары, подсказки, модальные и диалоговые окна и даже загрузчик файлов(загрузка на AJAX, с прогресбаром и всеми делами без Flash, чего пока тоже не встречал)) и сейчас работаю над последним элементом страниц, который так просто не стилизуешь: полосы прокрутки. В общем все эпично и for free.

Вот кстати еще ссылка на подобные исследования: http://xozblog.ru/2012/10/chec ... css3/

Раз Onatolich проводил данные исследования, я тогда сейчас спрошу напрямую, расскажу что мне нужно...
---
Как ты видел на скриншоте: http://johncms.com/mobicms_avatars.jpg
я написал новый каталог аватаров, там все разложено (говоря языком WindowsMobile) по тайлам (плиткам). Они естессно кликабельные и все такое.

С аватарами то проблем нет, там все уже написано.
Но я вот сейчас перейду к каталогу смайлов, его сделаю по тому же принципу, каждый смайл будет отображаться в отдельном (кликабельном) тайле.
Для чего у смайлов кликабельность?
Дык у нас же есть возможность выбрать себе "личные" смайлы для панели bbCode
Вот тут и нужны чекбоксы.
Мы отмечаем нужные нам смайлы, жмем кнопарь "Добавить" и они у нас в избранном.

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