JSPrime - библиотека javascript эффектов
Некоторое время назад у меня появилась идея создать библиотеку javascript эффектов, которая могла бы помочь многим создателям сайтов украсить их страницу и облегчить работу. Но к тому моменту я знал, что уже существуют не мало эффектов, но их минусом было то, что для них нужно было специально загружать библиотеки jquery, mootools, которые весят не мало, да и не каждый может писать на jquery. Ведь чистый javascript более знаком для большинства.
И первой моей идеей было создание подобия эффекта slimbox, который я назвал blackout. И примером выгоды использования моего эффекта является то, что он весит 10кб, что на много меньше 30кб кода mootools, 2кб css и 8кб самого кода эффекта.
Вторым эффектом я решил создать фотоленту, т.к. меня интересовал метод построения ленты как на mail.ru. До этого мне пришлось создать, что то на подобие фото ленты, что я описал в своем блоге. Но это было не то, т.к. мой подход походил на фотоленту, но не был именно таким, как я желал. Т.е. мне хотелось при листании ленты видеть как фотографии явно уходят на право или лево, а не удаляются и добавляется новая фотка (как при моем случае). И однажды до меня дошло использовать overflow:hidden и margin’ы с минусовыми показателями. Вот тогда я и создал настоящую фотоленту под названием PhotoLine.
И так же хочу выделить эффект MySelect. Идея создание его пришла в голову при верстке, в котором имелись select’ы, и которые по разному отображались в разных браузерах, да и не поддавались нормальному оформлению. Вот тогда я и решил создать подобие настоящего селекта, который можно настроить как угодно и который будет отображаться во всех браузерах одинаково. А вопрос отправки выделенных данных на сервер я решил созданием невидимого инпута.
Так же я намерен дальше и дальше увеличивать свою библиотеку эффектов, к которой можно было бы найти любой интересующий эффект для веб разработчика. И если у вас есть идеи для создание какого нибудь полезного эффекта, пишите в комментариях и они будут добавлены в сайт.
Очень надеюсь, что вам понадобятся эти эффекты и принесут пользу для ваших сайтов!
С уважением Кадыр.
|
Селекты только на мышку реагируют — нехорошо.
Спасибо! Все эффекты дорабатываются всегда, как в плане кода так и функционала.
Octane во время разработки возник вопрос. Как div может получить фокус? Пытался поставить фокус на див и на скрытый input, нет реакции. Я это к тому, что если select стоит после input, то многие пользователи нажимают Tab что бы перевести фокус, но div никак не получает его. Как можно поступить в этой ситуации. И тогда каким функционалом для клавиш должен обладать этот select?
да спасибо, уже узнал на счет tabIndex
PhotoLine - не реагирует на колесико мышки. Было бы удобнее.
Prompt - было бы не плохо сделать следящей за курсором, и для красоты можно в дополнение мягкому появлению наложить "прозрачное появление".
MySelect.
Для проекта я реализовал немного иначе и назвал его ComboBox.
Вот какие отличия:
- главное поле видимое пользователю это Input, таким образом фокус оно получает автоматически, и в нем пользователь может начать вводить информацию, т.е. поддерживается возможность авто дополнения в выпадающем списке.
- по выпадающему списку работают клавиши вверх, вниз, esc, enter (home, end, page up/down - еще не реализовал ввиду отсутствия текущей необходимости)
- при клике мышкой в другой области combobox "сворачивается". Т.е. съэмулировано практически все что делает стандартный селект.
Возникнут вопросы обращайся (а они возникнут ведь под ИЕ имеется одна проблемка)
На счет PhotoLine хочется сказать, что он реагирует на ролик мыши.
На счет Prompt была мысль, но подумал, начнет раздражать закрывая тем самым элемент самой подсказки.
На счет MySelect до сих пор вопрос остается для меня не решенным, т.к. сейчас заканчиваю институт, и чуточку времени не хватает добить его. Как только начну думаю доделаю. Думаю использовать tabindex. Думаю для пользователя не составит сложности расставить tabindex'ы. Например
Или лучше самому анализировать всю форму и проставить tabindex'ы всем ее элементам?
> На счет PhotoLine хочется сказать, что он реагирует на ролик мыши.
Не работает под IE8, Opera 9.6+, Chrome 4+
И что странно в коде у тебя вроде все относительно правильно. Только я использую библиотеку events. Так код сокращается раза в два. И работает!
Нет оказываются были ошибки! Т.е. я не использовал кроссбраузерный подход. А getBoundingClientRect вычисляет относительно окна а не документа, что и было для IE версии, поэтому и не работало. Очень хорошая статья имеется по этому поводу http://javascript.ru/ui/offset