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

时间:2022-05-03 15:39:46

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

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

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

先上效果图:

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

该效果使用了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; width:860px; margin:0 auto; }

.item {width: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; width:16px; height:100%; margin:0 auto;text-align:center; cursor:pointer;}
.timeline{ display:block; width: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; width: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的样式,大家可以*发挥。类似下面这样的,都不错。哈哈

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

Html结构:

Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
<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>
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

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

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