移动端(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,一经查实,立即删除!

相关文章

IDEA界面

Alt数字&#xff1a;出来你需要的界面转载于:https://www.cnblogs.com/chanaichao/p/9214327.html

在单节点和多节点上的Hadoop设置

我们将描述在单节点和多节点上的Hadoop设置。 将详细描述Hadoop环境的设置和配置。 首先&#xff0c;您需要下载以下软件&#xff08;rpm&#xff09;。 Java JDK RPM Apache Hadoop 0.20.204.0 RPM A&#xff09;单节点系统Hadoop设置 1&#xff09;在Red Hat或CentOS 5系统…

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; 在座的诸位&…

定位网页元素的解析

一.position属性定位网页元素 1.static &#xff1a;默认值&#xff0c;没有定位。按照标准文档流的方式提现出来 2.relative&#xff1a;相对定位&#xff0c;相对于自身元素原来的位置进行定位 <style type"text/css"> .div01{ position: relative;…

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中填入路径和…

Java 8的惰性序列实现

我刚刚在GitHub上发布了LazySeq库&#xff0c;这是我最近进行的Java 8实验的结果。 我希望你会喜欢它。 即使您觉得它不是很有用&#xff0c;它仍然是Java 8&#xff08;以及一般而言&#xff09;中的函数式编程的重要课程。 而且它可能是第一个针对Java 8的社区库&#xff01;…

字符串、对象、数组操作方法、json方法

1.字符串操作方法 1.charAt * 作用 * 通过索引找字符 * 语法 * 字符串.charAt(index) * 参数 * 索引值 * 取值范围&#xff1a;0-(length-1) * 如果不写参数&#xff0c;那默认为0 * 如果index超出了范围后&…

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

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

ADO.NET 事务控制

在ADO.NET 中&#xff0c;可以使用Connection 和Transaction 对象来控制事务。若要执行事务&#xff0c;请执行下列操作&#xff1a; 1.调用Connection 对象的BeginTransaction 方法来标记事务的开始。 2.将Transaction 对象分配给要执行的Command的Transaction 属性。…

sublime text 快捷键的使用大全

多行选择后按下ctrl/ 选择类 CtrlD 选中光标所占的文本&#xff0c;继续操作则会选中下一个相同的文本。 AltF3 选中文本按下快捷键&#xff0c;即可一次性选择全部的相同文本进行同时编辑。举个栗子&#xff1a;快速选中并更改所有相同的变量名、函数名等。 CtrlL 选中整行&am…

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

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

z-index的学习整理转述

前言&#xff1a;这是笔者第一次写博客&#xff0c;主要是学习之后自己的理解。如果有错误或者疑问的地方&#xff0c;请大家指正&#xff0c;我会持续更新&#xff01; z-index属性描述元素的堆叠顺序&#xff08;层级&#xff09;&#xff0c;意思是A元素可以覆盖B元素&…

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

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;确定后如果不…