タグ

2013年4月23日のブックマーク (5件)

  • 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

    apple2tea
    apple2tea 2013/04/23
    超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方
  • 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

  • クリックで開閉するスライドパネル - かちびと.net

    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>Pane

    クリックで開閉するスライドパネル - かちびと.net
    apple2tea
    apple2tea 2013/04/23
    超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方[collapse]
  • 超簡単にコンテンツを折りたたんで表示・非表示させる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

    超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方 – bl6.jp
    apple2tea
    apple2tea 2013/04/23
    超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方
  • 2012年に紹介したjQueryプラグインのまとめ – bl6.jp

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみました。全部で61のプラグインがありました。基的には自分が再度見ても理解しやすいように、できるだけシンプルな使い方を書いてきたつもりです。ほとんどのプラグインで実際のサンプルなんかも付けているので、もしこの中にあるプラグインを使いたい場合は、参考にして頂けたら幸いです。 [ads_center] Lazy Karl 画像が表示させるまでローディング画像表示させることができます。 指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方 pShadow 画像や要素に簡単にドロップシャドウをつけることができます。 画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」 Organic Tabs コンテンツの量に応じてパネルが伸びたり縮んだりする可変式タ

    2012年に紹介したjQueryプラグインのまとめ – bl6.jp
    apple2tea
    apple2tea 2013/04/23
    超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方