• 简单的tooltip插件: jQuery.popup


    Document

    requires:
    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.dimensions.pack.js"></script>
    <script type="text/javascript" src="jquery.popup.js"></script>
    ---------------
    example:
    $('<p>some tooltip here.</p>').popup('this is title.', $('#source'), {widht:200}, {close:'timeout'});
    ---------------
    $.fn.popup = function(title, element, location, closeType, classes){...}
    ---------------
    title
    string, title text of popup
    ---------------
    element
    element, the element that popup's position is based on
    ---------------
    location
    width, height
    integer, size of the popup
    space
    integer, space between element and popup
    vertical
    string, one of 'default', 'below', 'above', 'middle'
    horizontal
    string, one of 'left', 'right', 'center', 'default'
    ---------------
    closeType
    close
    string, one of 'timeout', 'mouseout', 'click', 'closeButton'
    delay
    integer, when using 'timeout', how long before hiding
    element
    element, when using 'mouseout', 'click', the event source element
    ---------------
    classes
    popup
    string, class of the whole popup
    title
    string, class of the title
    closeButton
    string, class of the close button
    content
    string, class of tooltip content

    Example

    This is a basic example. Move mouse over this.

    $(function(){
    $('#basic').mouseover(function(){
    $('#tip').popup('',$('#basic'),{},{close:'timeout',delay:1000});
    });
    });

    Another Example

    This is another example. Click here to show/hide the popup.

    $(function(){ 
    $('#ex2').click(function(){
    $('#tip').popup('This is the title.', $('#ex2'), {space:20, vertical:'above', height:50}, {close:'click'});
    });
    });

    Example 3

    This is a third example.span#show

    $(function(){ 
    $('#show').click(function(){
    $('<p>inline popup content.</p>').popup('a title', $('#adv'), {300}, {close: 'closeButton'});
    });
    });

    Download

    Click here to download.

    By: deerchao

  • 相关阅读:
    《C Primer Plus(第6版)中文版》一1.12 复习题
    《C Primer Plus(第6版)中文版》一1.12 复习题
    线程池多线程视频转码(完整版)
    mencoder的x264encopts选项参数略解
    ffmpeg多线程转码
    案例分析:程序媛记一次特殊的“故障”处理
    WINDOWS下CMake+MinGW64搭建C/C++编译环境
    lvs keepalived nginx-rtmp 视频流服务负载均衡系统搭建
    python 利用字典统计次数
    python 16进制 gbk转中文
  • 原文地址:https://www.cnblogs.com/deerchao/p/1133036.html
Copyright © 2020-2023  润新知