サイト制作に携わっていると、画面に設置されているリンクを無効化して、間違って押してしまわないようにするという要望を聞くことがあるかもしれません。例えば、管理ツールのプレビュー表示中は、リンクを無効化しておくなどです。
この記事では、jqueryを使ってaタグを無効化する方法を紹介します。また、その応用として、特定ディレクトリを除いてaタグを無効化する、プラグイン化まで実施します。
サイト制作に携わっていると、画面に設置されているリンクを無効化して、間違って押してしまわないようにするという要望を聞くことがあるかもしれません。例えば、管理ツールのプレビュー表示中は、リンクを無効化しておくなどです。
この記事では、jqueryを使ってaタグを無効化する方法を紹介します。また、その応用として、特定ディレクトリを除いてaタグを無効化する、プラグイン化まで実施します。
jQueryを使って、画像を遅延ロード(画像が表示されたタイミングで読み込むようにする)の作成方法を紹介します。画像の遅延ロードはLazy Load Pluginなどを使えば実現できますが、自分の手を動かして作成してみるとJavaScript、並びにjQueryの勉強になるかと思います。
今回のプログラムの動作確認は、Chrome(44.0.2403.107)とFirefox(39.0)で実施しました。
jQueryのプラグイン「jquery.inview」を紹介します。このプラグインを使うと、ある要素が「画面に出現した」や「画面外に出た」というイベント時に処理を実行することができます。
jQueryを使って、ページの右下に「TOPに戻る」ボタンを設置する方法を紹介します。その「TOPに戻る」ボタンは、クリックすることでページの上部にスクロールします。
また、ページの上部にスクロールするのをアニメーションにする方法や、ある程度スクロールしないと「TOPに戻る」ボタンが表示されないようにする方法なども紹介しています。
jQueryを使ってAjaxリクエストを投げて、フォームにエラーメッセージを表示する方法を紹介します。また、エラーが発生している入力項目(inputなど)の中の、一番上の入力項目にスクロールを合わせる方法も紹介します。