jquery-live-previewでリンク先をプレビュー

jquery-live-preview(Jquery Live Link Preview)を使うと、a タグのリンクにマウスオーバーで、リンク先URLをポップアップでプレビューする機能を実装できます。トリガーとなるイベントはマウスオーバー(hover)の他、クリック(click)を指定することも可能。

以下公式のサンプルページとGitHub。
A LIVE link preview window for links on hover over using Jquery and CSS3
alanphoon/jquery-live-preview

小さなライブラリですが便利、コードを読むのも簡単でした。

— 環境 —
Rails 4.1

スポンサーリンク

jquery-live-preview の設置

Rails プロジェクトでの利用なので、vendor/assets/jquery-live-preview に設置しました。Rails じゃない場合は、普通に GitHub の Readme 通りに進めればOKです。

Rails 利用の場合に、jquery-live-preview を vendor/assets 以下に配置する理由は以下を参考。

RailsのAsset Pipelineの理解とgemで管理しないJavaScriptライブラリの配置 | EasyRamble

また、Rails の Asset Pipeline 有効ではまった箇所 に書いている通り、css 内の画像ファイルへのパス指定で url → image-url へと変更させる必要がある。

css/livepreview-demo.css

9行目を変更。

以上で Rails プロジェクトへの jquery-live-preview の設置自体は完了。

Asset Pipeline の対象となるように manifest 設定

jquery-live-preview が Asset Pipeline の対象となるように、読み込まれるべきファイルを application.js, application.css の manifest で require されるように指定します。

assets/javascripts/application.js

assets/stylesheets/application.css

a タグに class=”livepreview” の属性を追加

HTML側は、任意の a タグに class=”livepreview” の属性を追加するだけです。

公式サイトのコード例ですが、この場合は bing.com のページをプレビューで表示させます。Rails の場合であれば、ビューファイルでは通常 link_to メソッドを使うと思うので、link_to に class オプションを付ければ良いでしょう。

jquery-live-preview 用の jQuery コード

Rails で jquery-live-preview を動作させるための jQuery コードを追加します。

assets/javascripts/livepreview.js

デフォルト設定での利用。

オプショナルな初期設定を行う場合は以下。

マウスオーバー(trigger: ‘hover’)で左側(position: ‘left’)に、ポップアップのプレビューを表示します。その他オプション詳細は、GitHub ページを参照。

以下、インラインでオプションを設定する例。

インラインによる設定は、assets/javascripts/livepreview.js で行った初期設定を上書きします。この場合、data-offset, data-position がそれぞれ、assets/javascripts/livepreview.js 内の offset, position を上書する。

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!