JavaScript

リスト化したテキストを円になるように配置してくれる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でカスタマイズすることでカラフルなネームプレートのようにすることもできます。こんな感じの。

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要素間のスペースを調整することができます。

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

ストライプの背景パターンをサクっと作ることができる「Striped Backgrounds」前のページ

テキストのCSSを手軽に設定できる「CSS Type Set」次のページ

関連記事

  1. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  2. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  3. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  4. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  5. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  6. JavaScript

    とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる

    とても簡単かつ軽量なjQueryのスライダー「jQuery Slide…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. メキシコ オアハカ
  2. ドリップ
  3. チェリー
  4. 温泉水99

アーカイブ

PAGE TOP