zoukankan      html  css  js  c++  java
  • 基于jQuery的Tooltip

    近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见。

    下面开发说明使用方法和内容:

    一、引用jQuery框架,可以到google上下载。

    以下内容供没有接触过jQuery框架参考,jQuery是一个继property框架的一个轻量级的javascript框架,提高了javascript的开发效率和与浏览器的兼容性;想进一步了解jQuery可以到网上搜索一下。

    二、引入Tooltip.js内容 

    ;(function($){

            showTip:function(settings)

            {

                $(this).each(function(){

                    //初始化配置信息

                    var options = jQuery.extend({

                        flagCss:"tip",

                        flagWidth:$(this).outerWidth(),

                        flagInfo:$(this).attr("title"),

                        isAnimate:false

                    },

                    settings);

                    if(!options.flagInfo)

                    {

                        return;

                    }

                    $(this).removeAttr("title");

                    $(this).focus(function(){

                        //设置提示信息最小宽度为163

                        options.flagWidth = (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);

                        var oTip = $("<div class='ui-slider-tooltip  ui-corner-all'></div>");

                        var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");

                        var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class",options.flagCss).css("width",options.flagWidth + "px");

                        //合并提示信息

                        var oToolTip = $(oTip).append(oTipInfo).append(oPointer);

                        //添加淡入效果

                        if(options.isAnimate)

                        {

                            $(oToolTip).fadeIn("slow");

                        }

                        $(this).after(oToolTip);

                       

                        //计算提示信息的top、left和width

                        var position = $(this).position();

                        var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);

                        var oTipLeft = position.left;

                        $(oToolTip).css("top" , oTipTop + "px").css("left" , oTipLeft + "px");

                       

                        $(this).blur(function(){

                            $(oToolTip).remove();

                        });

                    });

                });

                return this;

    }(jQuery);

    三、Tooltip.css内容,此CSS内容是从网上下载

    .ui-slider-tooltip{ /* CSS属性顺序按照 字母首字母 排列*/

        background:#fdf9e5;

        border:1px solid #fd7d2c;

        color:#222222;

        display: block;

        text-align: left;

        padding: 5px 3px 5px 3px;

        position: absolute;

        z-index:99999;

    }

    .ui-corner-all {

        -moz-border-radius-bottomleft:5px;

        -moz-border-radius-bottomright:5px;

        -moz-border-radius-topleft:5px;

        -moz-border-radius-topright:5px;

        -webkit-border-top-left-radius:5px 5px;

        -webkit-border-top-right-radius:5px 5px;

        -webkit-border-bottom-right-radius:5px 5px;

        -webkit-border-bottom-left-radius:5px 5px;

    }

    .ui-tooltip-pointer-down {

        border-bottom- 0;

        border-left: 7px dashed transparent;

        border-right: 7px dashed transparent;

        border-top: 8px solid #fd7d2c;

        bottom: -8px;

        display: block;

        height:0;

        left: 18%;

        margin-left: -7px;

        position: absolute;

        0;

    }

     

    .ui-tooltip-pointer-down-inner {

        border-left: 6px dashed transparent;

        border-right: 6px dashed transparent;

        border-top: 7px solid #fff;

        left: -6px;

        top: -9px;

        position: absolute;

    }

    .tip

    {

        font-size:9pt;

    }

    四、使用方法

    <script type="text/javascript">

            $(document).ready(function(){

                $("#n").showTip();

            });

    </script>

    五.运行效果

    IE运行效果:

    火狐运行效果:

    六、附打包下载

  • 相关阅读:
    ionic localstorage
    angular 中文鏈接
    把jqmobi 變成jQuery 的插件 從此使用jQuery
    jqmobi 的一些設置
    ionic ngcordova map 地圖
    ionic pull to refresh 下拉更新頁面
    json 對象的序列化
    鍵盤彈出,頁面佈局被推上去了.....
    Cordova V3.0.0中config.xml配置文件的iOS Configuration
    android ios 只能輸入數字 不能輸入小數點的 函數 cordova
  • 原文地址:https://www.cnblogs.com/weixing/p/3399294.html
Copyright © 2011-2022 走看看