zoukankan      html  css  js  c++  java
  • fastadmin模态框(弹出框)

     用法:

    在html页面新建一个按钮用来触发事件

    <a href="javascript:;" class="btn btn-success btn-add " title="添加"><i class="fa fa-plus"></i> 添加</a>

    然后js中定义一个点击事件 在改事件里触发 Fast.api.open(url, title, options)打开模态框

                    // 在index页面添加按钮事件
                    $(toolbar).on('click', '.btn-add', function () {
                        //获取选中的条目ID集合
                        var url = 'gzconfig/add';//弹出窗口 add.html页面的(fastadmin封装layer模态框将以iframe的方式将add输出到index页面的模态框里)
                        Fast.api.open(url, __('Add'), data|| {});
                    });

     add.html

    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Gzname')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-gzname" data-rule="required" class="form-control" name="row[gzname]" type="text">
            </div>
        </div>
        //layer-footer里的内容怎么改则弹出出框里的3区域就怎么显示
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
    </form>

    fasadmin默认没有给弹出框绑定事件,

    我们需要在控制器对应的JS中Form.api.bindevent进行绑定事件,绑定事件后我们点确定按钮才会采用Ajax的方式进行提交表单,否则会采用原始的方式提交表单

     模态框打开函数的具体参数Fast.api.open(弹出页面的地址, 1的标题, options)

    //将默认的参数defaultOptions放到options里如下:
    Fast.api.open(弹出页面的地址, 模态框的头的标题, {
        type: 2,

    title
    : title, shadeClose: true, shade: false, maxmin: true, moveOut: true, content: '弹出页面的地址', zIndex: Layer.zIndex,// 弹框的层级数 success: function (layero, index){ }, 'area':[ $(window).width() > 800 ? '800px' : '95%', $(window).height() > 600 ? '600px' : '95%' ],
    'offset':[
    //窗口小于480px才定义
    top.$(".tab-pane.active").scrollTop() + "px",
    "0px
    ]
    })

     此函数中有一个很重要的操作就是options = $.extend($defaultOptions,$options);

    所以我们可以调一些没有的参数(????猜测 因为不知道callback函数怎么来的)如:

    Fast.api.open("www.fastadmin.net", "FastAdmin", {
        callback:function(value){
            在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传数据
        },
        aaa:function(){},
        bbb={1,2},
        ccc='tom'
    });

    1.标题区域
    用于显示弹出层的标题,配置title即可

    2.内容区域
    用于展示url对应的页面的内容,此处嵌入的urliframe,也就是说弹出窗口的正文是通过iframe显示的,那么正文部分相当于完全新开一个页面。

    3.操作区域
    这个区域比较特殊,FastAdmin做了许多定制化,显示的内容从url对应的页面中的layer-footer区域内的内容复制到外部显示的。也就是说这部分的内容我们完全可以自定义,只需要修改url页面对应layer-footer区域内的内容即可。这里需要注意下这部分的内容会随着页面中layer-footer区域内的内容变化而变化,事件也会随之响应。

    常用示例

    打开一个弹窗并接收回传数据

    Fast.api.open("www.fastadmin.net", "FastAdmin", {
        callback:function(value){
            在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传数据
        }
    });

    表单提交成功后不关闭弹窗

    Form.api.bindevent("form[role=form]", function(data, ret){
        //这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
        return false;
    });

    定义在public/assets/js/fast.js

    Fast.config
    Fast.events
    Fast.lang
    Fast.init
    Fast.api.ajax
    Fast.api.fixurl
    Fast.api.cdnurl
    Fast.api.query
    Fast.api.open
    Fast.api.close
    Fast.api.layerfooter
    Fast.api.success
    Fast.api.error
  • 相关阅读:
    优化SQL Server数据库的经验总结
    #main和.main区别
    通过SQL把n条记录插入表中
    11月6日到8日参加微软Tech.ED2008大会
    NOIP2017 D2T1奶酪
    NOIP2017 D1T2时间复杂度
    NOIP2017 D2T2宝藏
    NOIP2017 D1T1小凯的疑惑
    NOIP2017 D1T3逛公园
    NOIP2017 D2T3列队
  • 原文地址:https://www.cnblogs.com/lichihua/p/10484542.html
Copyright © 2011-2022 走看看