移动端(H5)弹框组件--简单--实用--不依赖jQuery

俗话说的好,框架是服务与大家的,包含的功能比较多,代码多。在现在追求速度的年代。应该根据自己的需求去封装自己所需要的组件。

下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少,适用于一般移动端小项目。

这个插件名称:MobileUi

包含功能:弹框,正在加载,tips1.5秒消失,清除正在加载。

如图:

  

接下来我来告诉大家怎么用吧!!

第一步:配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

第二步:加载  mobile-ui1.0-compress.js

第三步:用

 1             /*---第一种--带--确定与取消的弹出框 ---*/
 2             MobileUi.init({
 3                 title:'确认删除',
 4                 text:'您确认要删除吗?',
 5                 type:1,
 6                 callbak:function(){    
 7                     console.log('callbak');
 8                 }
 9             });
10             
11             /*---第二种--带--确定的弹出框 ---*/
12             MobileUi.init({
13                 type:2,
14                 title:'提示',
15                 text:'您的操作有误',
16                 callbak:function(){
17                     console.log('callbak');    
18                 }
19             })
20             
21             /*---第三种--数据加载中---*/
22             MobileUi.init({
23                 type:3
24             })
25             
26             /*---第四种--提示消息自动消失 ---*/
27             MobileUi.init({
28                 type:4,
29                 text:'您的手机号码有误'
30             })
31             
32             /*---第五种--移除数据加载 ---*/
33             MobileUi.init({
34                 type:5
35             })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ for循环 流程图_python 零基础必知--条件控制与循环语句

本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理本文章来自腾讯云 作者&#xff1a;somenzz如果没有 if 语句和循环语句&#xff0c;请问你怎么编程&#xff1f;Python 中的条件控制和循环语句都非常简单&…

前端总结·基础篇·CSS(二)视觉

前端总结系列 前端总结基础篇CSS&#xff08;一&#xff09;布局前端总结基础篇CSS&#xff08;二&#xff09;视觉前端总结基础篇CSS&#xff08;三&#xff09;补充前端总结基础篇JS&#xff08;一&#xff09;原型、原型链、构造函数和字符串&#xff08;String&#xff09;…

【kindle笔记】之 《浪潮之巅》- 2018-1-

《浪潮之巅》 这本书推荐自最爱的政治课老师。 政治课老师张巍老师。我会一直记得你的。 以这样的身份来到这个学校&#xff0c;他人的质疑&#xff0c;自己的忐忑&#xff0c;老板的不公。犹犹豫豫谨小慎微地前进。 第一次听到这样的话是从您口中&#xff1a; 在座的诸位&…

Secure CRT 自动记录日志log配置

SecureCRT8.0的下载地址下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1i5q09qH 密码&#xff1a;4pa2 配置自动log操作如下&#xff1a; 1.options ---> Session Options 2. 设置log 文件属性 点击 日志 &#xff0c;在选项框中 Log file name中填入路径和…

禁用mysql的sleep函数_MySQL的sleep函数的特殊特现象

MySQL中的系统函数sleep&#xff0c;实际应用的场景不多&#xff0c;一般用来做实验测试&#xff0c;昨天在测试的时候&#xff0c;意外发现sleep函数的一个特殊现象。如果在查询语句中使用sleep函数&#xff0c;那么休眠的时间跟返回的记录有关。如下测试所示&#xff1a;mysq…

amoeba mysql读写分离_Mysql 实现读写分离的详细教程(amoeba)

Mysql 实现读写分离的详细教程(amoeba)发布时间&#xff1a;2018-08-17作者&#xff1a;laosun阅读(2220)继上篇文章&#xff0c;mysql实现主从配置之后的读写分离实现方式&#xff0c;文章地址。amoeba是盛大架构师陈思儒独立完成&#xff0c;除此之外还有很多中间件&#xff…

十道海量数据处理面试题与十个方法大总结

1. 给定a、b两个文件&#xff0c;各存放50亿个url&#xff0c;每个url各占64字节&#xff0c;内存限制是4G&#xff0c;让你找出a、b文件共同的url&#xff1f; 方案1&#xff1a;可以估计每个文件安的大小为50G64320G&#xff0c;远远大于内存限制的4G。所以不可能将其完全加载…

Spring集成文件轮询和测试

我最近实施了一个小项目&#xff0c;在该项目中&#xff0c;我们必须轮询文件夹中的新文件&#xff0c;然后在文件内容上触发服务流。 Spring Integration非常适合此要求&#xff0c;因为它带有一个通道适配器 &#xff0c;该适配器可以扫描文件夹中的新文件&#xff0c;然后通…

Spark参数配置总结

转载于:https://www.cnblogs.com/lz3018/p/8128017.html

eclipse mysql生成实体类_Eclipse实现数据库反向生成实体类(pojo)-------(插件安装和实现步骤的说明)...

一、插件安装1.下载插件&#xff1a;http://jaist.dl.sourceforge.net/sourceforge/jboss/HibernateTools-3.2.4.Beta1-R200810311334.zip2.解压压缩包分别将其中的features和plugins放到Eclipse安装目录下对应的这2个文件里&#xff0c;重启Eclipse使其生效3.随便建个project&…

一些小技巧-重构

用box-shadow制造浮雕效果用box-shadow做简单的背景修饰长页面背景图不够用...... 01 用box-shadow制造浮雕效果 demo示例&#xff1a; src"http://demo.zhangruojun.com/static/demo/demo001/" frameborder"0" width"414" height"650&qu…

VM虚拟机显示不能铺满问题

关于使用虚拟机&#xff08;VMware&#xff09;时桌面显示不能铺满整个窗口时的设置操作&#xff1a; 步骤&#xff1a;虚拟机菜单下的&#xff1a;编辑-->首选项-->显示&#xff08;如下图&#xff09; 可以根据自己需求设置全屏下面的三个选项&#xff0c;确定后如果不…

Weex系列-项目工程

转载于:https://www.cnblogs.com/hacjy/p/8136460.html

MySQL索引效率对比_mysql下普通索引和唯一索引的效率对比

今天在我的虚拟机中布置了环境&#xff0c;测试抓图如下&#xff1a;抓的这几个都是第一次执行的&#xff0c;刷了几次后&#xff0c;取平均值&#xff0c;效率大致相同&#xff0c;而且如果在一个列上同时建唯一索引和普通索引的话&#xff0c;mysql会自动选择唯一索引。谷歌一…

spring以及json,fastjson和jackson

&#xff08;一&#xff09; RestController 以及 RequestBody spring的这两个注解都需要使用对应的 message-converters 实现 pojo到字符串的转换&#xff0c; 需要配置实现了 GenericHttpMessageConverter 接口的实现类GenericHttpMessageConverter 父接口为HttpMessageConve…

turtle 函数 方法_学python第十一节:turtle深入 了解

学python第十一节&#xff1a;深入分析turtleTurtle是一个直观有趣的图形绘制函数。这节课对turtle的以下几点进行补充&#xff1a;在蟒蛇绘制代码中提到过import 库引用保留字的函数&#xff0c;是补充python程序功能的方式&#xff0c;使用2种编写格式&#xff1a; 第一种引用…

intellij idea中解决java.lang.VerifyError: Expecting a stackmap frame at branch target的方法

【实习第三周&#xff0c;被生活逼成了全栈hhhh从开发写到测试】 报错如下&#xff1a; 经过查找各类资料博客&#xff0c;针对不同的情况有不同的解决办法&#xff1a;1. java源代码是用jdk1.6下开发的&#xff0c;后来环境上替换安装了jdk1.7编译运行。运行报错。我的错误不属…

ArrayList使用内存映射文件

介绍 内存中的计算由于负担得起的硬件而开始兴起&#xff0c;大多数数据保留在RAM中以满足延迟和吞吐量的目标&#xff0c;但是将数据保留在RAM中会增加垃圾收集器的开销&#xff0c;尤其是在您不预先分配的情况下。 因此&#xff0c;有效地我们需要一种无垃圾/无垃圾的方法来避…

JVM的内存区域划分(转载)

原文链接&#xff1a; http://www.cnblogs.com/dolphin0520/p/3613043.html JVM的内存区域划分 学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段&#xff0c;数据段包括堆、栈以及静态数据区。那么在Java语言当中&#xff0c;内存又是如…

微抖动,繁忙的等待和绑定CPU

性能分析新机器 当我在新机器上工作时&#xff0c;我想了解它的局限性。 在这篇文章中&#xff0c;我将研究机器的抖动以及忙于等待本周末构建的新PC的影响。 机器的规格很有趣&#xff0c;但不是发布目的。 永远不要少&#xff1a; i7-3970X六核&#xff0c;运行频率为4.5 GH…