一款腾讯UED设计的提示插件(使用教程)_zeng.msgbox.show-程序员宅基地

技术标签: 前端技术  信息  ued  提示  前端  js  hooray  tip  jquery  

  这是一款腾讯UED设计的提示插件,看着肯定很眼熟吧,闲话不多说,直接上demo吧。

  显示

ZENG.msgbox.show(提示信息,图标类型);

  隐藏:

ZENG.msgbox._hide();

  几秒后自动隐藏:

ZENG.msgbox.show(提示信息,图标类型,显示时长);

   用法很简单,分别引用对应的css和js文件就行了,就像这样:

<link rel="stylesheet" href="msgbox.css" />
<script type="text/javascript" src="msgbox.js"></script>

  如果有人不想用官方提示的调用方法,想自己写的话,我这里也可以提供HTML代码,是打开文件就可以直接看的,这样HTML部分就已经写好了,JS部分就可以自己去实现了。

<div class="zeng_msgbox_layer_wrap" id="q_Msgbox" style="top:100px;display:block"><span class="zeng_msgbox_layer" style="z-index:10000" id="mode_tips_v2"><span class="gtl_ico_hits"></span>您当前没有任何修改<span class="gtl_end"></span></span></div>
<div class="zeng_msgbox_layer_wrap" id="q_Msgbox" style="top:200px;display:block"><span class="zeng_msgbox_layer" style="z-index:10000" id="mode_tips_v2"><span class="gtl_ico_fail"></span>服务器出错了<span class="gtl_end"></span></span></div>
<div class="zeng_msgbox_layer_wrap" id="q_Msgbox" style="top:300px;display:block"><span class="zeng_msgbox_layer" style="z-index:10000" id="mode_tips_v2"><span class="gtl_ico_succ"></span>恭喜,添加成功!<span class="gtl_end"></span></span></div>
<div style="top:400px;display:block" id="q_Msgbox" class="zeng_msgbox_layer_wrap"><span id="mode_tips_v2" style="z-index:10000" class="zeng_msgbox_layer"><span class="gtl_ico_clear"></span><span class="gtl_ico_loading"></span>正在加载中,请稍后...<span class="gtl_end"></span></span></div>

  就是这么多了,文件下载地址:点击下载

  PS:修改了loading样式,防止出现loading.gif不放在文件同目录无法显示的问题。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/nqxcwl/article/details/102929317

智能推荐

vs创建支持多框架的类库_vs项目针对多个框架-程序员宅基地

文章浏览阅读968次。自己写的类库支持多框架,在实现自己类库时引用多框架不同的其他类库,同时方便给别人多版不同框架调用1.创建类库.netstandard版本2.在创建好的类库项目上编辑项目文件3.修改项目文件的支持框架为多框架,相支持什么版本就写什么版本,用";"隔开 <PropertyGroup> <TargetFrameworks>net4.6.1;netstandard2.0;netcoreapp2.0</TargetFrameworks> &_vs项目针对多个框架

MongoDB 以字符串值长度 或 数组元素个数 为条件查询_mongo某个字段长度大于-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏7次。#以字符串长度为条件在实际项目中常常会有根据字段值长度大小进行限制查询,例如查询商品名称过长或过短的商品信息,具体的实现方式可能有多种,在此记录常见的两种实现使用 $where 查询(性能稍逊一些)//查询商品名称长度大于25个字符的商品db.item.find({item_name:{$exists:true},$where:"(this.item_name.length &gt..._mongo某个字段长度大于

SSM搭建整合(Maven项目)第一篇 外加增删改查_maven整合uuid-程序员宅基地

文章浏览阅读622次。 一、 首先我们得先建一个Maven项目,可以参考我这篇文章:https://blog.csdn.net/qq_38000902/article/details/79565136建后以下目录,你会发现IDEA识别不了,我们得设置让IDEA识别一下:打开File里面的Project structure设置分别设置识别如下:点击Apply,再点击ok退出设置 二、接着在..._maven整合uuid

leetcode中RemoveNthNodeFromEndofList_java given a linked list remove the n-th node from-程序员宅基地

文章浏览阅读210次。Given a linked list, remove the n-th node from the end of list and return its head.Example:Given linked list: 1-&gt;2-&gt;3-&gt;4-&gt;5, and n = 2.After removing the second node from the end, the li..._java given a linked list remove the n-th node from the end of list and retu

将json数据映射成对象的处理办法_props接收json改为对象-程序员宅基地

文章浏览阅读3.3k次。case class Person(channel: String, IP: String, mid: String, user_id_temp: String, user_id: String,_props接收json改为对象

练习三1020,总方案数*_you are to write a program which reads n,m,a1,a2,a-程序员宅基地

文章浏览阅读171次。Problem T Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other)Total Submission(s) : 18 Accepted Submission(s) : 5Problem DescriptionWhuacmers use coins.They have_you are to write a program which reads n,m,a1,a2,a3...an and c1,c2,c3...cn corresponding to the number of tony's coins of value a1,a2,a3...an then calculate how many prices(form 1 to m) tony can pay use these coins.

随便推点

Unity3d中第三人称摄像机跟随的实现-程序员宅基地

文章浏览阅读235次。  最简单的一种就是先设置好摄像机跟物体的相对距离,在脚本里就可以由物体的位置,跟相对距离,就可以求出摄像机的位置,用插值的方法可以让摄像机平滑跟随。 1 public class CamFollow1 : MonoBehaviour 2 { 3 4 private Vector3 offset; 5 public Transform play..._unity3d怎么让摄像机跟随第三人称动

while 格式化输出 编码初识-程序员宅基地

文章浏览阅读112次。1.while循环while 关键字 空格 条件 冒号缩进 循环体while 3>2:print("好嗨呦")print("你的骆驼")print("再活五百年")print("在人间")print("痒")#打印1到10的整数num=1while num<11: print(num) num+=1#打印1到100的整数num=1..._赵海宇 csdn

python进阶练习题:矿石号码【难度:2级】--景越Python编程实例训练营,不同难度Python习题,适合自学Python的新手进阶_python的矿石-程序员宅基地

文章浏览阅读206次。python进阶练习题:矿石号码【难度:2级】:** 矿石编号**(也称为欧尔调和数)是数字的量,[调和平均值(https://en.wikipedia.org/wiki/Harmonic_mean)其所有的除数(包括该数字本身)的等于一个整数.例如,图6是一个矿石数量,因为它的调和平均值正是2:H(6)= 4 /(1/1 + 1/2 1/3 + 1/6 +)= 2你的任务是完成函数..._python的矿石

android 获取当前屏幕方向_android get view orientation-程序员宅基地

文章浏览阅读8.9k次。直接上源码:package com.z.currorientation;import android.content.Context;import android.hardware.SensorManager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android_android get view orientation

HttpClient上传文件中文名乱码_browser_compatible-程序员宅基地

文章浏览阅读4.3k次,点赞9次,收藏20次。HttpClient上传文件中文名乱码现象 使用HttpClient工具上传文件时,如果文件名是中文,文件名会乱码文件名乱码的代码: private HttpEntity buildEntity(Long scenarioId, List&amp;amp;amp;amp;amp;lt;String&amp;amp;amp;amp;amp;gt; groupIds, String extension,File fileToUpload) { ..._browser_compatible

Spring Cloud Config Server 和Client 基本配置_springcloud客户端设置spring.cloud.client-程序员宅基地

文章浏览阅读279次。官网:http://cloud.spring.io/spring-cloud-config/single/spring-cloud-config.html#_quick_startGit 文件配置创建我的服务地址(码云):https://gitee.com/xiechenxuyuan/SpringCouldConfig如下:Spring Cloud Config Server1、创建项目从spring官网 :http://start.spring.io/创建一个简单的spring boot项目_springcloud客户端设置spring.cloud.client

推荐文章

热门文章

相关标签