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. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  2. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

  3. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  4. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  5. jQuery googleslides

コメント

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

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

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP