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));
}
}
});
};
angular组件--tips提示功能的更多相关文章
- VS2013中实现angular代码智能提示
第一步:在项目同添加angular js文件的引用: 这里使用NuGet包管理器来给项目添加angular js install-package angularjs 第二步:添加智能提示js文件 我们 ...
- [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库
使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...
- JavaScript实现邮箱后缀提示功能
先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 手把手教你搭建自己的Angular组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...
- eclipse自动提示功能没了的解决办法(转载)
eclipse自动提示功能没了的解决办法 标签: eclipse联想 2012-08-09 14:32 24687人阅读 评论(7) 收藏 举报 分类: Android(38) 版权声明:本文为博 ...
- 解决 PhpStorm 对 用单例模式实例化PHP类时,代码自动提示功能失效 的问题
大部分PHP框架中,为了防止一个类被重复实例化,往往采用“单例模式”实例化类.我们的项目框架是这样做的: 先写好一个基类 /framework/Base.class.php,内容如下: <?ph ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- 一个.net程序员的安卓之旅-Eclipse设置代码智能提示功能
一个.net程序员的安卓之旅-代码智能提示功能 过完年回来就决心开始学安卓开发,就网上买了个内存条加在笔记本上(因为笔记本原来2G内存太卡了,装了vs2010.SQL Server 2008.orac ...
随机推荐
- Delphi7卸载indy9,安装indy10步骤
1. 找到C:\Program Files\Borland\Delphi7\Borland Delphi7.msi——双击——点Next——选择Modify,点Next——找到Program File ...
- 小白对异步IO的理解
前言 看到越来越多的大佬都在使用python的异步IO,协程等概念来实现高效的IO处理过程,可是我对这些概念还不太懂,就学习了一下. 因为是初学者,在理解上有很多不到位的地方,如果有错误,还希望能够有 ...
- C语言函数篇(二)函数参数基础设计
形参实现一种数据传入的接口 ,由 实参 拷贝给 形参. 拷贝!!!!!!!!!!! 例1: void func(int tmp){ //意图是实现传进来的参数 +1 tmp++; } int mian ...
- 开放定址法——线性探测(Linear Probing)
之前我们所采用的那种方法,也被称之为封闭定址法.每个桶单元里存的都是那些与这个桶地址比如K相冲突的词条.也就是说每个词条应该属于哪个桶所对应的列表,都是在事先已经注定的.经过一个确定的哈希函数,这些绿 ...
- POJ:1258-Agri-Net
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 65322 Accepted: 27029 Descriptio ...
- Dapper.Extension的基本使用
前言 上一篇随笔写了Dapper的简单的使用,这次写一下Dapper.Extension的使用,它是Dapper的简单的封装扩展,可以通过实例化的对象赋值后进行增删改的操作以及分页,但是却不能进 ...
- 抽象类的作用之一:sdk 传递你需要的参数
抽象类可以干什么?抽象类可以让别人必须做一件事情,比如实现一个方法. 那它有什么作用呢? 我开始也不知道啊,后来慢慢的知道了,在开发中,我知道了它是干什么的,怎么用的.比如你要写一个sdk给别人用.但 ...
- spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解
读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...
- IOS客户端的个人中心可以查看自己的博客了。
IOS客户端的个人中心可以查看自己的博客了. 写这篇是为了在客户端显示之用. 下一步实现在客户端发博客.
- Pascal小游戏 不要消灭星星
不要消灭星星 Pascal小游戏 Chaobs改编自pascal吧 控制台小游戏嘛,就当是练习一下结构化的写法. program wxtw; uses crt; type zbdy=reco ...