zoukankan      html  css  js  c++  java
  • 简单的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

  • 相关阅读:
    Python数据类型之数值-Python基础前传(5)
    R语言之数据可视化
    R语言之数据可视化
    R语言基础
    R语言基础
    R语言基础
    R语言入门
    R语言入门
    用 python 爬取 gutenberg 上的英文科幻小说
    Python 在数据科学中的应用
  • 原文地址:https://www.cnblogs.com/deerchao/p/1133036.html
Copyright © 2011-2022 走看看