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

  • 相关阅读:
    JDK源码之Thread 类分析
    java中符号类型和无符号类型的问题分析
    国内高速Maven仓库
    Idea Live Templates代码模板
    正则表达式
    java内存泄漏
    MySQL查看 InnoDB表中每个索引的高度
    ThreadLocalMap里Entry为何声明为WeakReference?
    Java JDBC中,MySQL字段类型到JAVA类型的转换
    MyBatis查询两个字段,返回Map,一个字段作为key,一个字段作为value的实现
  • 原文地址:https://www.cnblogs.com/deerchao/p/1133036.html
Copyright © 2011-2022 走看看