zoukankan      html  css  js  c++  java
  • 重新封装了layer.tips,自定义跟随弹窗

    方法重新封装了 layer.tips 使用前,请仔细阅读此文本
    * @Author: 羽渡尘
    * @两种实现方法
    * @需要引用jquery.js、layer.js、ydcTip.js
    * @统一可传递的参数形式
    let option = {
        /*加载您的自定义样式文件(注意*样式文件必须在layer/skin目录下)*/
        extend: 'yourskin/yourskin.css',
        /*layer.tips参数 可见layer文档*/
        tips: [{
            tips: 3,
            tipsMore:false,
            skin:'layer-ext-yourskin',
            time : 0
        }],
        /*提示内容*/
        title : '确定要删除吗?',
        /*可以传递任意参数形式 以原形式携带*/
        obj : [obj],
        /*自定义按钮及触发方式 可携带参数,为了方便您的DIY,按钮都为span标签*/
        btn:[{
            /*按钮名称 :["方法名称","触发器","唯一标识类似于id通过ydc-sign获取","{传递参数}"]
            方法会自带一个取消按钮,如果不满足需求请自定义方法名称带有close的按钮,将会替换默认取消按钮*/
            '确定':['delInit','click','sign_id1','{"id":"id","meetType":"meetType"}'],
            '取消':['l_close',"click",'sign_id2','{"id":"id","meetType":"meetType"}']
        }]
    };
    
    第一种 使用示例 ---------------------------------------------------
    你可以在单独的按钮上配置
    <a href="javascript:void(0)"
    class="btn-ydc-tips font-blue"
    data-ydctips='{"btn":[{"确定":["delInit","click","sign_id1",{"id":"id","meetType":"meetType"}]}]}'>Example</a>
    必要的class名:btn-ydc-tips
    必要的传参:data-ydctips
    
    第二种 使用示例 ---------------------------------------------------
    <a href="javascript:void(0)" onclick="example(this,'参数')">Example</a>
    function example(obj,参数) {
            let option = {
                title : '确定要删除吗?',
                btn:[{
                    '确定':['delInit','click','sign_id1','{"id":"id"}']
                }],
                ..........
            };
            ydcLayFun.customize(option,obj);
    }
    
    * @关于配置的按钮回调
    function delInit(val,obj) {
        val = {
            btn_this: object //自动携带当前触发元素
            id: "id"
            meetType: "meetType"
        }
        obj 为你传递的任意参数形式 以原形式携带
    }
    
    
    * @关于自定义样式文件 ---------------------------------------------
    layer提供了强健的皮肤扩展接口,这意味着如果你对layer默认的样式不太满意,你还有更多的选择。
    第一步:存放
    将您下载的皮肤包(假设文件夹名为:myskin)解压。
    如果是独立版的layer,则将myskin存放在skin目录下
    如果是layui中使用layer,则将myskin存放在css/modules/layer目录下
    第二步:使用
    1. 全局配置
    layer.config({
      extend: 'myskin/style.css', //加载新皮肤
      skin: 'layer-ext-myskin' //一旦设定,所有弹层风格都采用此主题。
    });
    2. 局部使用
    layer.config({
      extend: 'myskin/style.css' //同样需要加载新皮肤
    });
    //单个使用
    layer.open({
      skin: 'layer-ext-myskin' //只对该层采用myskin皮肤
    });
    //也就是说,无论你全局还是局部,都要通过layer.config的extend来加载样式。
    
  • 相关阅读:
    索引!
    事件event
    Erlang运行时源码分析之——线程进度机制
    Erlang 运行时中使用的读写锁解析
    经典互斥算法解析
    网格布局之grid
    注册简单表单
    前端入门之自我介绍
    Python之一后置固件yield和终结函数addfinalizer
    python中yield 与 return 区别
  • 原文地址:https://www.cnblogs.com/yu-du-chen/p/12780531.html
Copyright © 2011-2022 走看看