zoukankan      html  css  js  c++  java
  • layUI实现可选项 弹框

    需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作。先摆效果图。

    代码:

    //html代码
    <style>
    #imp{
    display: none;
    }
    </style>

    <div class="btn-group">
    <div class="btn-group">
    <button class="btn sbold blue" id="insert" onclick=""><span class="ladda-label">插入</span></button>
    </div>
    </div>
    <div id="imp" style="text-align:center;">
    <button class="btn sbold default" id="pz" onclick="insertImg('examFile');" style=" margin-top: 50px" >
    <span class="ladda-label">插入图片</span>
    </button>
    <input type="hidden" value="" id="flag" />
    <button class="btn sbold default" id="" onclick="insertMus('excamFile')" style="margin-top: 50px">
    <span class="ladda-label">插入音乐</span>
    </button>
    </div> 

    <div class="form-group">
    <div>
    <input id="examFile" name="examFile" type="file" multiple="multiple"/>
    </div>
    </div>
    //js代码
    function initUpload(ctrlName) {
    $('#flag').val('1');
    $('#flag').text(ctrlName);
    }
    function pzUpload(ctrlName) {
    $('#flag').val('2');
    $('#flag').text(ctrlName);
    }

    $("#insert").click(function (fun) {
    var id= $("table input[type=checkbox]:checked").val()
        var imp=$('#imp')
    if (id != undefined && !id ==''){
    var index= layer.open({
    title:'请选择插入类型',
    type: 1,
    area: ['300px', '200px'],
    content:imp,
    btn: ['确定','返回'],
    yes: function (index, layero) {
    var ctrlName;
    var control;
    var url;
    var title;
    var searchServPath;
    if ($('#flag').val() != '') {
    if ($('#flag').val() == '1') {
    ctrlName = $('#flag').text();
    control = $('#' + ctrlName);
    url = '/vraxx/exam/upload';
    $('#title').text("插入图片")
    }
                  
    $("#examFile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
    //
                    //
                    //
    });
    layer.close(index);
    } else {
    layer.msg('请选择插入类型');
    }
    }
    });

    }

    }) 

     说明:area可以用百分比值来表示比如说: area['70%', '30%']   另外yes函数可以来写一些业务代码  最后就是 content内容,要注意,现在html中设计好,然后获取到div的节点,就可以展示了

    总结:layUI有很多很多更加方便的一些内容,一点一点总结下来,进步ing。

  • 相关阅读:
    KMP算法
    cocos2d-x jsbinding 在线更新策略设计
    AS3动画效果公式,常用处理公式代码,基本运动公式,三角公式
    理解引导行为:路径跟踪
    适用于任何语言的编程策略
    Using中return对象
    js计算两个时间相差天数
    fastReport 绑定DataBand数据源后还是打印出一条数据
    无法处理文件 MainForm.resx,因为它位于 Internet 或受限区域中,或者文件上具有 Web 标记。要想处理这些文件,请删除 Web 标记
    附加数据库后登陆报错
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/10008233.html
Copyright © 2011-2022 走看看