面板——卡片面板、常规折叠面板、手风琴折叠
生活随笔
收集整理的這篇文章主要介紹了
面板——卡片面板、常规折叠面板、手风琴折叠
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 卡片面板
2. 普通折疊面板?
3. 手風琴面板
在普通面板上加 lay-accordion=""<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>面版</title> <link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>卡片面板</legend></fieldset><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 class="layui-col-md12"><div class="layui-card"><div class="layui-card-header">標題</div><div class="layui-card-body">內容</div></div></div></div></div><fieldset class="layui-elem-field layui-field-title"style="margin-top: 30px;"><legend>常規折疊面板</legend></fieldset><div class="layui-collapse" lay-filter="test" lay-accordion=""><div class="layui-colla-item "><h2 class="layui-colla-title">為什么JS社區大量采用未發布或者未廣泛支持的語言特性？</h2><div class="layui-colla-content layui-show"><p>有不少其他答案說是因為JS太差。我下面的答案已經說了，這不是根本性的原因。但除此之外，我還要糾正一些對JS具體問題的誤解。JS當初是被作為腳本語言設計的，所以某些問題并不是JS設計得差或者是JS設計者的失誤。比如var的作用域問題，并不是“錯誤”，而是當時絕大部分腳本語言都是這樣的，如perl/php/sh等。模塊的問題也是，腳本語言幾乎都沒有模塊/命名空間功能。弱類型、for-in之類的問題也是，只不過現在用那些老的腳本語言的人比較少，所以很多人都誤以為是JS才有的坑。另外有人說JS是半殘語言，滿足不了開發需求，1999年就該死。半殘這個嘛，就夸張了。JS雖然有很多問題，但是設計總體還是優秀的。——來自知乎@賀師俊</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">為什么前端工程師多不愿意用 Bootstrap 框架？</h2><div class="layui-colla-content"><p>因為不適合。如果希望開發長期的項目或者制作產品類網站，那么就需要實現特定的設計，為了在維護項目中可以方便地按設計師要求快速修改樣式，肯定會逐步編寫出各種業務組件、工具類，相當于為項目自行開發一套框架。——來自知乎@Kayo</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">layui 更適合哪些開發者？</h2><div class="layui-colla-content"><p>在前端技術快速變革的今天，layui仍然堅持語義化的組織模式，甚至于模塊理念都是采用類AMD組織形式，并非是有意與時代背道而馳。layui認為以jQuery為核心的開發方式還沒有到完全消亡的時候，而早期市面上基于jQuery的UI都普通做得差強人意，所以需要有一個新的UI去重新為這一領域注入活力，并采用一些更科學的架構方式。<br><br> 因此準確地說，layui 更多是面向那些追求開發簡單的前端工程師們，以及所有層次的服務端程序員。</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">賢心是男是女？</h2><div class="layui-colla-content"><p>man！ 所以這個問題不要再出現了。。。</p></div></div></div><script src="resources/layui/layui.js"></script><script type="text/javascript">layui.use([ 'element', 'jquery' ], function() {var $ = layui.jquery;var element = layui.element;element.on('collapse(test)', function(data){console.log(data.show); //得到當前面板的展開狀態，true或者falseconsole.log(data.title); //得到當前點擊面板的標題區域DOM對象console.log(data.content); //得到當前點擊面板的內容區域DOM對象});});</script></body> </html>
?
總結
以上是生活随笔為你收集整理的面板——卡片面板、常规折叠面板、手风琴折叠的全部內容，希望文章能夠幫你解決所遇到的問題。
