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

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

関連記事

  1. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  2. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  3. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  4. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  5. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  6. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

コメント

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP