マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。
シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。
書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。
[ 公式JSファイルのDLはこちらから ]
[ 私が作った簡単なデモはこちら ]
目次
使い方
01.HTML
必須になるのは、「.balloonKey」のクラスと、「data-balloon」です。data-balloonには表示したいテキストを入れてください。|
1 |
<span class="balloonKey" data-ballon="ここに表示したいテキストを入れる">ここに判定</span> |
.balloonKey のクラスがついた要素全てに対応するようにしています。クラスは変更しても大丈夫ですが、03のJS記述（※1）にも反映してください。
02.jQueryと、jaquery.balloon.jsを読み込み
|
1 2 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="./jquery.balloon.js"></script> |
jquery.balloon.js のディレクトリ位置は合わせてください。
03.JSを記述
HTML内でも、JSファイルを新規で作成して読み込ませても、どちらでも構いません。デザインカスタマイズ（※2）の箇所は、公式を見ながら、自分のデザインに合わせて書き換えてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$(function() { //反応させたい要素のclass名を定義--------------------------------- var keyClass = '.balloonKey'; //※1 クラス変更した場合はここを変更 //端末判定--------------------------------- var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){ var tabFlag = true; //iPhone、iPad、Androidの場合trueに }else{ var tabFlag = false; //それ以外の場合falseに } //端末判定の結果に合わせて動作 if(tabFlag == true){ //タブレット端末-------------------------------- $(keyClass).on('touchend', function(){ if($(this).hasClass('active')){ hideAction($(this)); //[2]baloon非表示の処理を着火 }else{ showAction($(this)); //[1]baloon表示の処理を着火 } }); }else{ //PC端末-------------------------------------- $(keyClass).on({'mouseenter' : function(){ showAction($(this)); //[1]baloon表示の処理を着火 },'mouseleave' : function(){ hideAction($(this)); //[2]baloon非表示の処理を着火 } }); } //[1]baloon表示の処理----------------------------- function showAction(dom){ var text = dom.attr('data-ballon'); dom.showBalloon({ contents: text, css: { //デザインカスタマイズ：ここから（※2） width: '12em', fontSize: '.9rem', opacity: '0.9', border: 'none', boxShadow: 'none', //デザインカスタマイズ：ここまで }, }).addClass('active'); } //[2]baloon非表示の処理 function hideAction(dom){ dom.hideBalloon().removeClass('active'); } }); |
以上3ステップで動作すると思います。
内容を簡単に解説
通常の呼び出し方
公式にもあるように、通常では「.balloon()」で呼び出しを行います。|
1 2 3 |
$(function() { $('selectors').balloon(options); }); |
showとhideでそれぞれ呼び出すことができる
このJSには「.balloon()」とは別の呼び出し方が用意されていて「.showBalloon()」と「.hideBalloon()」に書き分けることができます。「.showBalloon()」で表示する、「.hideBalloon()」で非表示にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { $('selectors').on({'mouseenter' : function(){ //マウスが乗ったらshowBalloon $(this).showBalloon({ contents: 'ここに表示したいテキスト', }); },'mouseleave' : function(){ //マウスが外れたらhideBalloon $(this).hideBalloon(); } }); }); |
まず端末のUserAgentで処理分岐をして、PCではマウスのホバーで、タッチデバイスではタップで、表示非表示を切り替えるJSを記述していけばOKです。
タッチデバイスの場合は表示している時にclass=”active”を追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function() { //端末判定--------------------------------- var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){ var tabFlag = true; //iPhone、iPad、Androidの場合trueに }else{ var tabFlag = false; //それ以外の場合falseに } //端末判定の結果に合わせて動作 if(tabFlag == true){ //タブレット端末-------------------------------- $('selectors').on('touchend', function(){ if($(this).hasClass('active')){ $(this).hideBalloon().removeClass('active');; }else{ $(this).showBalloon({ contents: 'ここに表示したいテキスト', }).addClass('active'); } }); }else{ //PC端末-------------------------------------- $('selectors').on({'mouseenter' : function(){ //マウスが乗った時の処理 $(this).showBalloon({ contents: 'ここに表示したいテキスト', }); },'mouseleave' : function(){ //マウスがはなれた時の処理 $(this).hideBalloon() } }); } }); |
このままだと記述が冗長なので、まとめられるところをまとめれば完成です。
