Палитра на JavaScript

Хочу предложить вашему вниманию, очень полезный, на мой взгляд класс, реализованный на JavaScript, который позволяет выбирать цвет из палитры. Класс меняет цвет объекта в данном документе на выбранный из палитры, а также шестнадцатиричное представление цвета, выводит в поле input (text) формы.

Объекты и поля input определяются по их айдишнику (id). Посмотрите пример:

Это тестовый блок, с рыбой вместо текста. То, что вы читаете — это не текст, это просто «Рыба»

#  

#  

#  

Как вы видите, меняется не только цвет текста объекта, но и цвет фона и границ. Короче говоря, цвет любого элемента устанавливаемый с помощью CSS:

  • color
  • backgroundColor
  • borderColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor

Пример:

#<input type="text" id="border" name="text" size="6" readonly="readonly" />
<script type="text/javascript">
//<![CDATA[
 Colors.setup({
  objectId    : "fish", // id объекта
  inputTextId : "border", // id поля text
  styleColor  : "borderColor", // названия стиля изменяемого цвета эллемента
  outImage    : "rgb.gif", // url картинки, при клике на которую будет отображаться
                                   // палитра
  overImage   : "on_rgb.gif" // url картинки, при наведении на неё указателя мыши
  width       : 20,   //размер квадратика цвета палитры
  border      : 1     //размер границы квадратика палитры
  });
 // ]]>
</script>

 

Исходный код класса Colors.

Протасов Сергей, Палитра на JavaScript.

 

Этот пример с описанием его работы прислан автором для размещения на XHTML.ru. Подробнее...



Много комментариев (16) к “Палитра на JavaScript”

  1. boombick :

    Респект. Давно хотел такую штуку написать. Только не с фиксированными цветами, а как отображаются палитры в графических редакторах. С градиентами.


  2. AKS :

    Немного предложений для метода Colors.rgb2hex:
    - после оператора return оператор else теряет всякий смысл, могло бы быть уместным условие типа
    if (rgb.indexOf(’rgb’) > -1)
    - в строке x=’0123456789abcdef’ нет необходимости, будет достаточно n.toString(16).replace(/^(\w)$/,’0$1′)
    - вместо
    var c = rgb.substring(4);
    c = c.substring(0, c.length-1);
    неплохо было бы
    c = rgb.replace(/[rgb\(\)\s]/g, ”).split(’,');
    добавив затем if (c.length != 3) return ‘000000′
    - в цикле не будет лишней проверка
    if (/%/.test(s[i]))


  3. Протасов Сергей :

    boombick :

    Поковыряйтесь в коде там все настраивается и цвета и размер паллитры


  4. Равалл Светлый :

    Предлагаю вам расширить разработку, введением возможности изменении цвета элемента при навеведении мыши (ака hover)


  5. Maxik :

    Да даже без доработок достаточно удобный инструментик получился, спасибо!


  6. Александр :

    Ничего скриптик, только неработает если не указать objectId


  7. Forexman :

    Спасибо. Интересно про класс.


  8. Юридическая консультация :

    Этот класс используется здесь:
    Экспорт вопросов бесплатной юридической консультации.

    Если вы используете этот класс, напишите где именно.
    Спасибо.


  9. Host :

    спасибо! отличная заметка, очень пригодилось.


  10. Батя :

    Спасибо – очень хороший скрипт.


  11. Oleg :

    Отлично, спасибо.


  12. Kaligula :

    Как долго я искал что-то подобное! Прямо в точку. Огромное спасибо!!!


  13. btl :

    Слушай, а действительно полезная вещь. Попробовал – понравилось!


  14. Deimos :

    В опере не работает, однако. 9.50


  15. Man :

    у меня и в 9.51 не пашет!(


  16. Дизель генератор :

    “в строке x=’0123456789abcdef’ нет необходимости, будет достаточно n.toString(16).replace(/^(\w)$/,’0$1′)” – очень сомневаюсь в этом!

    А скрипт в Опере и вправду не работает.



22 queries 0.183 seconds.