手机版

逐层展开主题的方法弹出�

时间:2021-08-20 来源:互联网 编辑:宝哥软件园 浏览:

弹出层插件layer真的很强大。官方主题太少,但它提供了一种延伸方式。因为项目采用了统一的色彩风格,所以我想进行扩展。有三种官方默认值:

1.白色和蓝色(默认)

layer . alert(' content ');//默认值2。深绿色

Layer.alert ('content ',{icon : 1,skin :' layui-layer-molv'}) 3。深蓝

Layer.alert ('content ',{icon: 1,skin : ' layui-layer-LAN ' })==========================。

让我们以扩展橙色为例。

从官方下载的图书馆目录结构应该是:

1.在文件夹主题下创建一个新的橙色目录。这个目录可以放css文件,用过的图片等。(您可以直接复制默认目录中的文件)

2.不要修改文件layer.css的名称,清空文件中的内容,展开它自己的内容(这些css不是我随意写的,可以在参数文件夹default中搜索layui-layer-molv,参考它的写法,打开浏览器调试模式,检查引用的是哪种css样式,我们可以自己展开修改)。当然,名称layui-layer-orange可以随意启动。

尸体。layui-layer-橙色。layui-layer-title { background : # ff 9000;color: # FFFFFFborder:无;}身体。layui-layer-橙色。layui-layer-BTN a { background : # ff 9000;color: # FFFFFF}身体。layui-layer-橙色。layui层btn。layui-layer-BTN 1 { background : # ff 9000;}身体。layui-layer-橙色。layui层btn。layui-layer-BTN 0 { border : none;}3.在页面中使用展开的样式

layer . config({ extend : ' orange/layer . css ',//加载您的扩展样式,这会自动加载此文件skin : ' layui-layer-orange '//layui-layer-orange,这是上面定义的CSS的类});4.测试哈哈

layer . alert(' layer skin-Yourskin ');layer . confirm(‘你觉得前端开发怎么样?’,{btn: ['重要','精彩']//button },function(){ layer.msg('真的很重要',{ icon : 1 });},function(){ layer.msg('它可以是同一个',{time : 20000,20s后自动关闭BTN :['了解','了解']});});效果:

以上在图层弹出式图层中展开主题的方法就是边肖与大家分享的全部内容。希望能给大家一个参考,多支持我们。

版权声明:逐层展开主题的方法弹出�是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。