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や変数をここに書きます *******');
}

Share

  • このエントリーをはてなブックマークに追加
  • 31

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>