JavaScript

とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

個人的に使いやすそうだったので備忘録です。DropKickというjQueryプラグインを使ってみました。とても簡単にいい感じのドロップダウンを実装することができます。テーマカラーもホワイトとブラックがあります。それ以外のテーマを自分で作成することもできるので、その辺も自分のサイトに合うデザインへのカスタマイズがしやすいかと思います。ということで使い方です。

[ads_center]

使い方

ダウンロードしたプラグインファイルを読み込んでいきます。

<link rel="stylesheet" href="dropkick.css" type="text/css">
<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="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>

ブラックのテーマを使いたい場合は以下のCSSも読み込んでおきます。

.dk_theme_black {
    background: #aebcbf; /* Old browsers */
    background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aebcbf), color-stop(50%, #6e7774), color-stop(51%, #0a0e0a), color-stop(100%, #0a0809)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* W3C */
}
.dk_theme_black .dk_toggle,
.dk_theme_black.dk_open .dk_toggle {
    background-color: transparent;
    background-image: url('images/dk_arrows_white.png');
    color: #fff;
    text-shadow: none;
}
.dk_theme_black .dk_options a {
    background-color: #333;
    color: #fff;
    text-shadow: none;
}
.dk_theme_black .dk_options a:hover,
.dk_theme_black .dk_option_current a {
    background-color: #E15A01;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
}

そして、ドロップダウンをセットします。

<script type="text/javascript" charset="utf-8">
$(function () {
    // デフォルト
    $('.default').dropkick();

    // ブラック
    $('.black').dropkick({
        theme : 'black'
    });
});
</script>

HTMLはとりあえずシンプルにこんな感じで。

<form action="#" method="post">
    <select name="sample1" class="default">
        <option value="">サンプル1</option>
        <option value="test1">test1</option>
        <option value="test2">test2</option>
        <option value="test3">test3</option>
        <option value="test4">test4</option>
        <option value="test5">test5</option>
    </select>

    <select name="sample2" class="black">
        <option value="">サンプル2</option>
        <option value="test1">test1</option>
        <option value="test2">test2</option>
        <option value="test3">test3</option>
        <option value="test4">test4</option>
        <option value="test5">test5</option>
        <option value="test6">test6</option>
        <option value="test7">test7</option>
        <option value="test8">test8</option>
        <option value="test9">test9</option>
        <option value="test10">test10</option>
    </select>
</form>

自分でテーマを作成したい場合はプラグインフォルダにあるblank_theme.cssで作ることができます。

ということでシンプルで使いやすいプラグインでした。以下のサイトからダウンロードすることができます。

関連記事

  1. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  2. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  3. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  4. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  5. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

  6. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

コメント

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

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

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP