2

Bootstrap Popovers を使用して、UI に「ヘルプ テキスト」を提供しています。

私の既存のJavaScript:

// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'hover',
    placement: 'auto bottom'
});

マウスでホバーするか要素に触れると、ポップオーバーが表示されます。私の問題はアンカータグ要素にあります。ポップオーバーがタッチ イベントによってトリガーされる場合:

  1. リンクをたどらない
  2. ポップオーバー テキストにアンカー タグ要素を追加して、基になるリンクへのアクセスを提供します。
4

2 に答える 2

1

ユーザーがタッチ デバイスを使用しているかどうかを検出し、データ属性からさまざまなコンテンツを提供します。Popover メソッドを使用して、さまざまなアクションをトリガーします。

<a href="#" 
  data-href="http://jsfiddle.net" 
  data-toggle="popover" 
  title="A popover title" 
  data-hover-content="No link here." 
  data-touch-content="<a href='http://jsfiddle.net'>
    A link here</a>.">A popover link
</a>

var is_touch_device = 'ontouchstart' in document.documentElement;

$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto bottom',
    html: true,
    content: function () {
        if (is_touch_device) {
            return $(this).attr('data-touch-content');
        } else {
            return $(this).attr('data-hover-content');
        }
    }
})
.on('mouseenter touch', function (e) {
    $(this).popover('show');
})
.on('mouseleave', function () {
    $(this).popover('hide');
})
.on('click', function () {
    if (!is_touch_device) {
        window.location.href = $(this).attr('data-href');
    }
});

フィドルのデモ

これはおそらく少し単純化できます。もちろん、代わりに content 関数でコンテンツを指定することもできます。

于 2015-07-02T15:57:49.487 に答える