基于Jquery的文本提示控件 poshytip
2024-09-04 02:37:05
Html中,如设置了title的属性,则当鼠标在该对象上面短暂的停留时,会显示预设的文本提示,但,这些效果只会短暂的显示,一会就会消失,又要重新把鼠标移出再移回来才被显示,样式也无法重写,实在是恼人之极。可喜的是,咱IT界人才辈出,这不,有一个专门针对这提示框的控件出现了,我用了一阵子,效果还可以,于是赶紧记下来,怕以后不用忘记了,下面是一张效果图:
图一、poshytip控件效果
那怎么用呢,很简单:
第一、把poshytip控件下载到项目中,并引入到需要调用的页面,图二为我的js与poshytip的文件结构:
图二、文件结构
第二、下面为需要引入poshytip的文件关键代码:
<head id="Head1" runat="server">
<link rel="stylesheet" href="poshytip-1.1/tip-yellow/tip-yellow.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="poshytip-1.1/jquery.poshytip.js"></script>
<script type="text/javascript">
$(function () {
$(".poshytip").poshytip({
showTimeout: 300, //超时时间设为300时效果个人认为最佳,当然,可根据个人喜好设定
bgImageFrameSize: 20,
allowTipHover: false,
fade: false,
slide: false
});
}); </script>
</head>
说明一下:那个css文件就是poshytip的显示效果,有几个的,可以在刚才下载的包那里找,引入不同的css可以改变其显示效果,这里我就不墨迹了。还有,poshytip是基于jquery的,jquery.js也是必须的。而$(".poshytip")则代表需要调用这个效果的那些class,记得要带title,只要有了title属性,那么这个poshytip会自动调用。
好了,暂时就这么多了,enjoy it!
最新文章
- 理解CSS视觉格式化
- jvm系列(五):tomcat性能调优和性能监控(visualvm)
- silverlight制作虚线的边框
- Python之路【第十五篇】:Web框架
- CentOS 7.2 安装配置 Percona Server
- log4net资料收集
- HTML设置超链接字体颜色和点击后的字体颜色
- CSS中的各个选择节点,都有样式最后一个无样式的快捷解决方法
- 大神是如何玩C语言的!
- [搜片神器]使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)
- devfs,proc,udev
- ios开发——实用技术OC篇&;地图与定位
- 矩形类定义【C++】
- Android文本Flood it游戏源代码
- C#(.Net)知识点记录
- Matlab: 白噪声与曲线拟合
- 通过ALM OTA API获取test case的信息,并上传测试结果到test set中
- Spark 基本概念
- html5 css多列布局
- SQL NOLOCK大杂烩