• [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示


    作者:李盼(Lipan)
    出处:[Lipan]http://www.cnblogs.com/lipan/
    版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。

    本篇介绍提示控件,ExtJs支持两种方式定义提示,可以支持普通html元素和一般的ExtJs UI控件。

    一、基本提示 Ext.tip.ToolTip

    1.最简单的提示

    下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:

    [html]

    <div id="tip1" class="TipDiv">普通提示</div>
    

    接着在js中添加如下代码:

    [Js]

        Ext.create('Ext.tip.ToolTip', {
            target: 'tip1',
            html: '最简单的提示'
        });
    

    OK,第一个提示已经添加成功,我们来预览一下效果:

    2.可关闭的提示

    [html]

    <div id="tip2" class="TipDiv">不自动隐藏</div>
    


    [Js]

        Ext.create('Ext.tip.ToolTip', {
            target: 'tip2',
            html: '请点击关闭按钮',
            title: '标题',
            autoHide: false,
            closable: true,
            draggable: true             //可以允许被拖动
        });
    

    效果如下,鼠标移移出后提示不消失,单击叉即可关闭:

    3.Ajax提示,提示的内容来自服务端

    [html]

    <div id="tip3" class="TipDiv"> Ajax提示</div> 
    


    [Js]

        Ext.create('Ext.tip.ToolTip', {
            target: 'tip3',
             200,
            autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} },
            dismissDelay: 15000         //15秒后自动隐藏
        });
    

    在服务端通过MVC控制层action来返回提示内容,代码如下:

    [c#]

            public ContentResult AjaxTipData(string data)
            {
                return Content("<font color='red'>这是Ajax提示信息:</font><br>客户端参数:" + data);
            }
    

    效果:

    4.提示跟随鼠标移动

    [html]

    <div id="tip4" class="TipDiv">跟随鼠标</div>
    


    [Js]

        Ext.create('Ext.tip.ToolTip', {
            target: 'tip4',
            html: '跟随鼠标的提示',
            trackMouse: true            //  跟随鼠标移动
        });
    

    效果:

    5.带箭头的提示

    [html]

    <div id="tip6" class="TipDiv">指定提示方向</div>
    


    [Js]

        Ext.create('Ext.tip.ToolTip', {
            target: 'tip6',
            anchor: 'buttom',           //指定箭头的指向 top,left,right
             120,
            anchorOffset: 50,           //指定箭头的位置
            html: '带箭头的提示,并指定方向'
        });
    

    效果:

    5.图文并茂的提示内容

    在提示内容中可以加入图片,超链接等以及如何html元素,还可以自定义提示标题:

    [html]

    <div id="tip7" class="TipDiv"> 高级自定义</div>
        <div style="display:none;">
            <div id="tipContent">
                <ul>
                    <li>提示项1</li>
                    <li>提示项2</li>
                    <li>提示项3</li>
                    <li>提示项4</li>
                </ul>
                <img src="http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" />
            </div>
        </div>
    


    [Js]

        Ext.create('Ext.tip.ToolTip', {
            title: '<a href="#">链接式标题</a>',
            id: 'toolTip7',
            target: 'tip7',
            anchor: 'left',
            html: null,
             415,
            autoHide: false,
            closable: true,
            contentEl: 'tipContent',    //用id为tipContent的html标签内容作为提示信息
            listeners: {
                'render': function () {
                    this.header.on('click', function (e) {
                        e.stopEvent();
                        Ext.Msg.alert('提示', '标题被点击.');
                        Ext.getCmp('toolTip7').hide();
                    }, this, { delegate: 'a' });
                }
            }
        });
    

    效果:

    二、快速提示 Ext.tip.QuickTip

    快速提示通过在html上添加特定的属性就可以体现出来,比较方便,只需要在代码里面通过如下方式初始化:

    [Js]

    Ext.QuickTips.init();
    

    下面看看使用方式:

    [html]

    <div id="tip5" class="TipDiv" data-qtip="用HTML属性表示的提示" data-qtitle="标题"> 快速提示</div> 
    <div id="tip52" class="TipDiv" data-qtip="设置了宽度、位置的快速提示" data-qwidth="400" data-qalign="tl-br"> 快速提示2</div> 
    


    data-qtip:设置提示正文内容。
    data-qtitle:设置提示的标题。
    data-q设置提示的宽度。
    data-qalign:表示用提示的一个基准点,对应到原件的哪个基准点。例如:tl-br表示用提示的左上角,对应到原件的右下角。

    效果展示:

    三、在extjs控件上使用提示

    1.按钮上的快速提示

    首先也要运行如下代码:

    [Js]

     Ext.QuickTips.init();
    

    这样按钮配置项就可以使用“tooltip”了:

    [Js]

        Ext.create("Ext.Button", {
            renderTo: Ext.get("tipdiv"),
            text: "按钮上的快速提示",
            tooltip: "提示信息"
        });
    

    效果展示:

    2.按钮上的自定义提示

    [Js]

        //按钮上的自定义提示
        Ext.create("Ext.Button", {
            renderTo: Ext.get("tipdiv"),
            text: "按钮上的自定义提示",
            id: "bt1"
        });
        Ext.create('Ext.tip.ToolTip', {
            target: 'bt1',
            anchor: 'buttom',
             120,
            anchorOffset: 50,
            html: '按钮上的自定义提示信息'
        });
    

    效果展示:

  • 相关阅读:
    ASP.net注意点小结
    AJAX笔记
    为Dreamweaver写的扩展—jQuery自动提示.
    Cisco PIX防火墙配置上
    Cisco PIX防火墙配置下
    基于DNS的负载均衡
    c#使用文本框TextBox使用ctr+enter直接跳到指定Button
    Google marker
    C#中的关键字详解
    android中,锁屏之后是不是会关掉部分服务?怎么让我的服务不被关掉?
  • 原文地址:https://www.cnblogs.com/BTMaster/p/3728125.html
Copyright © 2020-2023  润新知