»WEB制作コード・プラグインWEBサービス・便利なサイトWordPressPhotoshopPC全般サイト運営お知らせ9ineBBWEB×DESIGN×CREATIVETwitterFacebookFeedlyFeed/RSSHOMEWEB制作系コード・プラグインjQueryでページの前後への移動(変遷)をキーボードのキー操作で実装するjQueryでページの前後への移動(変遷)をキーボードのキー操作で実装するTweet240PRウェブサイトの記事で前の記事、次の記事を素早く移動したいときに。キーボードの十字キーのところで操作できるととても楽です。リンクボタンはマウスでクリックして操作しますがファーストビューで見えない所にボタンがあったりすると。手間です、さくさくページを見て行きたいときはキーボードでの操作ができるとかなり楽でユーザービリティの向上につながります。今回はその機能をjQueryを使って実装する方法を紹介します。前後のページへのリンクを入れます。リンクはHTMLにあるボタンからhrefにある値を取得して代入してあります。今回はHTMLタグからリンクの情報を取得していますが、直接リンク先のURLを代入しても問題ありません、無いときは空にします。次にキーボードでの操作の部分となります、keyupのタイミングで実行するようにします。キーが押された時ではなくキーが離された時がつまり最終的な入力になるので、最後に離されたキーの情報を元に動作をさせます。値がある時のみ実行するということです。この箇所で指定のURLへのページ変遷をjavascriptで実行しています。使ってD&Dでリストの並び替えを実装する。