jQuery Collapse | webcloud
A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content Collapsible Content with JavaScript This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure. Read the full documentation for more info. Basic Usage <div id="demo" data-collapse="accordion persist"> <h2>Fruits</h2> <ul> <li>Apple</li> <li>Pea
jQueryサンプル集
サイト制作時によく使うjQueryのコードをまとめました。 このマニュアルで使用しているバージョンは、1.7.1です。利用する際は、本家サイトで最新版をダウンロードしてください。 目次 スムーススクロール マウスオーバー時の画像切替 マウスオーバー時の画像の透明度変更 アコーディオンメニュー スライドパネル タブパネル 画像切り替え lightbox カルーセル おまけ：ある程度スクロールしたら、ページの先頭へ戻るボタンを表示させる方法 コードとサンプル 先にjQueryを記述してから、コードを書いてください。（コードは選択してコピーできます。） <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> CDNを利用する場合は、以下をコピペしてください。 <script type="text/javascri
クリックで開閉するスライドパネル
Result jQuery$(document).ready(function(){ //クリックイベント $('.head').click(function(){ //class="row"をスライドで表示/非表示する $(this).next('.row').stop(true, true).slideToggle(); }); });html<div class="head">Panel 1 </div> <div class="row"> <div>Panel 1 sample</div> <div>Panel 1 sample</div> <div>Panel 1 sample</div> </div> <div class="head"> Panel 2</div> <div class="row"> <div>Panel 2 sample</div> <div>Panel 2
超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方 – bl6.jp
jQueryプラグイン「jQuery Collapse」を使えばとても簡単に折りたたみコンテンツを実装することができます。クリックするごとに表示・非表示を切り替えられるのでスペースの有効活用になりますしレイアウトもスッキリ見せることができるので使う機会もありそうですね。折りたたむ要素はデフォルトでdivとulなのですが、オプションを指定することでolにしたりといったカスタマイズも簡単にできます。以下使い方です。 [ads_center] 使い方はとても簡単です。以下のサイトからプラグインをダウンロードします。 jQuery Collapse | webcloud jQuery本体とプラグインを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <scr
2012年に紹介したjQueryプラグインのまとめ – bl6.jp
当ブログで2012年にご紹介したjQueryプラグインをまとめてみました。全部で61のプラグインがありました。基本的には自分が再度見ても理解しやすいように、できるだけシンプルな使い方を書いてきたつもりです。ほとんどのプラグインで実際のサンプルなんかも付けているので、もしこの中にあるプラグインを使いたい場合は、参考にして頂けたら幸いです。 [ads_center] Lazy Karl 画像が表示させるまでローディング画像表示させることができます。 指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方 pShadow 画像や要素に簡単にドロップシャドウをつけることができます。 画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」 Organic Tabs コンテンツの量に応じてパネルが伸びたり縮んだりする可変式タ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
