WebLabyrinth site image

WebLabyrinthWebに関する様々なメモや個人的実験を行うサイトです

Navi box open

jQueryでページ内リンクを自動生成するスクリプト | grant-simple-anchor-link.js

ページ内リンクはリンクとアンカーの設置を行わなければならないため意外と面倒なものです。
grant-simple-anchor-link.jsはJQueryを使用し、ページ内リンクにしたい要素に特定のclassを付けることでページ内リンクとリンク用のアンカーを自動で生成してくれるスクリプトです。

同じようなスクリプトは巷にたくさん公開されているでしょうが、jQueryの勉強を兼ねて作成してみました。

サンプル&ダウンロードページ

サンプルとダウンロードページはこちらへ

設置について

設置方法はサンプルページにも書かれていますがこちらでも・・・。

ダウンロードしたファイルを解凍し、中に入っているgrant-simple-anchor-link.jsgrant-simple-anchor-link.cssを自分のサーバーにアップロードします。

次に表示させたいページの内でアップロードしたファイルの読込みを行います。以下はjsとcssのフォルダを作成し、それぞれアップロードした場合の例です。

もちろんjQueryを使用しているのでライブラリファイル本体も忘れずに読み込んでおいてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/grant-simple-anchor-link.js" type="text/javascript"></script>

これで設定は完了です。後はページ内リンクを行いたい要素にclassを付けるだけで自動的にメニューが生成されます。付けるクラス名はgrant-simple-anchor-linkと言うクラス名です。

注意点等

ページ内リンクメニューは1種類しか生成できません。2種類以上のページ内リンクメニューを作りたい場合は手動で作成してください。

リンクメニューのXHTML上の挿入箇所はbody内部の一番後ろになっています。そのままでも問題無いと思いますが、都合の悪い場合は以下の部分を変更してください。

※↓ここの body を任意に変更してください。
$("body").append("");

アンカーを生成するclassは画像にも適用できますが、その時はtitle属性の文字列をリンクタイトルにとして取得します。tltle属性が無い場合はalt属性の文字列を取得します。どちらも存在しない場合は、「Move to the anchor」という文字列が適用されます。意図する文字列をリンクタイトルにしたい場合はtitleまたはalt属性に文字列を入力してください。

自動生成されるメニューのデザインを変えたい場合はgrant-simple-anchor-link.cssの中身を編集してください。

この記事を書いた人

ニックネーム: SHIBAZAKI
ブログ: https://weblabyrinth.net

北海道旭川市でweb関係のお仕事をしています。

Trackback URL

https://weblabyrinth.net/jquery-grant-simple-anchor-link/trackback/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください