スマホとPCで要素の順番を変更する方法
Web制作をしていると、PCだとこの順番のレイアウトでいいけれど、スマホだとちょっと変えたほうがいいかも・・なんてことがたまにあるかと思います。(少なくとも僕はありました)
そんな時、jQueryで簡単にその順番を変更することが可能ですので、ご紹介します。
jQueryを予めご用意の上、下に進みましょう。
beforeおよびafterメソッドを使う。
beforeメソッド
beforeメソッドはその名のとおり、入れ替えたい要素をその対象要素(引数)の前に持ってくるものです。
$(function(){ $('#1').before($('#2')); });これで#2が#1の前(上)に表示されるようになります。
afterメソッド
逆にafterメソッドは対象要素(引数)を入れ替えたい要素の後ろに持ってくるものです。
$(function(){ $('#2').after($('#1')); });これも#2が#1の前(上)に表示されるようになります。
引数を複数設定する
$(function(){ $('#2').after($('#1'),$('#3'),$('#5'),$('#4'),$('#6')); });引数は複数設定することが可能です。
これで表示される順番は2,1,3,5,4,6となります。
ユーザーエージェントで条件分けする。
アクセスしたデバイスがiPod,iPhone,Androidの場合といった条件分岐を行い、上記を挿入すれば良いです。
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //ここに書いた処理はスマホやipadで閲覧時に有効となります。 }else{ //それ以外(PC)で閲覧時に有効となります。 }これらを組み合わせて書くと、スマホでアクセスした場合とPCでアクセスした場合の表示順を切り替えることが可能になります。
デモページあります。
こちらにデモをご用意しましたので、PCとスマホでそれぞれアクセスしてみてください。
Tag : javascript, ホームページ制作
同じカテゴリーの別の記事
CONTACT
ホームページでの集客やWeb全般・スマートフォンアプリ制作などに関するご相談はお問い合わせフォームをご利用ください。
なお、ご相談いただいた後でも、弊社から営業などの売り込みを行うことは一切ありませんのでご安心ください。
お電話でのお問い合わせは、
0952-20-1501
平日10:00~18:00まで。セールス目的のお電話はご遠慮ください。