使用简单，功能完善的时间线组件，有预览图代码,JS代码库,德仔网

代码语言

代码分类

【JS】使用简单，功能完善的时间线组件，有预览图

作者:Mr.Zheng / 发布于2013/10/11/ 355


	组件文档：http://gallery.kissyui.com/yearline/1.0/guide/index.html

	1、组件以年为单位，组件底部标识从【1月】-【12月】
	2、时间线只显示开始和半月刻度
	3、组件支持【拖动定位】、【点击定位】、【指定月份定位】、【放大/缩小】等功能

	

	<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>

	<div class="J_TimeLine" style="width: 100%;height: 200px;background-color: #444;"></div>

	// 首先请确保页面引入了kissy.js
	// http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js
	var chars = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var len = chars.length;
	var max = len - 30;
	var arr = [];

	function fillDoub(num) {
	 return num < 10 ? "0" + num : num;
	}

	for (var i = 0; i < 15; i++) {
	 var date = "2013/" + fillDoub(Math.round(Math.random() * 11) + 1) + "/" + fillDoub(Math.round(Math.random() * 27) + 1);
	 var title = chars.substr(Math.round(Math.random() * max), Math.round(Math.random() * 29) + 1);
	 arr.push({
	 date: date,
	 title: title,
	 icon: "http://lorempixel.com/24/24/nature/" + Math.round(Math.random() * 9 + 1) + "/",
	 detail: date + "，" + title + title
	 });
	}

	KISSY.use('gallery/yearline/1.0/index,gallery/yearline/1.0/index.css', function (S, Timeline) {
	 var tl = new Timeline(".J_TimeLine", {
	 scale: 1.5,
	 month: 6
	 });
	 tl.render({
	 "pluginTitle": "2013大事记",
	 events: arr
	 });
	})

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　时间线组件　

同语言下

可能有用的

Mr.Zheng贡献的其它代码(1)

.使用简单，功能完善的时间线组件，有预览图