Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2010, 00:03
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Плагин jQuery Background Gradient
По мотивам известных хаков сделал очень простой плагин дабы облегчить себе жизнь и, возможно, другим верстальщикам. Были использованы в куче такие некроссбраузерные CSS свойства, как, например, -moz-linear-gradient для мозиллы, свойство filter для ИЕ выше 5.5 версии, бекграундовый SVG для оперы (то есть плагин совместим с большинством современных браузеров, в том числе и internet explorer). Несомненным плюсом скрипта является то, что при его выполнении не создается дополнительных блоков, то есть, по идее, не должно возникнуть несовместимости с другими скриптами, так как градиент ведет себя как обычная фоновая картинка. Так же, очевидно, градиент растягивается в зависимости от размеров блока.
Плагин инициализируется следующим образом:
$(<селектор>).backgroundGradient({startPos ition: <"top" либо "left" в зависимости от того, с какой стороны градиент должен начинаться, то есть top - вертикальный градиент, left - горизонтальный >, startColor:<цвет>, stopColor:<цвет>});
Например:
$("div#gradient").backgroundGradient({startPosition:"top", startColor:"red", stopColor:"green"});

Пример его работы в действии можно посмотреть во вложении.
Как ни крути, скрипт пока еще сырой и требует дальнейших доработок.
Просьба к комьюнити: подскажите, как избежать добавление плагином стилей в атрибут style, если это возможно.
Вложения:
Тип файла: zip backgroundgradient-0.1.zip (25.3 Кб, 103 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2010, 09:36
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,022

Сообщение от FINoM
как избежать добавление плагином стилей в атрибут style
Создать свою таблицу стилей и пихать все туда, а на элемент вешать класс.
Не кажется, что лучше все-таки для каждого браузера использовать свой код?

Последний раз редактировалось B~Vladi, 07.09.2010 в 09:38.
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2010, 13:29
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от B~Vladi
Создать свою таблицу стилей и пихать все туда, а на элемент вешать класс.
Для каждого селектора нужно будет создавать отдельный класс, что так же не хорошо, как по мне.
Сообщение от B~Vladi
Не кажется, что лучше все-таки для каждого браузера использовать свой код?
Будет куча кода.

Последний раз редактировалось FINoM, 07.09.2010 в 13:34.
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2010, 14:01
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,022

Сообщение от FINoM
Для каждого селектора нужно будет создавать отдельный класс, что так же не хорошо, как по мне.
Нужно будет создавать только разные классы для разных градиентов. К примеру, у тебя 100 элементов с одинаковым градиентом. Сейчас имеешь 100 засраных атрибутов style. Будешь иметь 1 класс для 100 элементов и 1 блок стилей в таблице. Навесить 100 классов намного проще.
Если у тебя 100 элементов с разным градиентом - имеем 100 классов и 100 блоков стилей в таблице. Чем это отличается от 100 засраных атрибутов?

И ещё. В этом плагине не обязательно юзать each.
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2010, 14:46
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от B~Vladi
Нужно будет создавать только разные классы для разных градиентов. К примеру, у тебя 100 элементов с одинаковым градиентом. Сейчас имеешь 100 засраных атрибутов style. Будешь иметь 1 класс для 100 элементов и 1 блок стилей в таблице. Навесить 100 классов намного проще.
Если у тебя 100 элементов с разным градиентом - имеем 100 классов и 100 блоков стилей в таблице. Чем это отличается от 100 засраных атрибутов?
Дело говорите. Как это сделать? Вписать <style> не будет говнокодом?
Сообщение от B~Vladi
В этом плагине не обязательно юзать each.
Each - это применение для каждого объекта, определенного селектором, или я не так понимаю?
Ответить с цитированием
  #6 (permalink)  
Старый 07.09.2010, 16:15
Интересующийся
Отправить личное сообщение для Mikle Посмотреть профиль Найти все сообщения от Mikle
 
Регистрация: 04.09.2010
Сообщений: 14

Всё таки лучше (если уж на то пошло) для каждого браузера отдельный стиль приклеивать... слишком много ошибок. Опера, например может забанить..
Ответить с цитированием
  #7 (permalink)  
Старый 07.09.2010, 16:48
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,022

Сообщение от FINoM
Each - это применение для каждого объекта, определенного селектором, или я не так понимаю?
Да, но jQuery сам это сделает. Все равно, что писать:
$('div').each(function(){
  $(this).css({
    color: 'black'
  });
});

вместо:
$('div').css({
  color: 'black'
});

Правда, бред?
Сообщение от FINoM
Вписать <style> не будет говнокодом?
Ну во-первых, для доступа к CSS-файлам есть определённые интерфейсы. Т.е. это все делается на уровне DOM, а не регулярками.
Во вторых, jQuery не способен на такое. Поэтому работу с CSS придется реализовывать ручками. До кучи: есть расхождения ишака с браузерами, но не большое.

Если ещё осталось желание, почитай про работу с CSS тут и тут.
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2011, 04:28
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Ахаха, когда-то казалось, что я сделал круто
Ответить с цитированием
  #9 (permalink)  
Старый 04.12.2011, 08:34
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от FINoM Посмотреть сообщение
Ахаха, когда-то казалось, что я сделал круто
Дауж =))) В ИЕ например градиент с круглыми углами не прокатит=))) Там уже VML нужен.
Ответить с цитированием
  #10 (permalink)  
Старый 04.12.2011, 09:42
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 804

я такой штукой пользуюсь http://css3pie.com/
когда нужны некоторые новые css для старых IE использовать

а чтобы меньше писать -moz- -o- -ms- и т.д.
и вообще удобно, пользуюсь http://sass-lang.com/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 14:31
Плагин jParallax для jQuery britanik jQuery 4 14.02.2010 11:11
codeEvaluator – jQuery плагин Regent Ваши сайты и скрипты 13 29.01.2010 07:46
Плагин на jquery can3p jQuery 0 02.11.2009 15:02
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 18:00