[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+

HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery A+
jQuery A+ -GitHub

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>

top of page

©2017 coliss