twitter bootstrap popover使い方

2014年10月12日更新 view: 15952 view
photoBy: http://gigazine.jp/img/2012/04/21/palomitas/P1300436.jpg

ポップオーバーの使い方

スポンサードリンク

http://twitter.github.com/bootstrap/javascript.html#popovers

に記載されているけど、なぜかうまく動かないのでまとめてみた。

最新版をダウンロード

http://twitter.github.com/bootstrap/customize.html

javascriptがころころ変わっているみたいなので、最新版をダウンロードしておこう。

使用例

一番簡単な使い方

rel要素に popover を持つ物全てに適用

<script src="/app/webroot/js/bootstrap.js"></script>
$(function() {
    $('[rel=popover]').popover();
});

HTML

<a href="#" role="button" rel="popover" class="btn popover-test" title="タイトル" data-content="ここにメッセージが入ります" data-placement="top">上へ</a>
    <a href="#" role="button" rel="popover" class="btn popover-test" title="タイトル" data-content="ここにメッセージが入ります" data-placement="right">右</a>
<a href="#" role="button" rel="popover" class="btn popover-test" title="タイトル" data-content="ここにメッセージが入ります" data-placement="left">左</a>
    <a href="#" role="button" rel="popover" class="btn popover-test" title="タイトル" data-content="ここにメッセージが入ります" data-placement="bottom">下</a>

たったこれだけ。

一歩進んだ使い方

aタグに data-??? 要素を付ければ設定完了

<a href="#"
     role="button"
        rel="popover"
        class="btn popover-test"
        title="タイトル"
        data-html="true"
        data-trigger="hover"
        data-content="ここにコンテンツ"
        data-animation="false"
        data-placement="top"
     >上へ</a>

設定内容

data-html

htmlとして表示するか? タグを有効にするか。

data-trigger

どういうタイミングで表示させるか。 click | hover | focus | manual の中からお好きな物をどうぞ。

data-content

コンテンツの内容をどうぞ。 ちなみにタグも使えますよ。

data-animation

アニメーションさせながら表示するか。

data-placement

上下左右、どちらにポップアップさせるか

hover時の注意点

hoverする時、カーソルが隠れてしまうので対処方法

<script type="text/javascript">
$(function () {

    $('#news').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'bottom',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

});
</script>
<?
$data = '<ul class=\'info\'>
<li>aaa</li>
<li>bbb</li>


</ul>';
?>

<style type="text/css">

.popover ul.info {
    margin:200px;
}

</style>


<a rel="popover" data-content="<?=$data;?>" data-placement="bottom" id="news"><i class="icon-info-sign"></i>新着</a>

一度 trigger を手動にしておいて、そこから独自に組み込む。
上記コピペで動きます。

応用例

ajaxも使えちゃいますよ♪

$(function(){
    //サイトリストを取得
    $("#rireki").popover({html: true})
    $("#rireki").click(function(){
        $("#sitelist").load('/defaults/sitelist/')//表示したいURL
    })
});
<a href="#" id="rireki" data-content="<div id='sitelist'></div>" data-placement="top" title="履歴">押してね</a>

さぁ、素晴らしいpopoverをガンガン使っちゃいましょうよ!

さらに!

js

$('*[data-poload]').bind('click',function(){
var e = $(this);
e.unbind('hover');
$.get(e.data('poload'),function(d){
    e.attr('data-content', d).popover({html:true});
});
});

html

<a id="hoge" href="#" role="button" rel="popover" class="btn" title="タイトル" data-content="kontent" data-poload="/targeturls/" data-placement="top">ほげら</a>

これで、

  • data-pload の data を持つものがクリックされたら
  • data-ploadのurlを読み出し、
  • data-content に格納して表示する

ってことができます。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

10月20日 ( 金 ) にアクセスが多かった記事はこちら!