layuié¢æ¿ - 页é¢å ç´
程序员文章站
2022-05-13 23:50:53
...
<div class="layui-card">
<div class="layui-card-header">å¡çé¢æ¿</div>
<div class="layui-card-body">
å¡çå¼é¢æ¿é¢æ¿é常ç¨äºéç½è²èæ¯è²ç主ä½å
<br>
ä»èæ 衬åºè¾¹æ¡æå½±
</div>
</div>
å¦æä½ çç½é¡µéç¨çæ¯é»è®¤çç½è²èæ¯ï¼ä¸å»ºè®®ä½¿ç¨å¡çé¢æ¿ã
éè¿å¯¹å 容å ç´ è®¾ç½®class为 layui-show æ¥éæ©æ§åå§å±å¼æä¸ä¸ªé¢æ¿ï¼element 模åä¼èªå¨åç°ç¶æå¾æ ã
<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(){
var element = layui.element;
//â¦
});
</script>
å¨æå é¢æ¿çç¶å®¹å¨è®¾ç½®å±æ§ lay-accordion æ¥å¼å¯æé£ç´ï¼é£ä¹å¨è¿è¡æå æä½æ¶ï¼å§ç»åªä¼å±ç°å½åçé¢æ¿ã
<div class="layui-collapse" lay-accordion>
<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>
é¢æ¿çå ¨é¨ä»£ç å¦ä¸ï¼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注æï¼å¦æä½ ç´æ¥å¤å¶ææ代ç å°æ¬å°ï¼ä¸è¿°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">
<div class="layui-colla-item">
<h2 class="layui-colla-title">为ä»ä¹JS社åºå¤§ééç¨æªåå¸æè
æªå¹¿æ³æ¯æçè¯è¨ç¹æ§ï¼</h2>
<div class="layui-colla-content">
<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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>æé£ç´æå </legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
<div class="layui-colla-item">
<h2 class="layui-colla-title">layui æ´éååªäºå¼åè
ï¼</h2>
<div class="layui-colla-content layui-show">
<p>å¨å端ææ¯å¿«éåé©çä»å¤©ï¼layui ä»ç¶åæè¯ä¹åçç»ç»æ¨¡å¼ï¼çè³äºæ¨¡åç念é½æ¯éç¨ç±»AMDç»ç»å½¢å¼ï¼å¹¶éæ¯ææä¸æ¶ä»£èéèé©°ãlayui 认为以jQueryä¸ºæ ¸å¿çå¼åæ¹å¼è¿æ²¡æå°å®å
¨æ¶äº¡çæ¶åï¼èæ©æå¸é¢ä¸åºäºjQueryçUIé½æ®éåå¾å·®å¼ºäººæï¼æ以éè¦æä¸ä¸ªæ°çUIå»éæ°ä¸ºè¿ä¸é¢å注å
¥æ´»åï¼å¹¶éç¨ä¸äºæ´ç§å¦çæ¶ææ¹å¼ã
<br>
å æ¤åç¡®å°è¯´ï¼layui æ´å¤æ¯é¢åé£äºè¿½æ±å¼åç®åçå端工ç¨å¸ä»¬ï¼ä»¥åææå±æ¬¡çæå¡ç«¯ç¨åºåã</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">为ä»ä¹JS社åºå¤§ééç¨æªåå¸æè
æªå¹¿æ³æ¯æçè¯è¨ç¹æ§ï¼</h2>
<div class="layui-colla-content">
<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">è´¤å¿æ¯ç·æ¯å¥³ï¼</h2>
<div class="layui-colla-content">
<p>manï¼ æ以è¿ä¸ªé®é¢ä¸è¦ååºç°äºããã</p>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>é¢æ¿åµå¥</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
<div class="layui-colla-item">
<h2 class="layui-colla-title">æ豪</h2>
<div class="layui-colla-content layui-show">
<div class="layui-collapse" lay-accordion="">
<div class="layui-colla-item">
<h2 class="layui-colla-title">å代</h2>
<div class="layui-colla-content layui-show">
<div class="layui-collapse" lay-accordion="">
<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">
<p>æ®è¯´æ¯é©å½äºº</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">çå</h2>
<div class="layui-colla-content">
<p>åå¤ç»å±ãæ»çéåºã</p>
</div>
</div>
</div>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">å®ä»£</h2>
<div class="layui-colla-content">
<p>æ¯å¦èè½¼ãææ¸
ç
§</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">å½ä»£</h2>
<div class="layui-colla-content">
<p>æ¯å¦è´¤å¿</p>
</div>
</div>
</div>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">ç§å¦å®¶</h2>
<div class="layui-colla-content">
<p>ä¼å¤§çç§å¦å®¶</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">èºæ¯å®¶</h2>
<div class="layui-colla-content">
<p>æµèº«æ£åçèºæ¯ç»è</p>
</div>
</div>
</div>
<br>
<p>æ¯ææ éåµå¥ï¼åºç¨åºæ¯é常å¤ï¼</p>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注æï¼å¦æä½ ç´æ¥å¤å¶ææ代ç å°æ¬å°ï¼ä¸è¿°jsè·¯å¾éè¦æ¹æä½ æ¬å°ç -->
<script>
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
//çå¬æå
element.on('collapse(test)', function(data){
layer.msg('å±å¼ç¶æï¼'+ data.show);
});
});
</script>
</body>
</html>
上一篇: Java HashSet
下一篇: 136. Single Number