zoukankan      html  css  js  c++  java
  • Ext.ToolTip和Ext.QuickTips

    ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。

    QuickTips代码示例:只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过:

    <input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">

    我们可以看到下面的效果:

    Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

    你也可以自定义这些QuickTips的属性:

    Ext.apply(Ext.QuickTips.getQuickTip(), {

        //maxWidth: 200,

        //minWidth: 100,

        //showDelay: 50,

        //trackMouse: true,

        //hideDelay: true,

      

        //closable: true,

        //autoHide: false,

        //draggable: true,

        dismissDelay: 0

    });

    Ext.ToolTip代码:

     new Ext.ToolTip({

            target: 'tip1',

            html: 'test tooltip'

        });

    在html页面中加入:<a id=tip1 href="">11</a> 就可以看到下面的效果:

    Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

    可以通过ToolTip设置图层自动ajax加载页面,代码:

    new Ext.ToolTip({

         target: 'ajax-tip',

         200,

         autoLoad: {url: 'test/1.jsp'},

     });

    在html页面中加入:<a id=ajax-tip href="">ajaxtip</a>  就可以看到下面的效果:

    Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

    打开的层可以关闭,代码:

    new Ext.ToolTip({

            target: 'close-tip',

            html: 'test close',

            title: 'test',

            autoHide: false,

            closable: true,

            draggable:true

        });

    在html页面中加入:<a id='close-tip href="">'closetip</a>  就可以看到下面的效果:

    Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

    打开的层随鼠标移动,代码:

     new Ext.ToolTip({

            target: 'track-tip',

            title: 'Mouse Track',

            200,

            html: 'This tip will follow the mouse while it is over the element',

            trackMouse:true,

            dismissDelay: 15000

        });

    在html页面中加入:<a id=track-tip href="">tracktip</a>  就可以看到下面的效果:

     Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

  • 相关阅读:
    javascript学习_函数调用模式与this取值
    Git 学习笔记(Git教程-廖雪峰)
    Linux学习一周初体验
    前言_写在立冬时
    2021.10.24驾考日记
    大二上学期的HTML杂碎
    AISing Programming Contest 2021(AtCoder Beginner Contest 202)D题题解
    并查集两优化——按秩合并与路径压缩
    [算法板子] 求拓扑序列(拓扑排序)
    浅谈迭代加深搜索 ( IDDFS )
  • 原文地址:https://www.cnblogs.com/scwyh/p/2045222.html
Copyright © 2011-2022 走看看