AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件實(shí)現(xiàn)

折疊式卡片布局在PC版網(wǎng)站中可能不常見(jiàn),但是在手機(jī)版,小屏幕的網(wǎng)頁(yè)瀏覽會(huì)大發(fā)異彩。
AmazeUI也提供了折疊式卡片布局,雖然官網(wǎng)上有例子,但是這種折疊式卡片布局,整合內(nèi)容列表、表格組件還是需要一番功夫。
比如如下圖,利用AmazeUI的折疊式卡片布局,整合其提供的內(nèi)容列表與表格組件。
整個(gè)頁(yè)面的代碼如下:
<!--使用HTML5開(kāi)發(fā)--> <!doctype html> <html class="no-js"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--自動(dòng)適應(yīng)移動(dòng)屏幕--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--優(yōu)先使用webkit內(nèi)核渲染--> <meta name="renderer" content="webkit"> <!--不要被百度轉(zhuǎn)碼--> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!--以下才是引入amazeui資源--> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> <!--引入js的時(shí)候要注意,必須先引入jQuery,再引入amazeui,因?yàn)檫@個(gè)框架是基于jQuery開(kāi)發(fā)的--> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/amazeui.min.js"></script> <title>折疊式布局下的內(nèi)容列表、表格</title> </head> <body> <h1>折疊式卡片布局</h1> <div data-am-widget="accordion" class="am-accordion am-accordion-gapped"> <!--這里是表示標(biāo)題的背景顏色是灰色--> <dl class="am-accordion-item am-active"> <dt class="am-accordion-title">卡片1-文字</dt> <!--這里表示這個(gè)面板默認(rèn)是打開(kāi)狀態(tài)--> <dd class="am-accordion-bd am-collapse am-in"> <div class="am-accordion-content"> <!--內(nèi)容在這里寫--> 純屬文字 </div> </dd> </dl> <dl class="am-accordion-item"> <dt class="am-accordion-title">卡片2-內(nèi)容列表</dt> <dd class="am-accordion-bd am-collapse"> <!--如果這個(gè)折疊式布局里面用到的不是純屬的文件,必須加上一個(gè)margin-bottom:-20px削去底部的空白--> <!--用到內(nèi)容列表的話,無(wú)須加class="am-accordion-content"屬性--> <div style="margin-bottom:-20px"> <div class="am-list-news-bd"> <ul class="am-list"> <li class=" am-list-item-dated"> <a href="##" class="am-list-item-hd">標(biāo)題1</a> <span class="am-list-date">2015-05-12</span> </li> <li class=" am-list-item-dated"> <a href="##" class="am-list-item-hd">超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)標(biāo)題2</a> <span class="am-list-date">2015-05-12</span> </li> <li class=" am-list-item-dated"> <a href="##" class="am-list-item-hd">標(biāo)題3</a> <span class="am-list-date">2015-05-12</span> </li> </ul> </div> </div> </dd> </dl> <dl class="am-accordion-item"> <dt class="am-accordion-title">卡片3-表格</dt> <dd class="am-accordion-bd am-collapse "> <!--am-table-bordered代表表格列與列之間有線劃分,am-table-striped代表表格灰白相間--> <div class="am-accordion-content" style="margin-bottom:-20px"> <table class="am-table am-table-radius am-table-striped"> <thead> <tr> <!--這里與HTML一樣,必須設(shè)置好每一行的表格寬度--> <th width="33%">表頭1</th> <th width="33%">表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>內(nèi)容1</td> <td>超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2</td> <td>內(nèi)容3</td> </tr> <tr> <td>內(nèi)容1</td> <td>超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2</td> <td>內(nèi)容3</td> </tr> <tr> <td>內(nèi)容1</td> <td>超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2</td> <td>內(nèi)容3</td> </tr> </tbody> </table> </div> </dd> </dl> </div> </body> </html>
關(guān)鍵的地方,注釋都有注釋了。也提供了超長(zhǎng)內(nèi)容的處理方式。
dl-dt-dd是HTML中原生態(tài)的列表布局,與ul-li這一組是一樣地位,但是用得少,可能給人淡忘了。
如果AmazeUI的折疊式卡片布局里面要整合組件,必須移除底部那20px的留白,否則很難看的。感覺(jué)這個(gè)組件專門為文字設(shè)置的,框架的原義不希望你整合東西。
同時(shí)表格注意設(shè)置好第一行的各個(gè)寬度,以規(guī)定好各行。
到此這篇關(guān)于AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)AmazeUI折疊式卡片布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
amazeui 驗(yàn)證按鈕擴(kuò)展的實(shí)現(xiàn)
這篇文章主要介紹了amazeui 驗(yàn)證按鈕擴(kuò)展的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-21前后端結(jié)合實(shí)現(xiàn)amazeUI分頁(yè)效果
這篇文章主要介紹了前后端結(jié)合實(shí)現(xiàn)amazeUI分頁(yè),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-21AmazeUI 加載進(jìn)度條的實(shí)現(xiàn)示例
這篇文章主要介紹了AmazeUI 加載進(jìn)度條的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-08-20- 這篇文章主要介紹了amaze ui 的使用詳細(xì)教程,本文通過(guò)多種方法給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-19
AmazeUI中模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了AmazeUI中模態(tài)框的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-19- 這篇文章主要介紹了Amaze UI 文件選擇域的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-26