resizeイベント時にスマホ、タブレット、PCのwidth判別でclass付与&callbackするjQueryプラグイン書きました
PCで表示している要素をタブレットでは表示しない、でもスマホは場所を変えて表示する、又はDomの順番を替える、etc…レスポンシブ案件でメディアクエリーだけでは処理出来ない時にJSでデバイス毎に対応する場合があると思います。
その際の判別フラグを出すプラグインを作成しました。
【大きく分けて3つの機能です】
1.widthによってclass付与できる、また付与する名前を設定できる(widthも指定できる)
2.widthによってJS起動(コールバック関数が使える)
3.Android、iPhone判別でclass付与
1.widthによってclass付与、付与する名前を設定できる(widthも指定できる)
付与したclassに普通にスタイルを効かせてもいいですが、JSを使用する際のフラグ判別に使えます。
また対象Domはどの要素にでも使えるので 例えばaタグのボタンだけに付与する事も出来ます。
好きなclass名やブレイクポイント値(width)は設定出来ます。プラグインのオプションで指定してください。
2.widthによってJS起動(コールバック関数が使える)
1.はclass付与によるフラグ判別でしたが、SPの時だけ起動したいJS、プラグインをSPだけ止める、PCの時はプラグインの Optionを変えるなど
デバイス毎にサクッとJSを出し分けたい場合はこのCallback関数に追加してください。
3.Android、iPhone判別でclass付与
とりあえず「iPhoneとiPodの場合」と「Androidの場合」の2種類指定してます。(バージョン判別は今の所無し)
使い方
使い方は対象の要素に対して.widthWatch()これだけです。一般的にはbodyにclassを付与すると思いますので$('body').widthWatch()で良いと思います。また特定の要素に付与する事も出来きます。
Option・Callback
optionはデフォルト値なので変更が可能です。DEMOにも記載していますが、下記にサンプルを記載します。
$('body').widthWatch({
// ↓ブレイクポイントを指定してください
pc_bp: 950,
tb_bp: 768,
iphn6_bp: 375,
landscape_bp: 568,
portlate_bp: 320,
// ↓対応するwidthのclass名
pcClass: 'pc-style',
tabClass: 'tab-style',
iphn6Class: 'iphn6-style',
spClass: 'sp-style',
oriPortlate: 'portrait-style',
oriLandscape: 'landscape-style',
androidClass: 'android-style',
iOSClass: 'iOS-style',
つぎはcallbackの書き方
// それぞれのwidthの場合に起動するJSのコールバック
resizeOn_pc: function() {
console.log('******* pcの時だけ起動するfunctionや変数をここに書きます *******');
},
resizeOn_tb: function() {
console.log('******* tbの時だけ起動するfunctionや変数をここに書きます *******');
},
resizeOn_sp: function() {
console.log('******* spの時だけ起動するfunctionや変数をここに書きます *******');
}
Related posts
