• [转载]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: '按钮上的自定义提示信息'
        });
    

    效果展示:

  • 相关阅读:
    The Mac Application Environment 不及格的程序员
    Xcode Plugin: Change Code In Running App Without Restart 不及格的程序员
    The property delegate of CALayer cause Crash. 不及格的程序员
    nil localizedTitle in SKProduct 不及格的程序员
    InApp Purchase 不及格的程序员
    Safari Web Content Guide 不及格的程序员
    在Mac OS X Lion 安装 XCode 3.2 不及格的程序员
    illustrate ARC with graphs 不及格的程序员
    Viewing iPhoneOptimized PNGs 不及格的程序员
    What is the dSYM? 不及格的程序员
  • 原文地址:https://www.cnblogs.com/BTMaster/p/3728125.html
Copyright © 2020-2023  润新知