标签"/>
riot写一个timeline标签
riot写timeline标签步骤
- 写timeline的显示html;
- 写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整个生命周期:
- 加载 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>
更多推荐
riot写一个timeline标签
发布评论