WordPress主题的jQuery应用之标题提示

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件,在header.php的head标签中加载,JS文件中加入下例代码:

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
var sweetTitles = {
    x : 10,                            
    y : 20,                            
    tipElements : "a",                 
    init : function() {
        $(this.tipElements).mouseover(function(e){
            this.myTitle = this.title;
            this.myHref = this.href;
            this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);       // url 超过 30 个字符的部分用 ... 代替
            this.title = "";
            var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
            $('body').append(tooltip);
            $('#tooltip')
                .css({
                    "opacity":"0.8",                   // 0.8 为透明度可自行根据喜好调整数字
                    "top":(e.pageY+20)+"px",
                    "left":(e.pageX+10)+"px"
                }).show('fast');   
        }).mouseout(function(){
            this.title = this.myTitle;
            $('#tooltip').remove();
        }).mousemove(function(e){
            $('#tooltip')
            .css({
                "top":(e.pageY+20)+"px",
                "left":(e.pageX+10)+"px"
            });
        });
    }
};
$(function(){
    sweetTitles.init();
});

在CSS文件中添加下例代码:

1
2
3
body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

如果你还用了@回复这样的jQuery提示效果的话会被标题提示遮掉,可以参照下面解决:
代码中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”来排除class为atreply的a标签,或者用tipElements : “a:not([href^=’#’])”来排除href为锚点的a标签

原文:http://leeiio.me/sweet-titles-for-jquery/

发表评论

电子邮件地址不会被公开。 必填项已用*标注