ノンプログラマーにもおすすめ!少しのコードで実装できるjQueryプラグイン6選

このエントリーをはてなブックマークに追加

最近、話題のjQuery。難しいと思って勉強する事をためらっている人もいるのではないでしょうか?
ですが、意外と簡単に機能を実装できるプラグインがあり、複雑そうな機能も楽に導入できてしまいます。
そこで、今回はそんなお手軽jQueryプラグインを紹介します。

①ドラッグ操作でファイルをアップロード「jQuery HTML5 Uploader」


デモはこちら。
jQuery HTML5 Uploader

ドラッグでファイルアップロード jQuery

穴があいている部分にファイルをドラッグ&ドロップするだけでアップロード可能に!
しかも、導入方法は、jQuery HTML5 Uploaderからファイルをダウンロードして、部分で読み込むだけ。
コードは5行ほど書けば実装できます。

スポンサーリンク

②マウスの動きを追いかけてくるオシャレなプラグイン

デモはこちら。
jquery マウスカーソル
cursor followingmenu
マウスの動きに合わせて物体がひたすら追いかけてきます。
Webページでマウスの動きと同時にコンテンツをスクロールさせたいときに便利かもしれません。

導入も簡単!
こちらから、スクリプトをダウンロードし、読み込むだけ。
コードもdiv, liに属性を指定してあげるだけなので、すぐできる!

スポンサーリンク

③アニメーション付きのダイアログ

確認の際や、警告など意外に使う場面が多いダイアログもjQueryを使えば簡単にかっこ良く実装できます。
こちらがデモ。
jquery ダイアログ
導入には、jQuery UIからソースをダウンロードし、読み込むだけ。

JS

<script>
$( function() {
    $( '#jquery-ui-dialog' ).dialog({
        autoOpen: false,
        show: 'explode',
        hide: 'explode'
    });
    $( '#jquery-ui-dialog-opener' ).click( function() { //ボタンにクリックイベントを
        $( '#jquery-ui-dialog' ).dialog( 'open' );
        return false;
    });
});
</script>

HTML

<div id="jquery-ui-dialog" title="ダイアログ">
    ここにダイアログの内容を書く。
</div>
<button id="jquery-ui-dialog-opener">ダイアログを開く</button>

④ダイアログを使ったフォームも実装できる!

先ほどのダイアログにフォームをくわえる事が可能!
フォームの値を受け取る事も出来る優れものです。
こちらもjQueryサイトからダウンロードし、ちょこっとコードを書くだけ。
デモはこちら。
jquery ダイアログフォーム
これがあれば、画面遷移のないストレスフリーなページが出来ますね。

⑤jQueryでおしゃれなカレンダー機能を

日付を選択するタイプのカレンダーもjQueryなら、簡単に実装できてしまうのです。
デモはこちら

実装するには、jQueryサイトからソースをダウンロードし、読み込み、数行コードを書くだけ!
こんな感じ。

JS

<script>
$( function() {
    $('#jquery-ui-datepicker').datepicker();  //ここはクリックする部分
});
</script>

HTML

<p>日付: <input type="text" id="jquery-ui-datepicker"></p>

⑥タブも信じられないぐらい簡単に実装可能!

いまや、常識となっているページ上部のタブ。
画面遷移がなく、非常に便利ですよね。
こちらもjQueryを使って楽に導入できます。

デモはこちら。
jquery タブ

今回も、jQuery UIサイトからソースをダウンロードし、読み込む。
そして、またもや、少しだけコードを書くだけで完成!

JS

<script type="text/javascript">
$(function(){
    $('#tabs').tabs();
});
</script>

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">タブ1</a></li>
        <li><a href="#tabs-2">タブ2</a></li>
        <li><a href="#tabs-3">タブ3</a></li>
    </ul>
    <div id="tabs-1">
        <p>タブ1の内容。</p>
    </div>
    <div id="tabs-2">
        <p>タブ2の内容。</p>
    </div>
    <div id="tabs-3">
        <p>タブ3の内容。</p>
    </div>
</div>

いかがだったでしょう?
jQueryを使えば、ほとんどコードを書かずとも、こんなにかっこいい機能を実装できるのです。
「コーディングはちょっと..」と思っているデザイナーの方もぜひ、使ってみてください!
ちなみに、わたしは、この本を参考にしています。

jQueryでは、このドーナッツ本が定番あり、ケースに応じた使用方法が豊富に掲載されていますので、
仕事中も重宝しています。

これから、jQueryはきっと求められるスキルになりますので、
これを機に、少しづつ触ってみてはいかがでしょうか。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!