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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
手写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
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python3常见函数range()用法详解
2019/12/30 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
骨干教师培训制度
2014/01/13 职场文书
先进个人总结范文
2015/02/15 职场文书
跑出一片天观后感
2015/06/08 职场文书