基于Layer 封装JS

layui引入第三方依赖 layui引入第三方js插件准备 编写第一个Hello World 配置第三方js路径 用layui包裹一个js插件 在页面调用 在layui中引入moment第三方插件 配置moment moment的文件位置 用layui包裹moment 在layui中调用moment layui引入第三方js插件准备   我之前使用的前端框架中包括bootstrap,easy-u... 阅读详情
var ZTLayer = {
    tips: function (content, target, time) {
        return layer.tips(content, target, { time: time || 3000 });
    },
    //关闭一个层
    close: function (index) {
        layer.close(index);
    },
    //显示遮罩层
    showLoading: function (time, style) {
        time = time || 0;
        style = style || 1
        return layer.load(style, { shade: [0.5, '#393D49'], time: time });
    },
    //关闭遮罩层
    closeLoading: function () {
        layer.closeAll('loading');
    },
    //弹出提示 icon类型 0:带!的提示 1:√ 2:x 3:? 4:锁 5:难过脸 6:微笑脸
    showTips: function (content, icon, time, callback) {
        icon = icon || 0;
        time = time || 3000;
        layer.msg(content, {
            icon: icon,
            time: time,
            resize: false,
            shade: 0.5,
            shadeClose: true
        }, function () {
            //do something
            if (callback) {
                callback();
            }
        });
    },
    //与 JS alert相似
    alert: function (content, btnText, title) {
        layer.alert(content, { closeBtn: 1, btn: [btnText], title: title, resize: false })
    },
    //与JS confirm相似
    confirm: function (content, title, sureText, sureFunction, closeText, closeFunction) {
        title = title || "";

        layer.confirm(
            content, { title: title, icon: 3, btn: [sureText, closeText], resize: false },
            function (index) {//确定回调
                if (sureFunction) {
                    sureFunction();
                }
                layer.close(index);
            }, function (index) {//cancel回调
                if (closeFunction) {
                    closeFunction();
                }
                layer.close(index);
            });
    },
    openWindow: function (content, title, width, height) {
        title = title || "";
        width = width || 500;
        height = height || 500;

        var offset = ((window.screen.height - height) * 0.3) + 'px';

        return layer.open({
            title: title
            , content: content
            , type: 1
            , offset: offset //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
            , shade: 0.5 // 遮罩层透明度
            , resize: false
            , area: [width + 'px', height + 'px']
            , skin: 'layui-layer-rim'
        });
    },
    openIframe: function (url, title, width, height) {
        title = title || "";
        width = width || 500;
        height = height || 500;
        var offset = ((window.screen.height - height) * 0.3) + 'px';

        return layer.open({
            title: title
            , content: url
            , type: 2
            , offset: offset //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
            , shade: 0.5 // 遮罩层透明度
            , resize: false
            , area: [width + 'px', height + 'px']
            , skin: 'layui-layer-rim'
        });
    }
};

 

layui封装项目 layui封装layui封装 有任何问题可以和我留言 立即下载

相关推荐

layer插件的js文件

针对前端jsp中的弹窗的优化插件,layer插件,使弹窗更漂亮,更美化

layui 一些方法封装 js

layui.use(['form'], function(){ laydate = layui.laydate; form = layui.form; layer = layui.layer;// 表单验证 form.render(); form.verify({ float:[ /^-?\d+\.?\d{0,2}$/ ,'输入的必须为两位小数' ] }); //监听提交 form.on('subm.

hua950327的博客 1333

封装简易实用layui三级联动(一行代码实现).rar

简易的 layui 三级联动 使用只需要一行代码 封装到了layui模块 layui专用

layui 封装 ajax请求

为方便在layui后台管理中提升开发效率,所以在js中封装了方法,以方便使用。

qing_er_的博客 3429

【AAOS】【源码分析】用户管理(五)-- MUMD介绍

MUMD(多用户多屏显示)是Android Automotive OS为车载多乘员场景设计的功能,支持不同座位用户独立操作各自屏幕。

码农的历程 1510

vba 修改下拉列表_Excel联想式下拉菜单制作教程II

?点击关注Excel表哥公众号上期我们分享了Excel联想式下拉菜单制作教程,可以简化大家在下拉菜单过长时的数据录入工作。文章末尾给大家提出了一个问题:为什么下拉列表数据源需要先排序?今天我们继续分享一个不用对数据源排序也能实现的下拉列表制作方法。先看最终的效果动图:今日分享难度指数:★★★★☆01创建辅助列在需要设置下拉列表的工作表中创建一列辅助列,如下图所示:在辅助列F3单元格输入下...

weixin_39593718的博客 1576

对layui的动态表格以及弹出层进行js封装,简化代码

先看一下页面的效果: 页面中包含查询条件,以及操作按钮,下面是使用自己封装的js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.

qq_36635569的博客 1549

告别米级误差:手把手教你用Nordic nRF52840实现厘米级蓝牙测距(Channel Sounding实战)

本文详细介绍了如何利用Nordic nRF52840开发板和蓝牙信道探测(Channel Sounding)技术实现厘米级高精度测距。通过硬件配置、软件优化和实战案例,帮助开发者快速掌握低功耗蓝牙测距技术,适用于工业自动化、智能仓储等场景。

weixin_42741930的博客 476

layui ajax到php,使用layui框架封装ajax模块的具体步骤,layui ajax

使用layui框架封装ajax模块的具体步骤用layui框架封装ajax模块的具体步骤,Layui是由自己的模块规范编写的前端ui框架,遵循原生HTML/CSS/JS的编写和组织形式,门槛极低,随时可用。(学习视频分享:编程视频)ajax可以说是在正常使用中被广泛使用,所以在这里我们添加了一个自己的模块来封装Ajax,方便使用。注意:模块加载需要服务器环境的支持,所以在观看这个教程之前,请在您的本...

weixin_36240219的博客 612

给STM32供电,别只接VDD和GND!VBAT、VDDA这些引脚不接会怎样?

本文深入解析STM32电源设计中VBAT与VDDA引脚的关键作用,揭示仅连接VDD和GND可能导致的ADC精度下降、RTC功能异常等问题。通过实测数据对比不同连接方案,提供包括滤波电路设计、PCB布局布线和双电源自动切换在内的实用解决方案,帮助开发者优化系统稳定性与性能。

weixin_30521161的博客 623

UCOS-III 系统移植

UCOSIII系统移植到GD32F303详细过程 工程代码:https://github.com/jslaobing/techIot_ucosiii_porting

TechIoT - 探索物联网与嵌入式系统 2087

layer.js 封装使用, 运用在thinkphp

v层:(还没实现功能的) 添加 教室名称: teacher: {volist name="teacher" id="teacher"} getData('id')}">{$teacher->getData('name')} {/volist}

廖圣平 2738

Cost-effective Attention Reuse across Multi-turn Conversations in Large Language Model Serving

通过多回合对话与人类互动是大型语言模型(LLM)的一个基本特征。然而,由于需要重复计算历史token的密钥值(KV)缓存,用于执行多回合会话的现有LLM服务引擎效率低下,从而导致高服务成本。为了解决这个问题,本文提出了AttentionStore,这是一种新的注意力机制,可以在多回合对话中重用KV缓存(即注意力重用),显著降低重复计算开销。AttentionStore维护一个分层的KV缓存系统,该系统利用经济高效的内存/存储介质为所有请求保存KV缓存。

c_cpp_csharp的专栏 394

【Thinkphp5】封装layer弹窗方法

1 官网下载layer 2 引入文件: <!--layer,官网可下载--> <script type="text/javascript" src="/static/home/layer/jquery.min.js"></script> <script type="text/javascript" src="/static/home...

dianqiangjin0204的博客 518

TypeError: XGBClassifier.fit() got an unexpected keyword argument ‘early_stopping_rounds‘ 解决方案

本文主要介绍了TypeError: XGBClassifier.fit() got an unexpected keyword argument 'early_stopping_rounds’解决方案,希望能对使用XGBoost的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 1万+

2020计算机专业保研夏令营面经:中科院计算所网数机试题目

计算所网络数据科学与技术重点实验室的第一阶段是机试。机试不限程序语言,要求提交源代码。

乔卿的博客 2957

Layer 使用

官网文档http://layer.layui.com/mobile/api.html 1.需要添加jquery的引用然后是 loadExtentFile("css", "/plugin/layer_mobile-2.0/need/layer.css"); loadExtentFile("js", "/plugin/layer_mobile-2.0/layer.js"); loadE...

weixin_30668887的博客 111

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

layer点击小图预览图片

html代码: <div id="window-img" style="display: none"></div> 封装一个函数 function windowImg(imgUrl) { $('#window-img').empty(); var img = "<img class='window-img' src='" + imgUrl + "' width=...

qq_44747508的博客 1009

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

layer常用功能-子页面关闭当前窗口-执行子页面方法-方法回调

1 子页面关闭当前窗口 1.1 获取当前窗口索引,关闭  var index = parent.layer.getFrameIndex(window.name);    parent.layer.close(index);//关闭当前页   1.2 刷新父页面; window.parent.location.reload(); 2 自定义两个按钮执行不同的代码;默认情况下,按钮2会...

qxianx的博客 1万+

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

layer基本了解,你必须知道

封装layer是为了解决什么问题?是如何进行封装的?怎么帮你解决页面问题的

weixin_45430926的博客 3038

jquery封装选人插件(结合layer)

html <button class="layui-btn" id="transfer">添加</button> <!-- 选人弹窗主体框架 satrt--> <div class="layer-transfer" id="layer-transfer" style="display:none"> <div class="layer-transfer-content"> <div class="layer-trans

summer_cloudy的博客 568

layer控件的dialog封装

为什么使用dialog: 在实际项目中我们在引用相关控件以后,进行二次dialog封装能够更加方便我们的本项目使用。 例如我们在引用http://layer.layui.com/的弹出层控件以后可以再外部Public文件夹内写入一个专门的 dialog.jsvar dialog = { // 错误弹出层 error: function(message) { lay

平渊渡海的博客 8168

gh_mirrors/la/layer与Laminar集成:Scala.js弹窗方案

你是否在Scala.js项目中为弹窗组件选型而烦恼?既要兼顾功能丰富度,又要保证与前端框架的无缝集成?本文将带你实现**gh_mirrors/la/layer**(以下简称layer)与**Laminar**的完美结合,用不到200行代码构建企业级弹窗解决方案。 读完本文你将获得: - 3种核心弹窗类型的Scala.js实现 - 完整的类型安全封装代码 - 主题定制与动画效果配置 - 生产环境优...

gitblog_01152的博客 399

layui 上传图片文件时加载状态封装

html文件实现: <div class="layui-form-item pr-15"> <label class="layui-form-label">图片上传<sup>*</sup></label> <div class="layui-input-block"> <div cla...

onlylele的博客 877
上一篇: 清理Html标签(只是清理了css样式)
下一篇: 规范的前台JS操作返回
oopts
博客等级 码龄9年 0粉丝 77原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值