• 【Layui】06 面板 Panel


    文档地址:

    https://www.layui.com/doc/element/panel.html

    演示案例:

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">杜甫</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">李清照</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">鲁迅</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
    </div>
    
    <script>
        //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            let element = layui.element;
        });
    </script>

    【面板风格】

    1、卡片面板 layui-card
    2、折叠面板 layui-collapse
    3、手风琴面板 layui-collapse lay-accordion

    折叠和手风琴的区别在于:

    手风琴永远只展示当前选中的面板,而折叠面板会保留所有选中的

    【卡片面板】

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        卡片式面板面板通常用于非白色背景色的主体内<br>
                        从而映衬出边框投影
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        结合 layui 的栅格系统<br>
                        轻松实现响应式布局
                    </div>
                </div>
            </div>
        </div>
    </div>

    最外层是使用了一个DIV作为一个背景,因为默认网页背景是白色的,

    这样渲染面板效果不好,看不出来

    <div style="padding: 20px; background-color: #F2F2F2;">

    第二层使用了一个类似表格的属性,似乎layui按照表格的方式对我们的面板进行排版

    设置了一个行,并且规定列空间为15【划分12等分】

    <div class="layui-row layui-col-space15">

    随后就是列属性

    <div class="layui-col-md6">

    在列属性里面才是我们的面板内容:

                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        卡片式面板面板通常用于非白色背景色的主体内<br>
                        从而映衬出边框投影
                    </div>
                </div>

    卡片面板属性:

    用于渲染一个容器元素为面板

    layui-card

    面板标题头属性:

    面板的头部信息,即面板标题

    layui-card-header

    面板体内容属性:

    展示面板主体内容

    layui-card-body

    【折叠面板】

    即刚开始的演示案例

    折叠面板的容器属性:

    <div class="layui-collapse">

    折叠面板的选项属性:

    <div class="layui-colla-item">

    折叠面板的标题属性:

    <h2 class="layui-colla-title">

    折叠面板的内容属性:

    <div class="layui-colla-content layui-show">内容区域</div>

    【手风琴面板】

    就是在折叠面板的基础上多设置了这个属性:

    其他都是一样的

    <div class="layui-collapse" lay-accordion>

    标记默认展开属性:

    设置在标记为面板内容元素中

    layui-show

    【折叠面板的监听】

    文档地址:

    https://www.layui.com/doc/modules/element.html#collapse

    案例:

    <div class="layui-collapse" lay-filter="aaa">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">杜甫</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">李清照</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">鲁迅</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
    </div>
    
    <script>
        //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
        layui.use(['element','jquery'], function(){
            let element = layui.element;
            let $ = layui.jquery;
    
            element.on('collapse(aaa)', function(data){
                console.log(data.show); //得到当前面板的展开状态,true或者false
                console.log(data.title); //得到当前点击面板的标题区域DOM对象
                console.log(data.content); //得到当前点击面板的内容区域DOM对象
            });
        });
    </script>

    布局 Grid栅格 文档地址:

    https://www.layui.com/demo/grid.html
  • 相关阅读:
    【洛谷2904/BZOJ1617】[USACO08MAR]跨河River Crossing(动态规划)
    【洛谷4158/BZOJ1296】[SCOI2009]粉刷匠(动态规划)
    stat()函数--------------获取文件信息
    mysql数据库优化
    sql注入原理以及实例
    配置Tomcat 7 Gzip
    NDK环境搭建方法2
    IIS7.0上传在大小限制
    背景图片的运动
    时间戳的转换
  • 原文地址:https://www.cnblogs.com/mindzone/p/13402742.html
Copyright © 2020-2023  润新知