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

  • 相关阅读:
    java 的 线程池应用和实践
    拦截信息短信息并转发到指定手机
    分享 UC优视 的android程序员面试题
    解释通讯协议中的xml
    设计模式工厂模式
    MongoDB基础教程系列第一篇 进入MongoDB世界
    Docx组件读写Word文档介绍
    [转]Oracle数据库逻辑增量备份之exp/imp
    JSON文件读取
    JAVA综合--如何掌握JDK1.5枚举类型[转]
  • 原文地址:https://www.cnblogs.com/deerchao/p/1133036.html
Copyright © 2011-2022 走看看