【翻译】jQuery之qTip插件

最新推荐文章于 2024-03-09 15:38:57 发布

iteye_19643

最新推荐文章于 2024-03-09 15:38:57 发布

阅读量160

点赞数

分类专栏： JavaScript 文章标签： jQuery prototype ViewUI

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

查找 jQuery Plugin，找到了qTip。
所谓qTip，就是鼠标放到上方时，显示的消息（英文叫做ToolTip）。
代码和执行效果如下。


<script type="text/javascript" src="jQuery-qTip/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery-qTip/jquery.qtip-1.0.0-rc3.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#prototype").qtip({
            content: 'あまり好きではない',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'cream', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
        $("#jquery").qtip({
            content: '気に入ってます',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'green', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
        $("#extjs").qtip({
            content: '気に入ってるが、難しい',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'blue', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
    });

</script>
</head>
<body>
<table border=1>
<tr><td width=120 id="prototype">prototype.js</td></tr>
<tr><td width=120 id="jquery">jQuery</td></tr>
<tr><td width=120 id="extjs">ExtJS</td></tr>
</table>
</body>

[img]http://dl.iteye.com/upload/attachment/390584/92b818a0-3b6a-34f0-a6f6-9fe6639f1629.jpg[/img]

因为有例子程序，也有文档，所以学会了基本的用法。
position是ToolTip的表示位置。
style的tip是ToolTip指着的尖尖的部分的位置。
ToolTip自身再稍微往右下方显示就好了。