现在位置首页 / 产品设计 /正文

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

作者: IT小兵 | 2013年9月2日| 热度:℃ | 评论: |参与:

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

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

先上效果图:

jquery facebooktimeline

该效果使用了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的样式,大家可以自由发挥。类似这样的,都不错。

jquery 时间轴样式

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是纵向时间轴的样式,不能去掉。


     

点击阅读本文所属分类的更多文章: 产品设计 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询