Dữ liệu sử dụng được kết nối với maimai.vn demo
Trong dịch vụ quản lý maimai.vn, bạn chọn menu Truyền thông -> Tin tức
HTML<div class="demo"> <div class="header"> <div class="block"> Hiển thị:<br /> <select id="showBy" onchange="list()"> <option value="2">2 tin/mục</option> <option value="4" selected="selected">4 tin/mục</option> <option value="10">10 tin/mục</option> </select> </div> <div style="clear:both;"></div> </div> <ul class="top-news-list" id="nlist"></ul> </div> <!--JSRender templates--> <script id="listTemplate" type="text/x-jsrender"> <li> {{for}} {{if #index == 0}} <div class="header"><a href="newslist/{{:categoryURL}}">{{:categoryName}}</a></div> <div class="first"> <a href="news/{{:seoURL}}"><img src="{{:thumb}}" /></a> <div class="content"> <div class="title"><a href="news/{{:seoURL}}">{{:title}}</a></div> <div class="datetime">{{>~formatDatetime(creationDate)}}</div> {{>~formatString(description, 140)}} </div> </div> <ul class="second"> {{else}} <li><a href="news/{{:seoURL}}">{{:title}}</a></li> {{/if}} {{/for}} </ul><div style="clear:both"></div> </li> </script>
Javascript/CSS<link href="//api.maimai.vn/content/demo.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//api.maimai.vn/scripts/mget.js"></script> <script src="//api.maimai.vn/scripts/jsrender.js"></script> <script> $.views.helpers({ formatString: function (str, length) { return str ? (str.length > length ? str.substr(0, length - 3) + '...' : str) : ''; }, formatDatetime: function (date) { return mHelper.formatDatetime(date, 'dd/MM/yyyy hh:mm'); } }); var categories = [4, 5]; var settings = { company: 'demo', apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d', container: 'nlist', template: 'listTemplate' } $(document).ready(function () { list(); }); function list() { settings.pageSize = $('#showBy').val(); mNews.listByCategories(categories, settings); } </script>
Xem thêm mô tả API