riot写一个timeline标签

标签"/>

riot写一个timeline标签

riot写timeline标签步骤

1. 写timeline的显示html;
2. 写javascript,对一些参数进行处理和一些事件进行处理；

<div class="timeline-centered timeline-sm"><article class="timeline-entry {i%2!=0?'left-aligned':''}" each={item,i in items}><div class="timeline-entry-inner " ><time class="timeline-time" datetime="{item.datetime}"><span>{new Date(item.datetime).format("hh:mm:ss")||'time missing'}</span><span>{new Date(item.datetime).format("MM/dd/yyyy")||'date missing'}</span></time><div class="timeline-icon {item.iconcolor||'bg-violet'}"><i class="{item.icon||'fa fa-exclamation'}"></i></div><div class="timeline-label {item.background}"><h4 class="timeline-title">{item.title||'Title missing'}</h4><p><raw content="{item.description||'description missing'}"</p></div></div><div class="timeline-entry-inner" if={i==items.length-1}><div class="timeline-icon" style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);" if={!editable}><i class="fa fa-circle"></i></div><div class="timeline-icon" style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);" if={editable}><a href="#" οnclick="{add}"><i class="fa fa fa-plus"></i></a></div></div></article>    </div>

<script>this.items=opts.items;   this.editable=opts.editable;if(!this.items||this.items.length==0){this.items=[{datetime:"2016-4-1 11:32:20",icon:"fa fa-exclamation",iconcolor:"bg-violet",background:"",title:"Start Project",description:"Project description here..."},{datetime:"2016-7-12 1:32:20",icon:"fa fa-group",iconcolor:"bg-green",background:"bg-green",title:"Job Meeting",description:"Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette."},{datetime:new Date(),icon:"fa fa-paper-plane",iconcolor:"bg-orange",background:"bg-orange",title:"Daily Feeds",description:'<img class="timeline-img pull-left" alt="" src="/">Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.'}];}add(){opts.trigger("add");}Date.prototype.format = function(format) {var o = {"M+" : this.getMonth() + 1, // month"d+" : this.getDate(), // day"h+" : this.getHours(), // hour"m+" : this.getMinutes(), // minute"s+" : this.getSeconds(), // second"q+" : Math.floor((this.getMonth() + 3) / 3), // quarter"S" : this.getMilliseconds()// millisecond};if (/(y+)/.test(format))format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for ( var k in o)if (new RegExp("(" + k + ")").test(format))format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]	: ("00" + o[k]).substr(("" + o[k]).length));return format;};</script>

<timeline></timeline>

• 加载  riot.mount('timeline');
  
• 渲染 riot.render('')
  
• 更新  riot.update()
• 卸载 riot.unmount()

<script type="riot/tag" src="./timeline.tag"></script>		<script>$(document).ready(function(){var param={editable:true};param.items=[{datetime:"2016-4-1 11:32:20",icon:"",iconcolor:"",background:"",title:"Start Project",description:"Project description here..."},{datetime:"2016-7-12 1:32:20",icon:"fa fa-group",iconcolor:"bg-green",background:"bg-green",title:"Job Meeting",description:"Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette."},{datetime:"2016-10-01 10:30:30",icon:"fa fa-group",iconcolor:"bg-red",background:"bg-red",title:"traveling",description:"traveling in wuhan with many friends."},];riot.observable(param);riot.mount("*",param);	param.on("add",function(){var addItem = {datetime:new Date(),icon:"fa fa-paper-plane",iconcolor:"bg-orange",background:"bg-orange",title:"Daily Feeds",description:'<img class="timeline-img pull-left" alt="" src="/">Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.'};param.items.push(addItem);})});</script>