头像

clueTip简单实用的信息提示框

来源:http://www.erdangjiade.com/ 二当家的 2015-06-05 06:59浏览(1372)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

clueTip简单实用的信息提示框
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源: 100

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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');; 
});
参数 描述 默认值
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
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/143.html
评论0
头像

友情提示:垃圾评论一律封号...

1 2