zoukankan      html  css  js  c++  java
  • 基于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!

  • 相关阅读:
    做题记录
    关于有向图强连通分量的一点想法
    浅谈二分图匹配(未完)
    水题狂欢赛 (爬楼梯赛)题解(偏向自我反省)
    浅谈迭代加深(iddfs)
    浅谈单调队列优化
    [cqbzoj#10644]鱼肉炸弹题解
    树形背包[2/ 50] luogu [P1273]
    树形背包[1/ 50] luogu [P2015] (超级板)
    (树状数组)区间修改,区间查询
  • 原文地址:https://www.cnblogs.com/ConfidentLiu/p/7205746.html
Copyright © 2011-2022 走看看