clueTip的应用
来源:互联网 发布:尤克里里入门软件 编辑:程序博客网 时间:2024/05/23 02:28
clueTip是一款非常不错的,基于jQuery的信息提示插件。当鼠标滑向链接或者页面中的元素,会出现一个漂亮的提示框。提示框里的内容可以是本页面上的,也可以是通过ajax加载的的页面,clueTip还提供了许多可配置的参数,用户可以根据实际情况定制不同的效果和样式。
clueTip有以下特性:
使用非常简单;
可定制,提供大量参数可配置;
提示窗口根据页面大小可以自动调整位置;
可以ajax加载页面内容
跨浏览器兼容,兼容IE6+,Firefox,Safria,Opera等主流浏览器。
XHTML
clueTip有两种展示提示窗口的方法,分为通过“rel”属性ajax加载远程页面内容和通过“title”属性(默认设置)加载页面内容。
1、通过title属性加载内容
<a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">鼠标滑向看看效果</a>
2、通过rel属性加载远程页面内容
<a class="basic" href="ajax.php" rel="ajax.php" title="加载AJAX页面">Ajax加载PHP页面</a>
Javascript和样式
在<head>之间加入jquery和clueTip插件以及样式clueTip.css。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cluetip.js"></script>
<script type="text/javascript">
$(function(){
$('a.title').cluetip({splitTitle: '|'});
$('a.basic').cluetip();
});
</script>
<link rel="stylesheet" type="text/css" href="cluetip.css" />
clueTip插件常用参数一览表
参数描述默认值width提示窗口的宽度275height提示窗口的高度'auto'positionBy设置提示窗口的位置:'auto', 'mouse','bottomTop', 'fixed''auto'topOffset窗口相对(上)位移量15leftOffset窗口相对(左)位移量15local是否使用同一页面的内容,可以是页面中的一个DIV,这时应该设置rel="#ID"falseattribute用来承接窗口内容的属性reltitleAttribute窗口标题属性titlesplitTitle设置内容分隔符''showTitle是否显示标题truecluetipClass窗口的样式,样式的名称格式为.cluetip-cluetipClassdefaultwaitImage是否显示内容载入前的等待loading图片。truesticky是否当手工单击关闭时才关闭窗口falseclosePosition设置关闭按钮的位置:'top' or 'bottom' or 'title''topcloseText关闭按钮显示的内容,可以是文本,也可以是html图片'Close'更多参数设置请到官方网站查看:http://plugins.learningjquery.com/cluetip/
cluptip在用户点击了链接后,页面不会转向href地址,而是一点反应都没有,那怎么解决点了链接后直接转向该链接的页面呢?解决办法有:绑定a标签的click事件,代码如下:
$('a.basic).bind('click',function(){
window.location.href=$(this).attr('href');;
});
转载:http://www.helloweba.com/view-search-55.html
- clueTip的应用
- jquery信息提示框——clueTip的应用
- Jquery 的clueTip插件使用
- ClueTip---精美的信息提示框(页)
- 介绍一个不错的jquery插件-cluetip
- jquery Tooltips插件cluetip
- ClueTip : jQuery 多样式链接提示框组件
- pivot 的应用,有图有应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- Servlet应用---HttpServletRequest的应用
- AndroidMenu的应用之OptionMenu的应用
- 模型的应用 && Xib &&代理模式的应用【应用管理】
- 工作流的应用之shark+jawe应用
- Android 用户界面开发
- nyoj-180-挑剔的小杜
- Android下基于Http协议的网络摄像机开发
- 浙江大学PAT上机题解析之1001.害死人不偿命的(3n+1)猜想 (15)
- BufferedInputStream原理
- clueTip的应用
- ubuntu opengl 开发
- java读取properties文档
- Objective-C中的异常
- 论坛中偶遇对udp的讨论贴,感觉很好,保持地址
- Wikioi 天梯 排序(1076)
- 【树形DP】 POJ 3345 Bribing FIPA
- 循环拼装String字符串去掉最后一个字符的方法
- linux 通信