Amaze UI 2.4

Web Components

List

This widget helps to build lists of different styles.

TOC

Demos

Theme: default

栏目标题

更多 »
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="##" class="">
          <h2>栏目标题</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">

      <li class="am-g am-list-item-dated">
          <a href="##" class="am-list-item-hd ">我很囧，你保重....晒晒旅行中的那些囧！</a>

          <span class="am-list-date">2013-09-18</span>


      </li>
      <li class="am-g am-list-item-dated">
          <a href="##" class="am-list-item-hd ">我最喜欢的一张画</a>

          <span class="am-list-date">2013-10-14</span>


      </li>
      <li class="am-g am-list-item-dated">
          <a href="##" class="am-list-item-hd ">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>

          <span class="am-list-date">2013-11-18</span>


      </li>
  </ul>
  </div>

    </div>

Theme: default

栏目标题

查看更多 »
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>栏目标题</h2>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">

      <li class="am-g">
          <a href="http://www.douban.com/online/11614662/" class="am-list-item-hd ">我很囧，你保重....晒晒旅行中的那些囧！</a>



      </li>
      <li class="am-g">
          <a href="http://www.douban.com/online/11624755/" class="am-list-item-hd ">我最喜欢的一张画</a>



      </li>
      <li class="am-g">
          <a href="http://www.douban.com/online/11645411/" class="am-list-item-hd ">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>



      </li>
  </ul>
  </div>

  <!--更多在底部-->
      <div class="am-list-news-ft">
        <a class="am-list-news-more am-btn am-btn-default " href="###">查看更多 &raquo;</a>
      </div>
  </div>

Theme: default

栏目标题

更多 »
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>栏目标题</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">

      <li class="am-g am-list-item-desced">
          <a href="http://www.douban.com/online/11614662/" class="am-list-item-hd ">我很囧，你保重....晒晒旅行中的那些囧！</a>


          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

      </li>
      <li class="am-g am-list-item-desced">
          <a href="http://www.douban.com/online/11624755/" class="am-list-item-hd ">我最喜欢的一张画</a>


          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

      </li>
      <li class="am-g">
          <a href="http://www.douban.com/online/11645411/" class="am-list-item-hd ">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>



      </li>
  </ul>
  </div>

    </div>

Theme: default

缩略图在上方 + 摘要

更多 »
  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
  • 我最喜欢的一张画

    我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>缩略图在上方 + 摘要</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">
     <!--缩略图在标题上方-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-u-sm-12">
          <a href="http://www.douban.com/online/11614662/" class="">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
          </a>
        </div>

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/" class="">我很囧，你保重....晒晒旅行中的那些囧！</a></h3>


            <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-u-sm-12">
          <a href="http://www.douban.com/online/11624755/" class="">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>
          </a>
        </div>

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/" class="">我最喜欢的一张画</a></h3>


            <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-u-sm-12">
          <a href="http://www.douban.com/online/11645411/" class="">
            <img src="http://img3.douban.com/lpic/o638852.jpg" alt="“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！"/>
          </a>
        </div>

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11645411/" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>


            <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>

        </div>
      </li>

    
    
    
    
    </ul>
  </div>

    </div>

Theme: default

左图 + 摘要

更多 »
  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
  • 我最喜欢的一张画

    我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>左图 + 摘要</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">
    
    
    
     <!--缩略图在标题左边-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/" class="">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
          </a>
        </div>

        <div class=" am-u-sm-8 am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/" class="">我很囧，你保重....晒晒旅行中的那些囧！</a></h3>

            <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/" class="">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>
          </a>
        </div>

        <div class=" am-u-sm-8 am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/" class="">我最喜欢的一张画</a></h3>

            <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced">

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11645411/" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>

            <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>

        </div>
      </li>

    
    </ul>
  </div>

    </div>

Theme: default

缩略图在标题右边 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
    我很囧，你保重....晒晒旅行中的那些囧！

  • 我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
    我最喜欢的一张画

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>缩略图在标题右边 + 摘要</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">
    
    
    
    
     <!--缩略图在标题右边-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
        <div class=" am-u-sm-8 am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/" class="">我很囧，你保重....晒晒旅行中的那些囧！</a></h3>


            <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

        </div>
          <div class="am-u-sm-4 am-list-thumb">
            <a href="http://www.douban.com/online/11614662/" class="">
              <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
            </a>
          </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
        <div class=" am-u-sm-8 am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/" class="">我最喜欢的一张画</a></h3>


            <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

        </div>
          <div class="am-u-sm-4 am-list-thumb">
            <a href="http://www.douban.com/online/11624755/" class="">
              <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>
            </a>
          </div>
      </li>
      <li class="am-g am-list-item-desced">
        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11645411/" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>


            <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>

        </div>
      </li>

    </ul>
  </div>

    </div>

Theme: default

缩略图在标题下左 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！
    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！

  • 我最喜欢的一张画

    我最喜欢的一张画
    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>缩略图在标题下左 + 摘要</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">
    
     <!--缩略图在标题下方居左-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/" class="">我很囧，你保重....晒晒旅行中的那些囧！</a></h3>
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/" class="">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
          </a>
        </div>

        <div class=" am-u-sm-8  am-list-main">

            <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/" class="">我最喜欢的一张画</a></h3>
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/" class="">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>
          </a>
        </div>

        <div class=" am-u-sm-8  am-list-main">

            <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

        </div>
      </li>
      <li class="am-g am-list-item-desced">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11645411/" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>

        <div class=" am-list-main">

            <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>

        </div>
      </li>

    
    
    
    </ul>
  </div>

    </div>

Theme: default

缩略图在标题下右 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
    我很囧，你保重....晒晒旅行中的那些囧！

  • 我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
    我最喜欢的一张画

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <!--列表标题-->
    <div class="am-list-news-hd am-cf">
       <!--带更多链接-->
        <a href="###" class="">
          <h2>缩略图在标题下右 + 摘要</h2>
            <span class="am-list-news-more am-fr">更多 &raquo;</span>
        </a>
          </div>

  <div class="am-list-news-bd">
  <ul class="am-list">
    
    
     <!--缩略图在标题下方居右-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-right">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/" class="">我很囧，你保重....晒晒旅行中的那些囧！</a></h3>

        <div class=" am-u-sm-8 am-list-main">

            <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

        </div>
        <div class="am-list-thumb am-u-sm-4">
          <a href="http://www.douban.com/online/11614662/" class="">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-right">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/" class="">我最喜欢的一张画</a></h3>

        <div class=" am-u-sm-8 am-list-main">

            <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

        </div>
        <div class="am-list-thumb am-u-sm-4">
          <a href="http://www.douban.com/online/11624755/" class="">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced">
          <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11645411/" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>

        <div class=" am-list-main">

            <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>

        </div>
      </li>

    
    
    </ul>
  </div>

    </div>

Usage

Copy and Paste

  • Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
  • Replace the contents in examples with your own contents.

Using Handlebars

The Handlebars partial of this widget is list_news. See Accordion for more details.

Allmobilize WebIDE

  • Drag the widget to the edit interface;
  • Click the Data binding button on the right panel, and bind data using following format.
var data = {
   // Title
  "header": {
    "title": "News feed",
    "link": "###",
    "moreText": "More >",
    "morePosition": "bottom"    // Position of 'more' [bottom|top]
  },

  // Main Contents
  "main": [
    {
      "title": "",            // Title
      "link": "",             // Link
      "date": "",             // Date
      "desc": "",             // Abstract. Support html
      "img": "",              // Thumbnail URL

      // Data Interface
      "thumbAddition": "",    // Additional information shown at the bottom of the thumbnail. Support html. Only avaliable in thumb mode.
      "mainAddition": ""      // Additional information. Support html. Avaliable in all modes.
    }
  ]
};

return data;

Data Interface 

{
  // id
  "id": "",

  // Customized class name
  "className": "",

  // Theme
  "theme": "",

  "options": {
   // normal、thumb
    "type": "",

    // Required when type is thumb.
    "thumbPosition": "bottom"
    // top - Usually used in full width mode.
    // bottom - Bottom-left | bottom-right
    // left - Right
  },

  // Data
  "content": {
    "header": {
      "title": "News feed", // Title of the list
      "link": "###",
      "className": "",
      "moreText": "More >", // Text of 'more' link
      "morePosition": "bottom" // Position of 'more' [bottom|top]. Won't show 'more' link if this is not set.
    },
    main: [
      {
        "title": "", // Title of the content
        "link": "",  // Link
        "className": "",  // Customized class
        "date": "",  // Date
        "desc": "",  // Abstruct. Support html.
        "img": "",              // Thumbnail URL

        // Data Interface
        "thumbAddition": "",    // Additional information shown at the bottom of the thumbnail. Support html. Only avaliable in thumb mode.
        "mainAddition": ""      // Additional information. Support html. Avaliable in all modes.
      }
    ]
}
侧栏导航
×
Amaze UI 微信
在微信上关注我们