基于Jquery的文本提示控件 poshytip

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！

posted @ 2017-07-19 14:47  ConfidentLiu  阅读(281)  评论(0)  编辑  收藏  举报