ホーム > ブログ > プログラミングTips > jQueryのeach()でまとめてイベントを設定

jQueryのeach()でまとめてイベントを設定

2015.11.24

銀ねこです。
昨日から何時間稼働してるかわかりません。。。

疲れ果ててますが、今回クリッカブルレスポンシブのスマフォとPCで挙動を切り分けたのでそのやり方をメモしておきます。

each()が便利

クリッカブルマップをレスポンシブ対応して、pcではマウスオーバーで画像切り替え、スマフォではタップした後、0.5秒後に画面遷移して切り替わる感じがわかるように処理を切り分けました。

タップイベントでとろうか、pcの設定をそのまま生かしてクリックで画像変えるか悩んだんですが、もともとのソースを生かしてクリックして切り替えることにしました。

スマフォ&タブレットかPCかを判定します。

もちろんスマフォとタブレットをまた切り分けたい時はさらに細かく設定してください。

  1. var _ua = (function(u){
  2. return {
  3. Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
  4. || u.indexOf("iphone") != -1
  5. || u.indexOf("ipod") != -1
  6. || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
  7. || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
  8. || u.indexOf("blackberry") != -1
  9. }
  10. })(window.navigator.userAgent.toLowerCase());
  11.  
  12. if(_ua.Mobile){
  13. //タブレット・スマフォの場合…
  14. }
  15. else{
  16. //それ以外
  17. }

クリッカブルマップのレスポンシブに対応するためにjQueryプラグイン「RWD Image Maps -GitHub」を使います。

リファレンスどおりだと$(ready.(function(){})で呼び出してますが、ここはあえてloadで呼び出します。

  1. <script src="jquery-1.11.0.min.js"></script>
  2. <script src="jquery.rwdImageMaps.min.js"></script>
  3. //クリッカブルのレスポンシブ対応
  4. $(window).load(function(e){
  5. $('img[usemap]').rwdImageMaps();
  6. });

imgの背景をwidth:100%,height:100%;にして透明の画像を重ねます。
マウスオーバー、クリックした時にjQueryで切り替えます。

  1. img{
  2. background:url(bg.jpg) no-repeat;
  3. width:100%;
  4. max-width:600px;
  5. height:auto;
  6. background-size:100% auto;
  7. }

htmlのソースはこんな感じ。
マウスオーバーの切り替える画像はareaのid名+拡張子とします。

  1. <img src="trans.png" alt="" width="600" height="200" usemap="#Map" id="img">
  2. <map name="Map">
  3. <area shape="poly" coords="◯◯◯◯" href="javascript:void(0);" id="cat01">
  4. <area shape="poly" coords="◯◯◯◯" href="javascript:void(0);" id="cat02">
  5. <area shape="poly" coords="◯◯◯◯" href="javascript:void(0);" id="cat03">
  6. </map>

後はスマフォかPCかを分岐して処理を切り分けます。

pcの時はマウスオーバー、スマフォの時はクリック&遅延処理をします。

eachで回しているので
クリック、マウスオーバー、idなども
$(this)を使って処理が可能です。

  1. $('area').each(function(){
  2. $(this).click(function(){
  3. _id = $(this).attr('id');
  4. if(_ua.Mobile){
  5. s = 500;
  6. $('#img').attr( 'src' , _id + '.png');
  7. }else{
  8. s = 0;
  9. }
  10. setTimeout(function(){
  11. window.location.href = 'http://ginneko-atelier.com/';
  12. } , s );
  13. });
  14. if(!_ua.Mobile){
  15. $(this).mouseover(function(){
  16. _id = $(this).attr('id');
  17. $('#img').attr( 'src' , _id + '.png' );
  18. }).mouseout(function(){
  19. $('#img').attr('src', transImg);
  20. });
  21. }
  22. });

デモはこちら

今回はクリッカブルの挙動を変えましたが、同じ要領でPCではモーダルウィンドウ、スマフォではtarget:_blankといった感じで開くウィンドウも変えることもできます。

色々使えまわせそうです。

もう少しソースを整理したいところです笑

この記事のタグ