layer弹出层扩展主题的方法


Posted in Javascript onSeptember 11, 2019

弹出层插件layer确实很强大,官方提供主题太少,但是提供扩展的方式,由于项目使用统一颜色风格,就想扩展一下。官方默认的三种:

1.白蓝(默认)

layer弹出层扩展主题的方法

layer.alert('内容');//默认

2.墨绿

layer弹出层扩展主题的方法

layer.alert('内容', {
 icon: 1,
 skin: 'layui-layer-molv'
})

3.深蓝

layer弹出层扩展主题的方法

layer.alert('内容', {
 icon: 1,
 skin: 'layui-layer-lan'
})

==========重点啦===================================

下面以扩展橙色为例:

从官方下载的库目录结构应该是:

layer弹出层扩展主题的方法

1.在文件夹theme下新建目录orange,这个目录可以放css文件,用到的图片等(可以直接复制default目录的文件)

2.文件layer.css名字不要修改,清空文件里的内容,扩展自己的内容(这些css也不是我随意写的,可以参数文件夹default里的layer.css 搜索layui-layer-molv,参考它的写,打开浏览器debug模式,查看引用哪个css样式,我们都可以自己扩展修改它),layui-layer-orange 这个名字当然可以随意起。

layer弹出层扩展主题的方法

body .layui-layer-orange .layui-layer-title{background:#ff9000; color:#FFFFFF; border: none;}
body .layui-layer-orange .layui-layer-btn a{background:#ff9000;color:#FFFFFF;}
body .layui-layer-orange .layui-layer-btn .layui-layer-btn1{background:#ff9000;}
body .layui-layer-orange .layui-layer-btn .layui-layer-btn0{border: none;}

3.页面中使用扩展后的样式

layer.config({
 extend: 'orange/layer.css', //加载您的扩展样式,它自动从theme目录下加载这个文件
 skin: 'layui-layer-orange' //layui-layer-orange这个就是上面我们定义css 的class
});

4.测试下哈哈

layer.alert('layer皮肤-Yourskin');

layer.confirm('您是如何看待前端开发?', {
 btn: ['重要','奇葩'] //按钮
}, function(){
 layer.msg('的确很重要', {icon: 1});
}, function(){
 layer.msg('也可以这样', {
 time: 20000, //20s后自动关闭
 btn: ['明白了', '知道了']
 });
});

效果:

layer弹出层扩展主题的方法

以上这篇layer弹出层扩展主题的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
jquery对表单操作2
Apr 06 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
关于Vue中的options选项
Mar 22 Vue.js
手写Vue弹窗Modal的实现代码
Sep 11 #Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 #Javascript
layer更改皮肤的实现方法
Sep 11 #Javascript
node 解析图片二维码的内容代码实例
Sep 11 #Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 #Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 #Javascript
JS中封装axios来管控api的2种方式
Sep 11 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php实现的CSS更新类实例
2014/09/22 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
vue.js表格分页示例
2016/10/18 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python中的字典详细介绍
2014/09/18 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Django进阶之CSRF的解决
2018/08/01 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
店长职务说明书
2014/02/04 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
西柏坡导游词
2015/02/05 职场文书
招商银行收入证明
2015/06/17 职场文书
通讯稿范文
2015/07/22 职场文书
初三化学教学反思
2016/02/22 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL