クライアントのサイトでは、大抵の場合、ヘッダーやフッターなどに電話番号画像がついたりします。

そして、こんな要望がでます

「スマホで見た時は電話番号をタップしたら電話がかかるようにしてよ」


これを実装はjqueryが便利です。

まずソースはこんな風になってるとします。

<header>
<img src="img/tel.png" alt="0120111111" class="tel">
</header> 

jqueryから処理するためにclass="tel"をつけときます。


js側はこんな感じ。

$(".tel").wrap('<a href="tel:0120111111"></a>');


.wrapというjQueryメソッドは、「周りを囲む」というもの。

リファレンスはこちら


これをすると
<img class="tel">が<a>タグで囲まれるってーわけですね。

勝手に閉じタグとの間に入れてくれるあたり、かしこいwrapさん。



あとはjs側は、Useragentをとって、スマホでアクセスした時にだけ効くようにすれば完成。

$(function(){
var device = navigator.userAgent;
if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
$(".tel").wrap('<a href="tel:0120111111"></a>');
}
});

 完成↑(コピペでいけます)


師走!