MUI-list（列表），普通列表、帶箭頭列表、帶數字角標列表、帶圖文列表
阿新 • • 發佈：2018-12-28
本文主要介紹list(列表)的幾種展現形式：普通列表、帶箭頭列表、帶數字角標列表、帶圖文列表
效果圖如下：
1、普通列表：只需要在ul節點上新增.mui-table-view類、在li節點上新增.mui-table-view-cell類即可
2、帶箭頭列表：若右側需要增加導航箭頭，變成導航連結，則只需在li節點下增加a子節點，併為該a節點增加.mui-navigate-right類即可
3、帶數字角標列表：mui支援將數字角標、按鈕、開關等控制元件放在列表中；mui預設將數字角標放在列表右側顯示
4、帶圖文列表：主要添加了.mui-media、.mui-media-object 、.mui-media-body、.mui-pull-left/right幾個類
原始碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--標準mui.css--> <link rel="stylesheet" href="css/mui.min.css"> <!--App自定義的css--> <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--> <style> /*點選變藍色高亮*/ .mui-table-view-cell.mui-active{ background-color: #0062CC; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">list練習</h1> </header> <div class="mui-content"> <div class="mui-content-padded"> <h5>1、普通列表，點選背景色變藍</h5> <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> </ul> <h5>2、帶箭頭列表</h5> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> </ul> <h5>3、帶數字角標的列表</h5> <ul class="mui-table-view" style="margin-top:10px;"> <li class="mui-table-view-cell">Item 1 <span class="mui-badge">1</span> </li> <li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-blue">1</span> </li> <li class="mui-table-view-cell">Item 3 <span class="mui-badge mui-badge-inverted mui-badge-green">1</span> </li> </ul> <h5>4、圖文列表，圖片居左&居右</h5> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麼辦？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-right" src="images/cbd.jpg"> <div class="mui-media-body"> CBD <p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤一般.</p> </div> </a> </li> </ul> </div> </div> <script src="js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeBack: true //啟用右滑關閉功能 }); </script> </body> </html>