加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

jQuery插件cluetip行使先容与下载

发布时间:2018-08-17 16:07:11 所属栏目:业界 来源:站长网
导读:偶然,要实现对付一篇文章的要害词部门的提醒,想实现的结果好比是,当鼠标移动到这个要害词时,弹出相干的一段笔墨或图片的先容,这个可以 用jquery的一个插件cluetip, 地点下载是:http://plugins.learningjquery.com/cluetip/demo/ 下面简朴讲授下用法: 1 首
偶然,要实现对付一篇文章的要害词部门的提醒,想实现的结果好比是,当鼠标移动到这个要害词时,弹出相干的一段笔墨或图片的先容,这个可以

用jquery的一个插件cluetip,

地点下载是:http://plugins.learningjquery.com/cluetip/demo/

下面简朴讲授下用法:

1 起首虽然要放JQUERY的根基JS,和这个插件的JS了,如:

<a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter.....

$('a.title').cluetip({splitTitle: '|'});

这样就会在该毗连被点时,弹出一个框,问题是this is the title,内容是|号后头的内容了

2 也可以弹出的内容是个毗连,好比
<a class="basic" href="ajax.htm" rel="ajax.htm">

$('a.basic').cluetip();

3 界说弹出框的高度巨细等:

<a class="custom-width" href="ajax3.htm" rel="ajax3.htm">

$('a.custom-width').cluetip({width: '200px', showTitle: false});

4 当鼠标移动到某毗连时弹出:

<h4 title="Fancy Title!" id="ajax3.htm">Hover over me</h4>

$('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});

5 当用户主动点这个毗连时,才弹出提醒
<a href="ajaxclick.htm" rel="ajax5.htm" title="active ingredients">

$('#clickme').cluetip({activation: 'click', width: 650});

6 圆角的
<a href="ajax4.htm" title="|first line body|second line body">

$('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showTitle: false});

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读