Я разрабатываю приложение, которое отображает несколько представлений в виде таблиц (например, клиенты, продукты и т. Д.). В последнем столбце каждой строки содержатся кнопки, в которых пользователь может выполнять некоторые действия в определенной строке. Упрощенный пример:
<td class="actions"> <a href="projects/some-project/edit"> <img src="images/edit-project.png" alt="Edit project" /> </a> <a href="projects/some-project/do-something"> <img src="images/someaction.png" alt="Do something else with the project" /> </a> </td> Изображения являются прозрачными. Количество кнопок на столе может варьироваться, теперь их около 30.
Меня попросили внести изменения в стили css приложения, поэтому разные таблицы теперь могут иметь разные цвета, например, таблица клиентов теперь имеет какой-то грустный оттенок, проекты – синие и так далее. Более того, строки «нечетные» таблицы имеют несколько иной цвет, чем «четные». Строки также меняют цвета, если они выбраны.
Проблема в том, что в дизайне указано, что кнопки должны менять цвета вместе с строками. Это требует создания множества комбинаций кнопок и кнопок, и в будущем будет добавлено больше кнопок.
Я думаю, что лучший способ, чем назначить дизайнера с сотнями версий кнопок в разных цветах, – сделать его динамически, в зависимости от класса таблицы. Мой вопрос: какой был бы самый эффективный способ сделать это? Приложение использует php как серверный язык и javascript с jQuery на стороне клиента. Проблема с изображениями заключается в том, что они не монохромны, а используют несколько цветов, поэтому мне придется манипулировать их HSL в соответствии с классами css.
Если лучший способ использовать php, я бы, вероятно, использовал ImageMagick . Вопрос в том, что является лучшим методом для получения изображения, окрашенного очень близко к предоставленному цвету.
Я бы использовал jQuery для этого и установил цвет за png или png относительно класса / es css таблицы.
Не используйте слишком много php, как Imagemagick, потому что это значительно замедляет рендеринг страницы.
взгляните на Pixastic (coloradjust)
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/
или PaintbrushJS (оттенок цвета)
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/
или CamanJS (раскрасить)
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/
или VintageJS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS
Можете ли вы опубликовать одно из этих изображений? Потому что, если он прозрачен, как вы говорите, вы можете просто a который содержит эти изображения.
Например:
.actions > a { width: 40px; height: 20px; display: block; border-radius: 5px; border-width: 1px; border-style: solid; } .actions > a.green { background-color: green; border-color: darkgreen; } .actions > a.orange { ... }
И так далее.
Я реализовал очень похожую функцию на одном сайте, который я создал. Мы разрешаем пользователям выбирать из разных макетов (похожих на ваш html), а также несколько палитр цветов, изображений и т. Д. Вы определенно делаете это с помощью jquery:
В начале страницы вы можете сделать
$("head").append("<link>");
На каком-то событии изменения (или перезагрузке данных). Мои данные загружаются через ajax
css = $("head").children(":last"); // or find your <link> that you'd replace css.attr({ rel: "stylesheet", type: "text/css", href: path_to_your_css });
Вы можете изменить все, что хотите, включая цвета и изображения.