码迷,mamicode.com
首页 > 其他好文 > 详细

layui前端框架

时间:2017-01-22 12:06:31      阅读:3350      评论:0      收藏:0      [点我收藏+]

标签:js代码   .com   效果   click   .text   jquer   参考   定义   html   

项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动)

html代码

要给这个标签绑定click方法

1 <a href=‘javascript:;‘ data-method=‘offset‘ data-type=‘auto‘ class=‘showMean‘>显示</a>

点击以后,显示这个页面

1 <div class="con-no-ma displayNo" id="con-no-ma">
2    显示页面
3 </div>

js代码

function showMean() {
    layui.use(‘layer‘,function () {
        var $ = layui.jquery, layer = layui.layer;

        //触发事件,这个相当于设置参数
        var active = {
            offset: function(othis){
                var type = othis.data(‘type‘)
                    ,text = othis.text();

                layer.open({
                    title:"数据关联",
                    type: 1,
                    offset: type, //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
                    id: ‘LAY_demo‘+type, //防止重复弹出
                    content: $("#con-no-ma"),  //在页面新定义,然后通过id绑定到这
                    btn: ‘关闭全部‘,
                    area: [‘1000px‘, ‘500px‘],
                    btnAlign: ‘c‘, //按钮居中
                    shade: 0, //不显示遮罩
                    //btn的方法
                    yes: function(){
                        layer.closeAll();                    
                    },
                    //右上角关闭按钮的方法
                    cancel: function(){
                        layer.closeAll();                 
                    }
                });
            }
        };
       
        //给指定标签绑定click事件
        $(‘ .showMean‘).on(‘click‘, function(){
            var othis = $(this), method = othis.data(‘method‘);
            active[method] ? active[method].call(this, othis) : ‘‘;
        });
    })
}

 

参考地址:http://www.layui.com/demo/layer.html

下载地址:http://www.layui.com/

layui前端框架

标签:js代码   .com   效果   click   .text   jquer   参考   定义   html   

原文地址:http://www.cnblogs.com/zhaobao1830/p/6339774.html

(2)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!