面板——卡片面板、常规折叠面板、手风琴折叠
生活随笔
收集整理的這篇文章主要介紹了
面板——卡片面板、常规折叠面板、手风琴折叠
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 卡片面板
2. 普通折疊面板?
3. 手風(fēng)琴面板
在普通面板上加 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">卡片式面板面板通常用于非白色背景色的主體內(nèi)<br> 從而映襯出邊框投影</div></div></div><div class="layui-col-md6"><div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">結(jié)合 layui 的柵格系統(tǒng)<br> 輕松實(shí)現(xiàn)響應(yīng)式布局</div></div></div><div class="layui-col-md12"><div class="layui-card"><div class="layui-card-header">標(biāo)題</div><div class="layui-card-body">內(nèi)容</div></div></div></div></div><fieldset class="layui-elem-field layui-field-title"style="margin-top: 30px;"><legend>常規(guī)折疊面板</legend></fieldset><div class="layui-collapse" lay-filter="test" lay-accordion=""><div class="layui-colla-item "><h2 class="layui-colla-title">為什么JS社區(qū)大量采用未發(fā)布或者未廣泛支持的語言特性？</h2><div class="layui-colla-content layui-show"><p>有不少其他答案說是因?yàn)镴S太差。我下面的答案已經(jīng)說了，這不是根本性的原因。但除此之外，我還要糾正一些對JS具體問題的誤解。JS當(dāng)初是被作為腳本語言設(shè)計(jì)的，所以某些問題并不是JS設(shè)計(jì)得差或者是JS設(shè)計(jì)者的失誤。比如var的作用域問題，并不是“錯(cuò)誤”，而是當(dāng)時(shí)絕大部分腳本語言都是這樣的，如perl/php/sh等。模塊的問題也是，腳本語言幾乎都沒有模塊/命名空間功能。弱類型、for-in之類的問題也是，只不過現(xiàn)在用那些老的腳本語言的人比較少，所以很多人都誤以為是JS才有的坑。另外有人說JS是半殘語言，滿足不了開發(fā)需求，1999年就該死。半殘這個(gè)嘛，就夸張了。JS雖然有很多問題，但是設(shè)計(jì)總體還是優(yōu)秀的。——來自知乎@賀師俊</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">為什么前端工程師多不愿意用 Bootstrap 框架？</h2><div class="layui-colla-content"><p>因?yàn)椴贿m合。如果希望開發(fā)長期的項(xiàng)目或者制作產(chǎn)品類網(wǎng)站，那么就需要實(shí)現(xiàn)特定的設(shè)計(jì)，為了在維護(hù)項(xiàng)目中可以方便地按設(shè)計(jì)師要求快速修改樣式，肯定會逐步編寫出各種業(yè)務(wù)組件、工具類，相當(dāng)于為項(xiàng)目自行開發(fā)一套框架。——來自知乎@Kayo</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">layui 更適合哪些開發(fā)者？</h2><div class="layui-colla-content"><p>在前端技術(shù)快速變革的今天，layui仍然堅(jiān)持語義化的組織模式，甚至于模塊理念都是采用類AMD組織形式，并非是有意與時(shí)代背道而馳。layui認(rèn)為以jQuery為核心的開發(fā)方式還沒有到完全消亡的時(shí)候，而早期市面上基于jQuery的UI都普通做得差強(qiáng)人意，所以需要有一個(gè)新的UI去重新為這一領(lǐng)域注入活力，并采用一些更科學(xué)的架構(gòu)方式。<br><br> 因此準(zhǔn)確地說，layui 更多是面向那些追求開發(fā)簡單的前端工程師們，以及所有層次的服務(wù)端程序員。</p></div></div><div class="layui-colla-item"><h2 class="layui-colla-title">賢心是男是女？</h2><div class="layui-colla-content"><p>man！ 所以這個(gè)問題不要再出現(xiàn)了。。。</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); //得到當(dāng)前面板的展開狀態(tài)，true或者falseconsole.log(data.title); //得到當(dāng)前點(diǎn)擊面板的標(biāo)題區(qū)域DOM對象console.log(data.content); //得到當(dāng)前點(diǎn)擊面板的內(nèi)容區(qū)域DOM對象});});</script></body> </html>
?
總結(jié)
以上是生活随笔為你收集整理的面板——卡片面板、常规折叠面板、手风琴折叠的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
