clueTip简单实用的信息提示框

来源:https://www.sucaihuo.com/js/143.html 2015-06-05 06:59浏览(790) 收藏

本文将演示6中不同的提示框效果。cluetip提示框里的内容可以是HTML,也可以是ajax加载的的页面,并且clueTip还提供了丰富的API。
clueTip简单实用的信息提示框
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

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');; 
});
参数 描述 默认值
width 提示窗口的宽度 275
height 提示窗口的高度 auto
positionBy 设置提示窗口的位置:'auto', 'mouse','bottomTop', 'fixed' auto
topOffset 窗口相对(上)位移量 15
leftOffset 窗口相对(左)位移量 15
local 是否使用同一页面的内容,可以是页面中的一个DIV,这时应该设置rel= false
attribute 用来承接窗口内容的属性 rel
titleAttribute 窗口标题属性 title
splitTitle 设置内容分隔符 -
showTitle 是否显示标题 true
cluetipClass 窗口的样式,样式的名称格式为.cluetip-cluetipClass default
waitImage 是否显示内容载入前的等待loading图片。 true
sticky 是否当手工单击关闭时才关闭窗口 false
closePosition 设置关闭按钮的位置:'top' or 'bottom' or 'title' top
closeText 关闭按钮显示的内容,可以是文本,也可以是html图片 Close
标签: 提示clueTip
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2