MUI - list（列表/圖文列表）

原文地址：http://www.hcoder.net/tutorials/info_90.html

1、普通列表
列表是常用的UI控件，mui封裝的列表組件比較簡單，只需要在ul節點上添加.mui-table-view類、在li節點上添加.mui-table-view-cell類即可，如下為示例代碼

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

若右側需要增加導航箭頭，變成導航鏈接，則只需在li節點下增加a子節點，並為該a節點增加.mui-navigate-right類即可，如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li>
    <li class="mui-table-view-cell"><a class="mui-navigate-right">Item 2</a></li>
    <li class="mui-table-view-cell"><a class="mui-navigate-right">Item 3</a></li>
</ul>

mui支持將數字角標、按鈕、開關等控件放在列表中；mui默認將數字角標放在列表右側顯示，代碼如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1<span class="mui-badge mui-badge-primary">11</span></li>
    <li class="mui-table-view-cell">Item 2<span class="mui-badge mui-badge-success">22</span></li>
    <li class="mui-table-view-cell">Item 3<span class="mui-badge">33</span></li>
</ul>

2、圖文列表

 

 圖文列表繼承自列表組件，主要添加了.mui-media、.mui-media-object、.mui-media-body幾個類，如下為示例代碼：

<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="imgs/1.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-left" src="imgs/1.jpg">
      <div class="mui-media-body">
          木屋
        <p class='mui-ellipsis'>想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
      </div>
    </a>
  </li>
</ul>