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!

  • 相关阅读:
    【转】Android中自动连接到指定SSID的Wi-Fi
    【转】多文件目录下makefile文件递归执行编译所有c文件
    Android NDK R9d 安装
    【转】第一个MiniGUI程序:模仿QQ界面
    FFmpeg缩放swscale详解 <转>
    【转】基于Qt, TUIO和TSLIB的嵌入式Linux下的多点触摸设计
    【转】TI-Davinci开发系列之六CCS5.2调试Linux内核
    【转】ffserver用法小结
    【转】Android HAL实例解析
    【转】DM8168图像处理Link
  • 原文地址:https://www.cnblogs.com/ConfidentLiu/p/7205746.html
Copyright © 2011-2022 走看看