移动端(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
第三步:用
/*---第一种--带--确定与取消的弹出框 ---*/
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
})
移动端(H5)弹框组件--简单--实用--不依赖jQuery的更多相关文章
- 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」
uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...
- svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- 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父组件 <template> <div class="hello"> <div id="app-3&quo ...
随机推荐
- 解决VMware下安装Ubuntu 16.04 不支持1920X1080分辨率的问题
解决方法: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync fl ...
- 一步使你的asp.net网站在手机浏览器上全屏显示
首先要加入下面的代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
- Spring ——依赖注入配置一些知识点
依赖注入 依赖注入的原理与实现 依赖注入(DI)和依赖查找(Dependency Lookup)共同组成 控制反转(IoC).从原理的角度来说,依赖注入和控制反转是没 有不同的,可以看作是从两个角度来 ...
- Latex 去掉行号
本文主要讲如何去掉Latex的行号 删除\modulolinenumbers删除所有\linenumbers 删除\usepackage{lineno,hyperref} modulolinenumb ...
- win10 uwp 设置启动窗口大小 获取窗口大小
本文主要说如何设置我们窗口的启动大小,UWP启动窗口大小. 设置启动窗口 设置窗口大小 ApplicationView.PreferredLaunchViewSize = new Size(1000, ...
- git上传遇到 GitHub could not read Username 的解决办法
Gitversion 1.8.5.2 执行git push命令异常,如下: Push failed Failed with error: unable to read askpass response ...
- base64减少图片请求
1. 使用base64减少 a) 2. 页面解析 CSS 生成的 CSSOM 时间增加 Base64 跟 CSS 混在一起,大大增加了浏览器需要解析CSS树的耗时.其实解析CSS ...
- LeetCode 455. Assign Cookies (分发曲奇饼干)
Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...
- Vue源码学习02 初始化模块init.js
接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...
- spark streaming 实例
spark-streaming读hdfs,统计文件中单词数量,并写入mysql package com.yeliang; import java.sql.Connection; import java ...