Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

在一个项目中，用到了时间轴展示产品的开发进度，为了更好用户体验，想到了Facebook的timeline效果，

搜了一下，找到了这个效果。结合asp.net和ajax异步加载数据。

先上效果图：

该效果使用了jquery、  jQuery Masonry 插件。大家可以自由发挥，再加上滚动加载效果就更好了。

参考这篇文章：[用 jQuery Masonry 插件创建瀑布流式的页面]

Demo萌点这里：百度网盘下载

http://pan.baidu.com/share/link?shareid=2913037399&uk=1765114824

asp.net C#后台代码：

 

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxPro;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
[AjaxMethod]
public List<TestData> getData()
{
List<TestData> list = new List<TestData>();
for (int i = 0; i < 50; i++)
{
TestData td = new TestData();
td.DateTimer = DateTime.Now.AddDays(-i).ToString("yyyy-MM-dd");
td.Descc = "这是一点小意思，请你收下，到时候选举还要请你帮忙投我家老李一票……这不好吧，你太客气了，你就是不送，我也会投老李的……说着，忙拿过来看，这是啥啊？我说村长夫人，这怎么就一只鞋啊？你放心，那只投票之后，我就送给你……" + i.ToString();
td.ID = i;
td.Title = "测试标题"+i.ToString();
td.Url = "http://suchso.com?a="+i;
list.Add(td);
}
return list;
}

}
public class TestData
{
public TestData()
{

}
public int ID { get; set; }
public string Title { get; set; }
public string DateTimer { get; set; }
public string Descc { get; set; }
public string Url { get; set; }
}

js引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>

逻辑js：

 

<script type="text/javascript" >
$(document).ready(function () {
GetData();

});
function GetData() {
_Default.getData(ForeachShowresult);
}
function ForeachShowresult(res) {
if (res != null) {
var html = "";

$.each(res.value, function (i, obj) {
html=html+" <div class="item">";
html=html+" <div class="inner">";
html = html + " <h2><a href="" + obj.Url + "">" + obj.Title + "</a></h2>";
html = html + " <p>" + obj.Descc + "</p>";
html=html+"</div>";
html=html+"</div>";
});
$("#divdata").html(html);
SetDataClass();
}
}
function SetDataClass() {
// masonry plugin call
$('#container').masonry({ itemSelector: '.item' });

//injecting arrow points
function Arrow_Points() {
var s = $("#container").find(".item");
$.each(s, function (i, obj) {
var posLeft = $(obj).css("left");
if (posLeft == "0px") {
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}
Arrow_Points();
}
</script>

样式Css：

 

<style type="text/css">
*{ margin:0; padding:0; }
body { font:12px/1.5 "Microsoft Yahei"; color:#808080;}
h1 { font-size:18px; text-align:center; margin:20px;}

#container { position:relative; 860px; margin:0 auto; }

.item {408px; margin:20px 10px 10px; float:left; background:#fff; border:1px solid #b4bbcd; text-align:justify; word-wrap:break-word;}
.inner { padding:10px;}
.inner h2 { margin-bottom:10px;}
.inner h2 a { font-size:15px; color:#333; text-decoration:none;}
.inner h2 a:hover {color:#f30;}

/*timeline navigatior css*/
.timeline_container { display:block; 16px; height:100%; margin:0 auto;text-align:center; cursor:pointer;}
.timeline{ display:block; 4px; height:100%; margin:0 auto; overflow:hidden; font-size:0; float:left; position:absolute; left:428px; top:10px; background-color:#e08989;}

/*arrow css style*/
.leftCorner, .rightCorner { display:block; 13px; height:15px; overflow:hidden; position:absolute; top:8px; z-index:2; }
.rightCorner { right:-13px; background-image:url(images/right.gif);}
.leftCorner { left:-13px; background-image:url(images/left.gif);}

</style>

.item的样式，大家可以自由发挥。类似下面这样的，都不错。哈哈

Html结构：

<div id="container">
    
    <!-- E TimeLine导航 -->
    <div class="timeline_container">
        <div class="timeline">
              <div class="plus"></div>
        </div>
      </div>
    <!-- E TimeLine导航 -->
     <div id="divdata"></div>
</div>

<div class="timeline_container">这个div是纵向时间轴的样式，不能去掉。

对大家有一些帮助的话，请点击一下推荐哦。。

 

 

 

标签: aspnet时间轴, jquery仿facebook时间轴, jquery纵向时间轴