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!