記錄新的學習之LayUi-07pannel面板相關

阿新 • • 發佈：2020-10-14

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>圖示</title>
    <%--引入css樣式--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <style>
        .grid-demo{
            height: 80px;
            background 
-color: #00F7DE;
        }
        .grid-demo-bg1{
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<%--引入js檔案--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>始終等比例水平排列</legend>
</fieldset>

<div class 
="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">6/12</div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">6/12</div>
    </div>
</div>
<div class="layui-row">
    <div class 
="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
</div>

<script>
    //注意：摺疊面板 依賴 element 模組，否則無法進行功能性操作
    layui.use('element', function(){
        var element = layui.element;
        element.on('collapse(filter)', function(data){
            console.log(data.show); //得到當前面板的展開狀態，true或者false
            console.log(data.title); //得到當前點選面板的標題區域DOM物件
            console.log(data.content); //得到當前點選面板的內容區域DOM物件
        });
        //…
    });
</script>

</body>
</html>

相關樣式:

layui-row:代表行，

layui-col-xs6 :移動裝置佔比

layui-col-sm6：平板裝置佔比

layui-col-md4 :電腦裝置佔比

記錄新的學習之LayUi-07pannel面板相關

<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\" %> <html> <head> <title>圖示</title>

記錄新的學習之LayUi-06pannel面板相關

1:卡片面板 <div style=\"padding: 20px; background-color: #F2F2F2;\"> <div class=\"layui-row layui-col-space15\">

記錄新的學習之LayUi-05progress進度條相關

<fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 20px;\"> <legend>預設風格的進度條</legend>

記錄新的學習之LayUi-02Button

從官網上覆制原始碼檢視 <%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\" %>

前端學習之layui照片檢視器縮放

前言 layui的彈出層有個layer.photos()的照片檢視器方法，用該方法可以很方便的進行照片的預覽，具體的使用方法參考官方文件就好；現在主要就是介紹如何對預覽的圖片進行滑鼠滾輪的放大縮小，直接上程式碼吧！

Dynamics CRM 2015/2016新特性之二十：Web API介紹及使用它建立記錄

關注本人微信和易信公眾號：微軟動態CRM專家羅勇，回覆203或者20160309可方便獲取本文，同時可以在第一間得到我釋出的最新的博文資訊，follow me！

Dynamics CRM 2015/2016新特性之二十一：使用Web API查詢記錄

關注本人微信和易信公眾號：微軟動態CRM專家羅勇，回覆204或者20160310可方便獲取本文，同時可以在第一間得到我釋出的最新的博文資訊，follow me！

淺談C# 9.0 新特性之只讀屬性和記錄

大家好，這是 C# 9.0 新特性系列的第 4 篇文章。熟悉函數語言程式設計的童鞋一定對“只讀”這個詞不陌生。為了保證程式碼塊自身的“純潔”，函數語言程式設計是不能隨便“弄髒”外來事物（引數、變數等）的，所以“

layui學習之13table表格資料監聽事件

1：監聽頭部工具欄事件點選頭部工具欄區域設定了屬性為lay-event=\"\"的元素時觸發（該事件為 layui 2.4.0 開始新增）。如：

菜雞程式媛，又開始了新的一輪程式碼學習之路！！！（JAVA真香）

菜雞程式媛，又開始了新的一輪程式碼學習之路！！！我開啟java入門視訊已經第三次了，（事不過三，這次，姐妹一定要看完！）

【Dart學習】--Dart之字串(String)的相關方法總結

字串定義使用單引號或雙引號 String a = \"abcdefg\"; String b = \'12345\'; 建立多行字串,保留內在格式使用三個單引號或三個雙引號建立多行字串,保留內在格式，如換行和縮排等，裡面寫什麼輸出就是什麼。

09訊號學習之訊號集相關函式的使用案例(重要)

技術標籤：Linux訊號的學習linux 1 訊號集相關函式的使用案例 #include <signal.h>

ssh相關問題記錄與學習

技術標籤：linux 遇到的問題報錯：在命令列ssh登入時 PS C:\\Users\\Hasee> ssh [email protected] -p xxxxx

爆料稱《堡壘之夜》即將開啟新活動推出閃電俠面板

熟悉《堡壘之夜》的玩家都知道，《堡壘之夜》是個名副其實的“聯動狂魔”。在目前的第二章第五賽季中，我們已經見到了諸多知名角色的加入，例如終結者，鐵血戰士，士官長，奎託斯等。不過據最新的爆料，我們有望在近

html學習之html5新標籤

html5新標籤 2. 新的語義結構元素標籤名display說明 article block 定義文件中的文章。沒有特殊樣式

FastAPI 學習之路（二十）介面文件配置相關

　系列文章：　　FastAPI 學習之路（一）fastapi--高效能web開發框架　　FastAPI 學習之路（二）

千鋒重慶Java學習之2021年3個新的可嘗試的java工具

儘管java語言已經存在超過25年了，但Java總有新的趨勢、工具和框架可以增強你的應用程式和職業生涯。

Photoshop2021入門教程」歷史記錄面板相關基礎功能介紹

Photoshop是設計入門必學軟體之一,新手要如何入門呢?下面小編分享一下PS 2021基礎教程，今天為大家帶來的是歷史記錄面板以及核心基礎相關知識介紹，瞭解一下，幫您快速入門。

ES5的新特徵之新增物件的API和JSON相關PAI的應用

1.ES5新增物件 Object.create(prototype,[descriptors]) Object.deafineProperties(object, descriptors) Object.deafineProperty(obj, prop, descriptor)

PGL圖學習之基於GNN模型新冠疫苗任務[系列九]

PGL圖學習之基於GNN模型新冠疫苗任務[系列九] 專案連結：https://aistudio.baidu.com/aistudio/projectdetail/5123296?contributionType=1

記錄新的學習之LayUi-07pannel面板相關

相關推薦