`
alfredgao
  • 浏览: 137952 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

基于Ext实现的信息提示组件

阅读更多

这个组件其实很简单,以前有纯js写过,不过当时做的比较简单,只是一个显示然后是自动渐隐消失,这次用Ext实现了一下,代码有了些减少,而且功能上也改善了一点,增加“标题设置”和“关闭按钮”的功能。

功能简介:
1、自定义显示内容和显示标题。
2、可配置消失时间,如n秒后自动渐隐消失,或者永远不消失(通过关闭按钮关闭)。
3、可配置显示位置:支持绝对定位像素设定、百分比设定,及top,left,right,bottom四个特殊位置参数的设定。
4、通过四个特殊位置参数设定后当页面滚动时永远保持在浏览器的特定位置,如top,left不不论如何滚动滚动条都会悬浮在左上角。
5、支持自定义外观,完全的样式与实现分离。

使用简介:
函数:showTip(message,x,y,delay,title)
必选参数message:消息内容
可选参数x/y 显示消息框的坐标,默认为左上角,参数x可配置为数字、left和right或百分比,y可配置为数字、top或bottom或百分比。
可选参数delay:延迟多长时间消失,-1为永不消失,单位为秒
可选参数title:设定pop提示的标题,如果不设定则不显示标题

function showTip(message, x, y, delay, title) {
        if(!message) return;
        // 只允许百分数或数值参数
        x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";
        y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";
        delay=parseInt(delay) || -1;
        var fdDiv=Ext.get('show_feedBack');
        if(!fdDiv){
            fdDiv=Ext.DomHelper.append(document.body,{
                tag:'div',
                id:'show_feedBack',
                style:'z-index:10000;width:0;filter:alpha(opacity=100);position:absolute;'
            }, true);
            Ext.DomHelper.append('show_feedBack',{
                tag:'div',
                id:'show_feedBack_message',
                style:'white-space:nowrap'
            }, true);
            var sfm=Ext.DomHelper.append('show_feedBack',{
                tag:'div',
                id:'show_feedBack_menubar',
                children:[{
                    tag:'div',
                    id:'show_feedBack_title'
                },{
                    tag:'img',
                    src:Ext.BLANK_IMAGE_URL,
                    id:'show_feedBack_closeImg',
                    title:'关闭'
                }]
            }, true);
            Ext.get('show_feedBack_closeImg').on('click',function(){
                fdDiv.setDisplayed(false)
            });
        }
        Ext.getDom('show_feedBack_title').innerHTML=title||'';

        var fdDivContent=fdDiv.first('div'); // 内容域
        fdDiv.stopFx();
        fdDiv.setLeftTop(0,0);
        fdDivContent.dom.innerHTML='';
        fdDivContent.insertHtml('afterBegin', message);
        fdDiv.setDisplayed(true);
        Ext.get('show_feedBack_menubar').setWidth(fdDivContent.getWidth());

        var x1=x, y1=y;
        function calPos(){ // 如果是left/top/right/bottom参数则计算位置
            var doc=Ext.getBody().getViewSize();
            var scroll=Ext.getBody().getScroll();
            if (/left|right/.test(x1)) {
                x=(x1=="left")?0:(doc.width-fdDiv.getWidth());
                x=x+scroll.left;
            }
            if (/top|bottom/.test(y1)) {
                y=(y1 == "top")?0:(doc.height-fdDiv.getHeight());
                y=y+scroll.top;
            }
            fdDiv.setLeftTop(x, y);
        };
        try{
            clearInterval(tui.showTip.repos)
        } catch (e) {}
        if(/left|right/.test(x1)||/top|bottom/.test(y1)) {
            tui.showTip.repos=setInterval(calPos, 1); // 每隔0.1秒定位一次层
        }else{ // 数值或百分比
            fdDiv.setLeftTop(x, y)
        }
        fdDiv.setOpacity(1);

        // 渐隐效果
        if (delay!=-1) {
            fdDiv.pause(delay).fadeOut({
                endOpacity:0,
                useDisplay:true,
                duration:3
            });
        }
    }



CSS源码:

评论

相关推荐

    WindowLite 基于EXT的可拖动改变大小的提示窗口 v2.0

    WindowLite是一款基于EXT JavaScript库开发的可拖动和改变大小的提示窗口工具,适用于Web应用程序中的弹出消息或用户交互场景。EXT是一个强大的前端开发框架,它提供了丰富的组件和功能,使得开发者能够构建复杂的、...

    基于ext的div拖动

    总结起来,"基于EXT的div拖动"是通过EXTJS的Draggable组件实现的,而"数据库连接conn"则涉及EXTJS与后端数据库的交互,通常通过Ajax请求或者EXTJS的数据包来完成。这两个知识点都是构建富交互式Web应用的重要组成...

    Ext3.0 实现验证码

    Ext3.0是一种基于JavaScript的富因特网应用程序(Rich Internet Application, RIA)开发框架,主要用于构建用户界面。在Web应用中,验证码是防止自动机器人或者恶意软件进行非法操作的重要安全机制。本项目实现了在...

    ext上传组件,可以多文件上传

    EXT上传组件是一款基于Flash技术的前端文件上传工具,它提供了多文件上传的功能,极大地提升了用户在上传文件时的体验和效率。EXT是一个流行的JavaScript库,主要用于构建富客户端应用程序,而EXT上传组件是EXT库的...

    ext实现动态树

    接下来,定义表头模型(`ColumnModel`)以及数据存储器(`Store`),以便在树结构展开时可以展示更多相关信息。 ```javascript var cm = new Ext.grid.ColumnModel([ Ext.grid.RowNumberer, { header: "ID", ...

    ExtJS开发插件及Ext包

    - 对于ExtJS,Spket可以识别和理解ExtJS组件和API,提供实时的代码提示,帮助开发者快速编写代码。 - 还包括模板、调试工具和集成版本控制系统等其他特性,为ExtJS开发提供了一个全面的工作环境。 3. **Ext包管理...

    用Ext实现报表中的核心问题解决方案

    Ext JS是一款基于JavaScript的前端框架,它提供了丰富的UI组件和工具,能够快速搭建功能强大且美观的Web应用界面。在报表设计领域,Ext JS通过其内置的图表组件为开发者提供了灵活多样的图表类型选择,如柱状图、...

    EXT帮助文档(中文EXT3.0 API,中文EXT2.2 API)

    EXT,全称EXT JavaScript Library,是一款基于JavaScript的开源UI组件库,主要用于构建富客户端Web应用程序。EXT库提供了大量的可重用组件,如表格、表单、树形视图、面板、菜单、工具提示等,使得开发者能够创建出...

    ext实现的炫丽的弹框、进度条效果、询问框

    进度条效果在EXTJS中可以通过`Ext.ProgressBar`组件实现。这个组件可以实时展示任务的进度,常用于文件上传或长时间运行的任务。你可以设置进度条的当前值、文本提示和动画效果。例如,`progressBar.updateProgress`...

    基于ext的密码强度检测.

    本文将深入探讨如何使用基于ExtJS的扩展组件(Ext.ux)实现密码强度检测,以及如何通过颜色变化(从红色到绿色)为用户提供直观的反馈。 首先,ExtJS提供了一个强大的组件模型,允许开发者构建复杂的用户界面。"Ext...

    Ext实现验证码的关键代码

    Ext是一个强大的前端开发框架,提供了丰富的UI组件和数据绑定机制,适用于构建复杂的Web应用。 首先,我们需要了解Ext的基本结构。ExtJS基于MVC(Model-View-Controller)设计模式,包括Store(数据存储)、Model...

    upload_Ext实现上传功能

    2. **文件上传组件**:在 ExtJS 中,实现文件上传通常会使用 `Ext.form.Panel` 或 `Ext.form.Basic` 配合 `Ext.form.field.File`(也称为 FileField 或上传字段)。FileField 组件允许用户选择本地文件,并可以通过 ...

    ext.net 1.x DEMO

    EXT.NET 是一个基于 .NET 平台的 Web 开发框架,它提供了一套丰富的用户界面组件,使得开发者可以构建出交互性强、性能优秀的网页应用。EXT.NET 1.x 版本是早期的一个稳定版本,包含了多种基础和高级的组件,支持...

    基于Ext2的日历控件和IP地址输入控件

    总的来说,基于EXT2的日历控件和IP地址输入控件的实现涉及EXTJS的基础组件、事件处理、数据绑定和用户交互设计等多个方面,是前端开发中的一种常见实践。通过学习和掌握这些技术,开发者可以更有效地构建功能丰富、...

    Ext 中文帮助文档

    15. **工具提示和提示框**:提供动态显示额外信息的组件,如鼠标悬停时显示的工具提示,以及模态提示框。 通过"Ext 中文帮助文档",开发者可以详细了解到上述各个知识点,并结合实际案例学习如何使用和配置这些组件...

    EXT_JS实例,官方实例

    EXT JS 3.2.1是一个稳定且广泛使用的版本,包含了各种功能和改进,包括表格、树形视图、网格、表单、菜单、工具提示、窗口和其他UI组件的实现。 1. **EXT JS组件**:EXT JS提供了一系列组件,如按钮(Button)、...

    基于Ext2的日历控件和IP地址输入控件.zip

    总的来说,"基于Ext2的日历控件和IP地址输入控件"是利用JavaScript和HTML5技术提升Web应用用户体验的例子,通过定制的UI组件,可以更高效、准确地处理日期选择和IP地址输入。这些控件的实现涉及到前端开发中的事件...

    YUI-EXT使用详解

    6. **工具提示(Tooltips)**:YUI-EXT还提供了强大的工具提示功能,允许自定义内容、样式和行为,使用户能够获取更多关于界面上元素的信息。 7. **可扩展性(Extensibility)**:YUI-EXT的组件和类系统设计得非常...

    Ext 2 中文API Documentation

    6. **工具提示(Tooltips)**:EXT提供了一种自定义的工具提示功能,可以为任何元素添加动态显示的信息。API文档会指导开发者如何创建和配置这些提示。 7. **拖放(Drag and Drop)**:EXT支持拖放操作,使得用户...

    ext相关工具包

    EXT是一个流行的JavaScript...总的来说,这个"ext相关工具包"是构建基于EXT的Web应用的基础,包含了运行EXT应用所需的所有关键文件。通过合理使用这些文件,开发者可以创建出具有专业级用户体验的JavaScript应用程序。

Global site tag (gtag.js) - Google Analytics