忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/07/26 05:36 |
JavaScript2-9:Qtip

Qtip 1.0.0-rc3
http://craigsworks.com/projects/qtip/

リンク上にカーソルを動かしたときにツールチップを表示するjQueryプラグインです。

onMouseOverで適当にテキストを挿入するなり、なんならJavaScriptを使用せずCSSだけでもできたりはします。
またalt属性やtitle属性を指定すれば大概のブラウザはその内容を自動的に表示したりしてくれます。
http://phpspot.org/blog/archives/2008/03/javascriptcss_2.html

まあとりあえずcssとqTipでそれぞれツールチップを書いてみます。
 

index.html
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
54
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
        
        <script type="text/javascript"><!--        //JavaScriptでツールチップ
        $(document).ready(function(){
            $('#qtip_tooltip').qtip({            //id="qtip_tooltip"に対して
                 content: 'qTipで吹き出し'        //表示する文
                ,style:{                        //スタイル
                     color:"red"
                    ,background:"lightgreen"
                    ,border:{                    //外枠
                        color:"#000000"
                        ,radius:2
                    }
                    ,tip: {corner:"leftTop"}    //
                }
                ,show: 'mouseover'            //表示、非表示にするタイミング
                ,hide: 'mouseout'
            });
        });
        --></script>
        
        <style type="text/css"><!--            /* CSSでツールチップ */
            /* ツールチップを隠す */
            #css_tooltip span#css_tooltip_span {
                display:none; padding:2px 3px; margin-left:8px; width:130px;
            }
            /* マウスオーバーで表示する */
            #css_tooltip:hover span#css_tooltip_span{
                display:inline; position:absolute;
                background:lightgreen;
                border:1px solid #000000;
                color:red;
                text-decoration:none;
            }
        --></style>
        
    </head>
    <body>
        
        <a href="#" id="css_tooltip">
            CSSでツールチップ
            <span id="css_tooltip_span">CSSで吹き出し</span>
        </a>
        <br />
        <a href="#" id="qtip_tooltip">
            qTipでツールチップ
        </a>
        
    </body>
</html>


実際の動作はこのようになります(マウスオーバーで動作)

CSSでツールチップ CSSで吹き出し
qTipでツールチップ

この程度ならCSSでもqTipでもたいして変わらないですね。
qTipが便利なのは、ポップアップする場所やタイミングといった内容をHTMLに直接書くこと無しに、jQueryのセレクタやイベントを使って書けるということでしょう。
マウスオーバー時だけではなく、クリック時やオンロード時といった好きなタイミングで自由なポップアップを行うことができます。
セレクタもIDさえあればonclickみたいなロジックを書く必要も無く、HTMLからロジックを完全に排除して書くことができるようになります。
 

 

PR


2009/06/22 15:11 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<PHP1-82:出力バッファリングのちょっとだけ便利な使い方 | HOME | Smarty-02 修正子>>
忍者ブログ[PR]