clueTip简单实用的信息提示框

收藏

本文将演示6中不同的提示框效果。cluetip提示框里的内容可以是HTML，也可以是ajax加载的的页面，并且clueTip还提供了丰富的API。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 108 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="example">
    <h3>1、基本设置</h3>
    <p><a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">鼠标滑向看看效果</a></p>
    <p>Below are quite a few <a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">examples</a> of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();.</p>
</div>
<div class="example">
    <h4>2、Ajax加载页面</h4>
    <p><a class="basic" href="ajax.html" rel="ajax.html" title="加载AJAX页面">Ajax加载页面</a></p>
</div>

<div class="example">
    <h4>3、定制窗口宽度和隐藏标题栏: </h4>
    <p>This tip has a custom width of 200px. The clueTip title bar (heading) is hidden. <a class="custom-width" href="ajax.php?id=3" rel="ajax.php?id=3">Try me!</a></p>
</div>
<div class="example">
    <h4>4、需要手工关闭的窗口</h4>
    <p>his sticky clueTip has its "close" text in the title bar. It won't close until you close it, or until you hover over another clue-tipped link. It also displays an arrow on one of its sides, pointing to the invoking element. <a id="sticky" href="ajax.php?id=4" rel="ajax.php?id=4" title="点击右上角的关闭按钮才能关闭窗口">sticky clueTip with arrows</a></p>
</div>
<div class="example">
    <h4>5、无链接、自定义鼠标滑上去的样式</h4>
    <h5 title="Fancy Title!" id="ajax3.htm">Hover over me</h5>
</div>
<div class="example">
    <h4>6、加载本地内容</h4>
    <p><a class="load-local" href="#loadme" rel="#loadme">Hello</a></p>
    <div id="loadme" style="display:none">
        Hello! it's me.
    </div>
</div>

jQuery

$(function() {
    $('a.title').cluetip({
        splitTitle: '|'
    });
    $('a.basic').cluetip({
        width: '420px'
    });
    $('a.custom-width').cluetip({
        width: '200px',
        showTitle: false
    });
    $('#sticky').cluetip({
        sticky: true,
        closePosition: 'title',
        arrows: true
    });
    $('h5').cluetip({
        attribute: 'id',
        hoverClass: 'highlight'
    });
    $('a.load-local').cluetip({
        local: true,
        cursor: 'pointer'
    });
});

cluptip在用户点击了链接后，页面不会转向href地址，而是一点反应都没有，那怎么解决点了链接后直接转向该链接的页面呢？解决办法有：绑定a标签的click事件,代码如下：

$('a.basic).bind('click',function(){ 
    window.location.href=$(this).attr('href');; 
});