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!

  • 相关阅读:
    BiLiBiLi爬虫
    12-UE4-控件类型
    11-UE4-UMG UI设计器
    10-UE4-蓝图定义简介
    UE4-目录结构简介
    UE4-字符串
    UE4-基类
    Redis-事物
    Redis的主从配置
    Redis持久化-AOF
  • 原文地址:https://www.cnblogs.com/seasons1987/p/2795698.html
Copyright © 2011-2022 走看看