Follow @papepo100
    

ページナビゲーションにタイトルを表示する吹き出しを設定する方法

ブログパーツ
0 0 2017/01/14
pagenavi3.png 以下で作成したページナビゲーションにタイトルを吹き出し表示する機能を追加しました。 なお、各ページの<title>~</title>にタイトルが設定されていることを前提としてます。
まずはコチラからjquery.balloon.jsをダウンロードし、ネットワーク上から参照可能な場所に置きます。

テンプレートの<head>~</head>内に以下を追加します。(jquery.min.jsの追加は適宜行います。)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="置いた場所/jquery.balloon.js"></script>

<script>
$(function(){
    $('.quotelink')
        .on("mouseover", function () {
            var url= $(this).attr("href");
            var dom_parser = new DOMParser();
            var http = new XMLHttpRequest();
            var content;
            http.open('GET', url, false);
            http.send();
            if (http.status == 200) {
                text = http.responseText;
                doc = dom_parser.parseFromString(text,"text/html");
                tags = doc.getElementsByTagName('title');
                if (tags.length > 0) {
                    content = tags[0].innerText;
                }
            }
            $(this).showBalloon({
                showDuration: 0,
                hideDuration: 0,
                minLifetime: 0,
                tipSize: 0,
                offsetY: 5,
                contents: content,
                css: {
                    opacity: "1.0"
                }
            });
        })
        .on("mouseout", function () {
            $(this).hideBalloon();
        })
    ;
});
</script>
次にpagenavi関数を以下の赤字箇所の様に変更します。
<script>
function pagenavi(w, n, next, prev, ext, self)
{
...
    if (url.indexOf('/blog-entry-') != -1) {
         if (u <= -1) {
             document.write('<li><a href=\"' + base + (i) + ext + '\" class=\"quotelink\">' + i + '</a></li>');
         } else {
             document.write('<li><a href=\"' + base + (u) + ext + '\" class=\"quotelink\">' + i + '</a></li>');
         }
    } else {
        document.write('<li><a href=\"' + base + (i - 1) + ext + '\" class=\"quotelink\">' + i + '</a></li>');
    }
...
}
これで上の画像のようにページ番号にマウスオンでタイトルが吹き出し表示されます。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント