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

  • 相关阅读:
    机器学习: 基于MRF和CNN的图像合成
    概率论经典问题 —— 三个事件 A、B、C 独立 ≠ 三个事件两两独立
    概率论经典问题 —— 三个事件 A、B、C 独立 ≠ 三个事件两两独立
    中国文化史
    中国文化史
    详解第一个CUDA程序kernel.cu
    【读书笔记】 —— 历史篇
    【读书笔记】 —— 历史篇
    美国政府、部门构成及其运作
    实时抢占补丁概观(待续)
  • 原文地址:https://www.cnblogs.com/deerchao/p/1133036.html
Copyright © 2011-2022 走看看