2009/10/29

jQueryのプラグイン、FarbtasticでET withwithにカラーラベルを実装する

ET withwithの画面シンプルで気に入っていたのですが、ちょっと分類の視覚的なアピールが足りないなと。というわけで、FarbtasticというjQueryのプラグインでCategoryとClientのテーブルに色情報を持たせて、上のように区別しやすくしました。

Farbtastic: jQuery color picker plug-in | Steven Wittens – Acko.net

PHP側の処理もシンプルでスタイル属性を直接記入して、色番号のところに数値を挿入してカラーラベルを実現しています。

<li class="category" style="border-top:5px solid <?php echo($content[‘Category’][‘color’])?>;">
<?php echo $html->link($content[‘Category’][‘category’], array(‘controller’ => ‘contents’, ‘action’ => ‘view_category’, $content[‘Category’][‘id’])); ?>
</li>

色の入力は先述のFarbtasticで簡単に選ぶことが可能。

ET withwith : Categories

いいですね、カラーラベル。ちょっと手帳的な楽しさがあります。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram