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

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

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

这个插件名称:MobileUi

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

如图:

dc1beb3816d3f76ad4483050443f256d.png 

95c2c65011fbf5ebecc0013b654d9eba.png

a8ee1ccdd4349c360c17844fc000fb56.png 

d0b5df923a16af119a632e884c6bf0e9.png

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

第一步:配置

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

第三步:用

/*---第一种--带--确定与取消的弹出框 ---*/

MobileUi.init({

title:'确认删除',

text:'您确认要删除吗?',

type:1,

callbak:function(){

console.log('callbak');

}

});

/*---第二种--带--确定的弹出框 ---*/

MobileUi.init({

type:2,

title:'提示',

text:'您的操作有误',

callbak:function(){

console.log('callbak');

}

})

/*---第三种--数据加载中---*/

MobileUi.init({

type:3

})

/*---第四种--提示消息自动消失 ---*/

MobileUi.init({

type:4,

text:'您的手机号码有误'

})

/*---第五种--移除数据加载 ---*/

MobileUi.init({

type:5

})

vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

VUE2.0增删改查附编辑添加model(弹框)组件共用

Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

vue移动端弹框组件,vue-layer-mobile

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

vue移动端弹框组件

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

关于微信小程序 modal弹框组件的介绍

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

微信小程序之----弹框组件modal

modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...

vue的通讯与传递props emit (简单的弹框组件)

props父把信息传递给子组件 1父组件

随机推荐

微软 Build 2016年开发者大会发布多项功能升级

微软Build 2016开发者大会在美国旧金山的莫斯康展览中心开幕.本次大会对一些重点功能进行了完善.如手写笔支持技术Windows Ink.语音识别Cortana应用集(Cortana Collec ...

Web API Filter ActionFilterAttribute 使用

WebApi 提供两种过滤器的类型: 1.ActionFilterAttribute 2.exceptionFilterAttribute 两个类都是抽象类,ActionFilter 主要实现执行请求 ...

js动画性能提升笔记

JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...

【读书笔记】iOS-KVC

一,KVC即键/值编码. 二,KVC的基本调用包括-valueForKey:和-setValue:forKey:. 三,对于KVC,Cocoa自动放入和取出标量值.也就是说,当使用setValueFo ...

txt 分割程序

网上有很多 分割程序 ,但是他们都没有满足实际的用户要求 ,大家当然是希望看文章小说 一章节一章节的看 并非是那些传统意义上的按照文件的大小切割 所以 我特写本文研究下 这个简单的算法该怎样设计 说白 ...

在linux系统下安装redis

去官网找到合适的版本,可以直接下载下来,再用fxp上传,也可以直接以下面这种方式下载:$ wget http://download.redis.io/releases/redis-3.2.9.tar. ...

T-SQL:事务锁下的并发处理(十五)

1.事务 在sql  servce 中 事务是一个工作单元 可能包含查询和修改数据以及修改数据定义等多个活动 也可以显示或隐式定义事务边界 显示定义事务 BEGIN TRAN 开始  如果要提交事务 ...

jedis实现操纵redis的常用api及使用场景

简单记录一下,和描述一下常用的业务场景.好记性不如烂笔头. pom.xml redis.c ...

Java如何写Common直接调用

一:新建Class类,命名为:Common 1.  写public static 公共的静态方法:  2.  直接用  Common.方法名 就可以直接调用. 例如:写一个获取当前星期的方法. /** ...

Set原理

一.HashSet判断重读值的原理 1. 哈希表的存储结构: ==>数组+链表,数组的每个元素以链表的形式存储 2.如何把对象存储到哈希表中 ==>先计算对象的hashcod值,再对数组的 ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值