Created
April 26, 2016 05:17
-
-
Save nekoneko-wanwan/3bdb5780fdfb6887d8c3cd2ead104468 to your computer and use it in GitHub Desktop.
telリンクをレスポンシブで切り替える
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var fnc = { | |
// 電話番号機能(a:tel)をスマホの場合のみ有効化する | |
usableTel: function() { | |
/** | |
* PC, スマホでタグ自体を書き換える | |
* $.each()内での使用を想定 | |
*/ | |
var replaceFnc = function(index, elem) { | |
var tag = elem.tagName, | |
$self = $(elem), | |
$html = $self.html(), | |
telNumber = $self.data('tel'); | |
// スマホの場合 | |
if (utility.isSp() === true) { | |
// 既に置き換え済みだったらスルー | |
if (tag === 'A') { | |
return false; | |
} | |
$self.replaceWith('<a href="tel:'+telNumber+'" data-tel="'+telNumber+'" data-action="call">' + $html +'</a>'); | |
} | |
// PCの場合 | |
if (utility.isSp() === false) { | |
// 既に置き換え済みだったらスルー | |
if (tag === 'SPAN') { | |
return false; | |
} | |
$self.replaceWith('<span data-tel="'+telNumber+'" data-action="call">' + $html +'</span>'); | |
} | |
}; | |
// トラッキングイベント | |
var traking = function() { | |
console.log('トラッキング!'); | |
return false; | |
}; | |
// 初期化 | |
var init = function() { | |
$('[data-action=call]').each(replaceFnc); | |
// replace前のDOMを見ているため、$('[data-action=call]')を再取得してeachでイベント付与 | |
$('[data-action=call]').each(function() { | |
if (this.tagName === 'SPAN') { | |
return false; | |
} | |
$(this).off('click.traking'); // 重複登録を防ぐため一旦解除してから再設定 | |
$(this).on('click.traking', traking); | |
}); | |
}; | |
init(); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<span data-action="call" data-tel="03-0000-0000">03-0000-0000</span> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
utility.isSp()
はウィンドウサイズ(など)からスマホかどうかを判断している