[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+
Post on:2014年3月19日
sponsors
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。
jQuery A+のデモ
デモはChrome, Safari, Firefox, Opera, IEは6/7/8にも対応しています。
デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。
- リンクを別窓（タブ）で開く
- リンクを開く前に確認ダイアログを表示
- iframeを使ったダイアログを表示
- Ajaxを使ったダイアログを表示
- モーダルウインドウを表示
- フレーム内にリンクを表示
- 通知パネルを表示
- 印刷を表示
- ページ内アンカーへアニメーションでスクロール
- スクロールのスピード設定
- スクロールの位置設定
※それぞれ細かい設定があるものもあります。
jQuery A+の使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトを外部ファイルとして記述します。
<head> ... <script src="jquery.min.js"></script> <script src="jquery.Aplus.js"></script> </head>
Step 2: JavaScript
A+を適用する要素を指定します。
ページ全体で使用する時は、bodyで。
<script type="text/javascript">
$(function(){
$('body').Aplus();
});
</script>
Step 3: HTML
機能を加えたいa要素にclassを使って設定します。
リンクを別窓（タブ）で開く。
<a href="demo.html" class="blank">Blank</a>
印刷ボタン。
<a href="#" class="print">Print</a>
通知パネル。
<a href="demo.html" class="notify">Basic</a>
モーダルウインドウ。
<a href="demo.html" class="dialog dialog-modal" title="Modal dialog">Modal dialog</a>
ページ内アンカーのアニメーションスクロール。
<a href="#index" class="scroll">Scroll</a>
ページ内アンカーのアニメーションスピード設定。
<a href="#index" class="scroll scroll-speed-2000">Set speed</a>
ページ内アンカーの位置調整。
<a href="#index" class="scroll scroll-offsetY-50">Set offset</a>
sponsors
