リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を描くように配置してくれるjQueryプラグイン「Extremes」です。使い方や機能がとてもシンプルでいいですね。各テキストをカスタマイズしてネームプレートのようなカラフルなナビに仕上げることもできるのでお洒落です。ということで以下使い方です。

[ads_center]

Extremesの使い方

Extremesの使い方はとても簡単です。いつも通りjQuery本体とダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="extremes.js"></script>

円を描く要素をセットします。

<script type="text/javascript">
$(document).ready(function(){
    $('.simple').extremes();
})
</script>

リストマークなどは表示させないようにするためlist-style-typeはnoneにしておきます。で、あとはHTMLを記述するだけです。

<ul class="simple">
    <li>Sample Text</li>
    <li>Sample Text Sample Text</li>
    <li>Sample Text</li>
    <li>Sample Text Sample Text</li>
    <li>Sample Text</li>
    <li>Sample Text Sample Text</li>
    <!-- 以下略 -->
</ul>

CSSでカスタマイズすることでカラフルなネームプレートのようにすることもできます。こんな感じの。

paddingやborder-radiusなどを使って形を整えたら、あとは自分が使いたい色を各クラスに設定していきます。

.red {background-color: #FF0000;}
.brick {background-color: #FF3300;}
.orange {background-color: #FF8000;}
/*-- 以下略 --*/

各li要素に設定した色のクラスをつけていきます。

<ul class="colors">
    <li class="red">Red</li>
    <li class="brick">Brick</li>
    <li class="orange">Orange</li>
    <!-- 以下略 -->
</ul>

で、適用したいセレクタをセットすればOKです。

<script type="text/javascript">
$(document).ready(function(){
    $('.colors').extremes({
        diameter: 50
    });
})
</script>

オプションのdiameterで、li要素間のスペースを調整することができます。

ということで、こんな感じでナビゲーションを作ってみるのも面白いかもですね。タグクラウドなんかにもいいかも。以下からダウンロードできます。

Extremes jQuery plug-in