jQuery Code

//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></span>"; $(obj).prepend(html); } else { html = "<span></span>"; $(obj).prepend(html); } }); } Arrow_Points();

接下来给这两个箭头写上相应的样式效果：

CSS Code

/*arrow css style*/ .rightCorner { background-image: url("images/right.png"); display: block; height: 15px; margin-left: 408px; margin-top: 8px; padding: 0; vertical-align: top; width: 13px; z-index: 2; position: absolute; } .leftCorner { background-image:url("images/left.png"); display: block; height: 15px; width: 13px; margin-left: -13px; margin-top: 8px; position: absolute; z-index: 2; }

完成后的效果

第五步：给item块增加删除按钮

这一步，给每个“div.item”添加一个“删除”按钮，当你点击这个“删除”按钮时，被点击块将隐藏，而整个布局重新更样布局。

HTML Markup

<div> <!-- TimeLine导航 --> <div> <div> <div></div> </div> </div> <div> <a href='#'>X</a> <div>Block Content</div> </div> [...] <div> <a href='#'>X</a> <div>Block Content</div> </div> </div>

CSS Code

/*deletebox style */ .deletebox { color: #CC0000; float: right; font-weight: bold; margin: 8px 10px; text-decoration: none; }

下面的jQuery代码给“.deletebox”按钮一个“click”事件，当你点击这个按钮时，主要完成以下事情：当前“item”块移除掉，并且剩下的块重新通过“Masonry”进行排列，具体看代码：

jQuery Code

//delete item box $(".deletebox").live("click",function(){ if(confirm("Are you sure?")){ $(this).parent().fadeOut("slow"); //remove item block $("#container").masonry("remove",$(this).parent()); //remove masonry plugin $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrow Arrow_Points(); } return false; }); 第六步：弹出窗的制作

最后一步，需要制作一个弹出窗效果，制作这个效果，需要先给他加上一些HTML标签。

HTML Markup

<div> <!-- TimeLine导航 --> <div> <div> <div></div> </div> </div> <div> <a href='#'>X</a> <div>Block Content</div> </div> [...] <div> <a href='#'>X</a> <div>Block Content</div> </div> <div> <div></div> <div> <h3>What's Up?</h3> <div><textarea></textarea></div> <div><input type="submit" value="Update"/></div> </div> </div> </div>

修改完成后，给“弹出窗”写个简单的样式：

CSS Code

/*popup*/ #popup { display: block; width: 408px; float: left; background-color: #fff; border: 1px solid #a9b6d2; min-height: 60px; display: none; position: absolute; margin: 10px; } #update { width: 100%; resize: none; min-height: 50px; } #update_button { background-color: #CC0000; border: 1px solid #333333; color: white; cursor: pointer; font-weight: bold; margin-top: 5px; padding: 5px; }

最后一上就是让这个“弹出窗”如何工作

jQuery Code

//Timeline navigator on click action $(".timeline_container").click(function(e){ var topdiv = $("#containertop").height(); //Current Postion $("#popup").css({ "top": (e.pageY - topdiv - 33) + "px" }); $("#popup").fadeIn();//Popup block show //textbox focus $("#update").focus(); }); //Mouseover no action $("#popup").mouseup(function(){ return false; }); //outside action of the popup block $(document).mouseup(function(){ $("#popup").hide(); }); //update button action $("#update_button").live("click",function(){ //textbox value var x = $("#update").val(); //ajax part $("#container").prepend('<div><a href="#">X</a>' + '<div>' + x + '</div></div>'); //reload masnory $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrows Arrow_Points(); //clear popup text box value $("#update").val(""); //popup hide $("#popup").hide(); return false; });

最终效果就如下面的草图所示：

完成第六步后，类似于Facebook Timeline的效果就算是做出来了，最后我把相关代码列出来：

HTML Markup

<div> <!-- TimeLine导航 --> <div> <div> <div></div> </div> </div> <div> <a href='#'>X</a> <div>Block Content</div> </div> [...] <div> <a href='#'>X</a> <div>Block Content</div> </div> <div> <div></div> <div> <h3>What's Up?</h3> <div><textarea></textarea></div> <div><input type="submit" value="Update"/></div> </div> </div> </div>