【翻译】jQuery之qTip插件

kanglecjr

浏览: 516600 次
性别:
来自: 北京

最近访客更多访客>>

briefyf

-tl-

malinhuan123

mygod_cx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery prototype

查找 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>