zoukankan      html  css  js  c++  java
  • angular组件--tips提示功能

     将组件封装起来在项目中开发很实用,之前遭遇过一次痛苦的经历,那阵子改的要吐血了。常用的组件封装起来,改公共的地方,往往多处受用。

    例如:我在项目中引用  tips.text('加载中。。。',false) ;

    参数设为false时,tips会一直显示,可以在请求成功后,让tips 隐藏了;参数不设置的时候,tips两秒后消失。

    PS:isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none'; }, 2000)); 这句困扰了好久,这是tips一直显示的原因,最后终于明白了,&&方法:当只有前面的为true,后面的才可以执行,并返回后面的值。附上篇觉得写得不错的一篇文章:

    http://wenrunchang123.iteye.com/blog/1749802 

    module.exports = function() {
        angular.module('App').factory('tips', function() {
            var $ = angular.element;
            var ele = angular.element('<div id="tips"></div>')[0];
            var $ele = $(ele);
    
            var style = {
                display: 'none',
                padding: '5px 10px',
                'text-align': 'center',
                position: 'fixed',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                'background-color': 'rgba(0,0,0,.6)',
                color: '#fff',
                'z-index': '9999',
                'border-radius': '5px'
            };
    
            angular.element(ele).css(style);
            document.body.appendChild(ele);
            var timeoutId = null;
    
            return {
                text: function(msg, isHide) {
                    isHide = isHide !== undefined ? isHide : true;
                    ele.style.display = 'inline-block';
                    ele.style.bottom = '50%';
                    ele.innerHTML = msg;
    
                    clearTimeout(timeoutId);
                    isHide && (timeoutId = setTimeout(function() {
                        ele.style.display = 'none';
                    }, 2000));
                },
                hide: function() {
                    ele.style.display = 'none';
                },
                tips: function(options) {
                    if (options.style) {
                        for (var p in options.style) {
                            ele.style[p] = options.style[p];
                        }
                    }
                    ele.style.display = 'inline-block';
                    ele.innerHTML = options.msg;
    
                    clearTimeout(timeoutId);
                    (options.isHide || options.isHide === undefined) && (timeoutId = setTimeout(function() {
                        ele.style.display = 'none';
                    }, options.timeout || 2000));
                }
            }
        });
    };
    努力将自己的温暖带给身边的人!!!!!
  • 相关阅读:
    IE6/IE7浏览器中"float: right"自动换行的解决方法
    IE6/IE7浏览器不支持display: inline-block;的解决方法
    如何解决两个li之间的缝隙
    input、button、a标签 等定义的按钮尺寸的兼容性问题
    在一个页面重复使用一个js函数的方法
    关于让input=text,checkbox居中的解决方法
    遮盖层实现(jQuery+css+html)
    button,input type=button按钮在IE和w3c,firefox浏览器区别
    前端-选项卡(菜单栏)
    形成人、机器、过程和数据的互联互通
  • 原文地址:https://www.cnblogs.com/xiaoli52qd/p/6705096.html
Copyright © 2011-2022 走看看