無数にあるjQery plugin読み込んでAjaxな機能を簡単に扱う方法
jQery.js+プラグイン.jsを読み込ませて実際に動作するまでを紹介。
これさえ理解すればjavascriptがわからなくてもほとんどのAjaxな機能が利用できるようになります。
- jquery.js - ダウンロードページかならず必要ですのでダウンロードして下さい
- jQueryプラグイン公式 - 100以上のプラグインが用意されています。
それでは上記の公式から、比較的簡単なプラグインを読み込ませて動作させる例をあげてみようと思います。
jQueryプラグインpage-scroller.jsでスムーズに動作するページスクロール
これは自分の知っている限りでは超高機能かつ超軽量なページスクロールプラグインです。
要素にidを指定しておけばhrefに#idnameを入れるだけで動作します。
コード
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="page-scroller-300.js"></script> <!-- ▲head内 --> <a href="#id1">ID1へ</a> <div id="id1" style="margin:1500px 0px">ID1</div>
応用編DEMO - DOWMLOAD
シンプルすぎますね。プラグインの容量も4KBなのでお手軽です。ページスクローラーは利用頻度も高いのでいいですね。
作者さんが日本の方なので驚きました。更に詳しい内容を知りたい方は作者さんのページへどうぞ。
Page Scroller | コリス
jQueryプラグイン interfaceを使ったAcordionメニュー
完成度の高いinterfaceプラグインの中からacordionを使ったメニューを紹介します。
デザインは全てCSS、javascriptで簡単な設定が可能とAjaxプラグインによくあるパターンです。
コード
<style type="text/css"> #myAccordion{ width: 400px; border: 1px solid #6CAF00; font-size:12px; } #myAccordion dt,dd{ margin:0; padding:0; } #myAccordion dt{ line-height: 20px; background-color: #80df20; border-top: 2px solid #DAFF9F; border-bottom: 2px solid #6CAF00; padding: 0 10px; font-weight: bold; color: #fff; } #myAccordion dd{ overflow: auto; } #myAccordion p{ margin: 16px 10px; } #myAccordion dt.myAccordionHover{ background-color: #90ef30; } #myAccordion dt.myAccordionActive{ background-color: #6CAF00; border-top: 2px solid #80df20; border-bottom: 2px solid #000; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="interface.js"></script> <script type="text/javascript"> $(document).ready( function(){ $('#myAccordion').Accordion({//id名を設定 headerSelector: 'dt', panelSelector: 'dd', activeClass: 'myAccordionActive', hoverClass: 'myAccordionHover', panelHeight: 200, speed: 300 });}); </script> <!-- ▲head内 --> <dl id="myAccordion"> <dt>ここにタイトルをいれます</dt> <dd><p>内容をここにいれます</p></dd> <dt>ここにタイトルをいれます</dt> <dd><p>内容をここにいれます</p></dd> <dt>ここにタイトルをいれます</dt> <dd><p>内容をここにいれます</p></dd> </dl>
DEMO - DOWMLOAD acordionのみチェックを入れてDownlod your selection
いままでに紹介した中では少し複雑にみえますが、正直理解できなくてもコピー&ペーストだけでも動作させる事が可能ですので、
難しそうと敬遠している方もプラグインを使ってまず設置動作させてみる事をお勧めします。
以前の記事でinterfaceプラグインの紹介をしていますのでぜひご参照ください。