当前位置:首页 > jQuery技术文章 > jQuery关键词说明插件cluetip使用指南

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

  • 发布时间:
  • 作者:码农之家原创
  • 点击:113

这篇文章主要知识点是关于jquery、cluetip、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

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

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

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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.cluetip.js"></script>

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="cross.png" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
  
});

4.用到的html

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

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.205389

使用jquery.upload.js实现异步上传示例代码

相关资源下载:upload 1:jsp代码: 导入jquery.upload.js和jquery-1.7.2.js 添加调用js的代码:a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()"上传/a 在底部写: iframe src="%=basePath%/resources/upload/upload.htm"//iframe 2:js代码: /*文件上传*/function doUpload() {// 上传方法$.upload({// 上传地址url:window.basePath+'/reply/imageUpload', // 文件域名字fileName: 'uploadfile', // 其他表单数据params: {},// 上传完成后, 返回json, textdataType: 'json',// 上传之前回调,return true表示可继续上传onSend: function() {return true;},onSubmit: function(){},// 上传之后回调onComplate: function(data) {if(data.msg){}else{alert("上传图片出错!");}}});} 3:后台代码: /*** 图片上传本地服务器* @param request* @param response* @return*/@RequestMapping(value="imageUpload")@ResponseBodypublic Object imageUpload(HttpServletRequest request,HttpServletResponse response){MapString, Object map=new……

网友NO.780949

使用jQuery动态加载js脚本文件的方法

它们很强大,但有时候也会得不偿失。如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法。下面就介绍一下如何使用它! 一、jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样: jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) { /* 做一些加载完成后需要执行的事情 */ }); 这个getScript方法返回一个jqxhr,你可以像下面这样用它: jQuery.getScript("/path/to/myscript.js") .done(function() { /* 耶,没有问题,这里可以干点什么 */ }) .fail(function() { /* 靠,马上执行挽救操作 */ }); 最常见的使用jQuery.getScript的地方是延迟加载一个js插件,而且在加载完成时执行它:……

网友NO.338827

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用。 屁话不多放,无码无真相! /******************************* * @name Layer跨浏览器兼容插件 v1.0 *******************************/ ;(function($){ $.fn.layer = function(){ var isIE = (document.all) ? true : false; var isIE6 = isIE !window.XMLHttpRequest; var position = !isIE6 ? "fixed" : "absolute"; var containerBox = jQuery(this); containerBox.css({"z-index":"9999","display":"block","position":position ,"top":"50%","left":"50%","margin-top": -(containerBox.height()/2)+ "px","margin-left": -(containerBox.width()/2) + "px"}); var layer=jQuery("div/div"); lay……

网友NO.107672

3分钟写出来的Jquery版checkbox全选反选功能

//反选 function selectnoALL() { $("input:checkbox").each(function (i) { if (this.checked) { this.checked = false; } else { this.checked = true; } }); } //全选 function selectALL() { var chelength = $("input:checkbox").length; $("input:checkbox").each(function (i) { if (i chelength - 2) { this.checked = true; } }); } 3分钟写出来的 估计很多bug……

网友NO.442577

jQuery使用之设置元素样式用法实例

本文实例讲述了jQuery使用之设置元素样式用法。分享给大家供大家参考。具体分析如下: css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法。前面文章中有使用过 addClass()为元素添加css样式风格。这里主要介绍jQuery如何设置页面的样式风格。包括添加、删除、动态切换等。 1. 添加、删除css类别。 复制代码 代码如下: $(function() { //同时添加多个CSS类别 $("img").addClass("css1 css2"); }); 如以上代码对img元素添加了css1和 css2两个样式 removeClass与addClass方法相对应,这里不再重复例举。 2.在类别间动态切换。 很多时候根据用户的操作状态,希望某些元素的样式风格在某个类别之间切换,时而addClass()类别,时而removeClass()类别,Jq提供了一个直接的toggleClass(name)来进行类似的操作。 复制代码 代码如下: $(function() { $("p").click(function() { $(this).toggleClass(……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757