zoukankan      html  css  js  c++  java
  • 【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/layer/layer.js"></script>
    <!--封装JS-->
    <script type="text/javascript" src="/static/home/layer/layershow.js"></script> 

    html代码部分

    <a href="javascript:;" onclick="edit('编辑','/home/ucbs/cate_edite?cate_id={$vo.cate_id}','1','800','500')">编辑</a>

    js部分:

    <script type="text/javascript">
    
    /*编辑*/
    function edit(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    </script>

    3 layershow.js 

    /*弹出层*/
    /*
        参数解释:
        title    标题
        url        请求的url
        id        需要操作的数据id
        w        弹出层宽度(缺省调默认值)
        h        弹出层高度(缺省调默认值)
    */
    function layer_show(title,url,w,h){
        if (title == null || title == '') {
            title=false;
        };
        if (url == null || url == '') {
            url="404.html";
        };
        if (w == null || w == '') {
            w=800;
        };
        if (h == null || h == '') {
            h=($(window).height() - 50);
        };
        layer.open({
            type: 2,
            area: [w+'px', h +'px'],
            fix: false, //不固定
            maxmin: true,
            shade:0.4,
            title: title,
            content: url
        });
    }
    /*关闭弹出框口*/
    function layer_close(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
  • 相关阅读:
    pandas入门
    Android开发之adt bundle安装
    初学爬虫(四)
    MIPI-DSI、LVDS、DVP、MIPI-CSI
    射频连接器
    BNC连接器
    从尺寸和分辨率_到如何选择相机和显示屏(部分转载)
    缘分--人生最多百年
    windows快捷键补录
    Linux虚拟机网络详解
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/7146029.html
Copyright © 2011-2022 走看看