我们开发的网站,总有它一定的用途。如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验。既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容)。例如企业站的关键词大部分是企业名称或产品名称,技术站的关键词大部分是技术术语。不论是企业宣传产品或分享思路经验,我们都想给某些术语加上说明或链接(跳转到术语页面),这时我们就可以使用cluetip插件。

1.     cluetip插件功能

jQuery关键词说明插件cluetip使用指南 

主要用于为某些关键词添加提示说明功能,也可以展示广告。cluetip插件可以读取另一个html文件中的内容,

<a class="custom-width" href="ajax3.html" rel="ajax3.html">关键词</a>

会读取ajax3.html页面的内容

官方地址demo中有使用说明。

2.cluetip官方地址

https://github.com/kswedberg/jquery-cluetip

在官方地址上有插件的详细使用说明

最常用的属性为:

splitTitle: '|' 标题和内容的分隔符

sticky: true    是否开启强制关闭 true 为开启。必须点击关闭,才能关闭当前提示

closeText: '图片或文字'  关闭的图片或文字展示,如<img src="/UploadFiles/2021-04-02/cross.png">

closePosition: 'title' 关闭按钮的位置

dropShadow: false  是否添加阴影 true为添加,false为不添加

positionBy: 'mouse'  提示窗体是否按鼠标位置移动。

truncate: 60   截取长度,说明长度过长时,只取前60字

3.cluetip使用方法

1.引用文件

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="/UploadFiles/2021-04-02/jquery.js">

2.定义样式。可以使用官方的样式,也可以自定义。自定义时需修改jquery.cluetip.css文件。如本例所示

body{
  font-size:12px;
  font-family:微软雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

3.使用的js代码

$(function(){
  $('a.javascript').cluetip({splitTitle: '|',width: '200px', showTitle: false});
  $('a.html').cluetip({
      splitTitle: '|',
      sticky: true,
      closeText: '<img src="/UploadFiles/2021-04-02/cross.png">

4.用到的html

<a href='#' title='提示标题|提示内容' class='样式'>关键词</a>

以上所述就是本文的全部内容了,希望大家能够喜欢。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。