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. pixelate.js
  2. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  3. Jqx-Media-Slider
  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. Multi-device scrolling menu

コメント

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

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

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP