Amaze UI

Web 组件

List 内容列表


内容列表组件。

组件演示

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="##">
          <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>

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="###">
          <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>

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="###">
          <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>

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="###">
          <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/">
            <img src="http://amazeui.p2hp.com/static/images/008.jpg" alt="我很囧,你保重....晒晒旅行中的那些囧!"/>
          </a>
        </div>

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11614662/">我很囧,你保重....晒晒旅行中的那些囧!</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/">
            <img src="http://amazeui.p2hp.com/static/images/001.jpg" alt="我最喜欢的一张画"/>
          </a>
        </div>

        <div class=" am-list-main">
            <h3 class="am-list-item-hd"><a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</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/">
            <img src="http://amazeui.p2hp.com/static/images/002.jpg" alt="“你的旅行,是什么颜色?” 晒照片,换北欧梦幻极光之旅!"/>
          </a>
        </div>

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


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

        </div>
      </li>

    
    
    
    
    </ul>
  </div>

    </div>

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="###">
          <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/">
            <img src="http://amazeui.p2hp.com/static/images/008.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/">我很囧,你保重....晒晒旅行中的那些囧!</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/">
            <img src="http://amazeui.p2hp.com/static/images/001.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/">我最喜欢的一张画</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/">“你的旅行,是什么颜色?” 晒照片,换北欧梦幻极光之旅!</a></h3>

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

        </div>
      </li>

    
    </ul>
  </div>

    </div>

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="###">
          <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/">我很囧,你保重....晒晒旅行中的那些囧!</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/">
              <img src="http://amazeui.p2hp.com/static/images/008.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/">我最喜欢的一张画</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/">
              <img src="http://amazeui.p2hp.com/static/images/001.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/">“你的旅行,是什么颜色?” 晒照片,换北欧梦幻极光之旅!</a></h3>


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

        </div>
      </li>

    </ul>
  </div>

    </div>

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="###">
          <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/">我很囧,你保重....晒晒旅行中的那些囧!</a></h3>
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://amazeui.p2hp.com/static/images/008.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/">我最喜欢的一张画</a></h3>
        <div class="am-u-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://amazeui.p2hp.com/static/images/001.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/">“你的旅行,是什么颜色?” 晒照片,换北欧梦幻极光之旅!</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>

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="###">
          <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/">我很囧,你保重....晒晒旅行中的那些囧!</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/">
            <img src="http://amazeui.p2hp.com/static/images/008.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/">我最喜欢的一张画</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/">
            <img src="http://amazeui.p2hp.com/static/images/001.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/">“你的旅行,是什么颜色?” 晒照片,换北欧梦幻极光之旅!</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>

使用方法

直接使用

  • 拷贝演示中的代码,粘贴到 Amaze UI HTML 模板(点此下载<body> 区域;
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 list_news,使用细节参照折叠面板组件

云适配 WebIDE

  • 将组件拖入编辑界面;
  • 点击右侧面板里的【数据采集】按钮,按以下格式采集数据。
var data = {
   // 列表标题
  "header": {
    "title": "最新文章",
    "link": "###",
    "moreText": "更多 >",
    "morePosition": "bottom"    // 更多链接位置 [bottom|top]
  },

  // 列表主要内容
  "main": [
    {
      "title": "",            // 新闻标题
      "link": "",             // 新闻链接
      "date": "",             // 日期
      "desc": "",             // 摘要信息,支持html
      "img": "",              // 缩略图地址

      // 数据接口
      "thumbAddition": "",    // 缩略图附加信息,可传 html,在thumb 模式下有效,显示在缩略图下面
      "mainAddition": ""      // 附加信息,可传 html,任何模式下都有效
    }
  ]
};

return data;

数据接口

{
  // id
  "id": "",

  // 自定义 class
  "className": "",

  // 主题
  "theme": "",

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

    // 当type为 thumb 时必传
    "thumbPosition": "bottom"
    // top-一般用于全宽模式
    // bottom - bottom-left | bottom-right
    // left - right
  },

  // 数据传递
  "content": {
    "header": {
      "title": "最新文章", // 栏目标题
      "link": "###",
      "className": "",
      "moreText": "更多 >", // 更多链接显示文字
      "morePosition": "bottom" // 【更多】链接位置,top、bottom,如果不设置则不显示更多链接
    },
    main: [
      {
        "title": "", // 新闻标题
        "link": "",  // 新闻链接
        "className": "",  // 自定 class
        "date": "",  // 日期
        "desc": "",  // 摘要信息,支持html
        "img": "", // 图片链接

        // 数据接口
        "thumbAddition": "", // 缩略图附加信息,可传 html,thumb 模式下有效,显示在缩略图下面
        "mainAddition": ""  // 附加信息,可传 html,任何模式下都有效
      }
    ]
}
侧栏导航
Amaze UI 微信
在微信上关注我们