转自:http://www.w3cplus.com/jquery/facebook-timeline-design-using-jquery
不知道大家有没有经常观注Facebook,不过我是经常观注他,时时了解他的Web页面的设计与变化,因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。
这一变化把我吸引了,仔细看了他们的源代码,但不懂js的我来说,实现风格并不难,但是要实现功能还是相当的困难。没办法的情况之下只好借助GG在网上搜索“Facebook Timeline design”。终于找到一篇Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程。于是马上自己跟着动手写了一个,觉得很有意思,并不是想像中的那么难,稍加整理一翻,贴上来与大家一起分享。
从上图中可以看到“Facebook Timeline”效果是一个以时间为主线,主线左右两边有很多个block,并且在主线上点击会弹出一个文本输入,让你添加内容,从而显示到页面上。请看下面的示意思图:
大概了解了“Facebook Timeline”是什么东东后,我们就一起跟着Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程一起来学习如何制作自己的“timeline”效果。
需要的资源
制作这个效果我们首先需要准备两样东西,第一个是jQuery的版本库,另外一个就是制作瀑布流效果的插件jQuery Masonry plugin。有了这两样东东后,就可以进入后面的制作。
HTML Markup
第一步先创建一个容器div,这里把称为“div#container”,同时这个容器是可以放置多个div元素,并且此处给其一个类名“item”,另外在每个“div.item”放置一个“div.inner”:
<div id="container">
<div class="item">
<div class="inner">Block Content</div>
</div>
[...]
<div class="item">
<div class="inner">Block Content</div>
</div>
</div>
注:这只是最初步的HTML结构,随着后面的内容介绍,我们所需的结构会有一定的变化。请仔细留意。
先给这个Markup一个基本样式:
*{
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none outside none;
}
#container {
width: 860px;
margin: 0 auto;
}
.item {
width: 408px;
margin: 20px 10px 10px;
float: left;
background-color: #fff;
border: 1px solid #b4bbcd;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
}
.inner {
padding: 10px;
}
经过上面的样式设置后,Block进行float后,如下图所示的效果:
很显然,上面的效果并不是我们期待的效果,块与块之间的距离太大了,那么我们需要怎样来处理呢?想要答案吗?请看第二步。
第二步:消除块与块之间的距离
前面一步,我们有一个很不理想的效果,就是块与块之间的距离太大了,那么这一步,我们就来看是如何让块与块之间的效果都是一致的。答案很简单,使用jquery和Masonry插件实现。这也就是前面为什么说需要准备jQuery的版本库和jQuery Masonry plugin的原因(有关于jQuery Masonry plugin的详细介绍请点击这里)。下面别的不多说,请看如何调用:
调用库和插件
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
启用Masonry插件
<script type="text/javascript" >
$(function(){
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});
</script>
下面一起来看看运用了jQuery Masonry plugin后的效果:
第三步:制作timeline导航
上面完成了区块的效果设置,接下来这一步主要是制作Timeline导航的效果,在这里在“div#container”容器中添加一些需要使用的HTML标签用来制作“timeline”导航:
HTML Markup
<div id="container">
<!-- TimeLine导航 -->
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>
<div class="item">
<div class="inner">Block Content</div>
</div>
[...]
<div class="item">
<div class="inner">Block Content</div>
</div>
</div>
结构添加完成后,我们需要对其样式进行设置
CSS Code
/*timeline navigatior css*/
.timeline_container {
width: 16px;
text-align: center;
margin: 0 auto;
cursor: pointer;
display: block;
}
.timeline{
margin: 0 auto;
background-color: #e08989;
display: block;
float: left;
height: 100%;
left: 428px;
margin-top: 10px;
position: absolute;
width: 4px;
}
.timeline:hover{
cursor: pointer;
margin: 0 auto;
}
.timeline div.plus{
width: 14px;
height: 14px;
position:relative;
left: -6px;
}
接下来使用jQuery来改为“div.plus”的背景图片:
jQuery Code
//timeline_container add mousemove event
$(".timeline_container").mousemove(function(e){
var topdiv = $("#containertop").height();
var page = e.pageY - topdiv - 26;
$(".plus").css({
"top": page + "px",
"background":"url('images/plus.png')",
"margin-left": "1px"
});
}).mouseout(function(){
$(".plus").css({
"background":"url('')"
});
});
完成后的效果就变成下图所示的风格:
第四步:给item块加上箭头效果
这一步主要实现的效果是,给每个“div.item”的块加上箭头效果,如果“div.item”的在左边加上“向右箭头”,反之加上“向左箭头”。
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 class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></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 id="container">
<!-- TimeLine导航 -->
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">Block Content</div>
</div>
[...]
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">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 id="container">
<!-- TimeLine导航 -->
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">Block Content</div>
</div>
[...]
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">Block Content</div>
</div>
<div id="popup" class="shade">
<div class="Popup_rightCorner"></div>
<div class="inner">
<h3>What's Up?</h3>
<div class="clearfix"><textarea name="" id="update"></textarea></div>
<div class="clearfix"><input type="submit" id="update_button" 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 class="item"><a href="#" class="deletebox">X</a>' + '<div class="inner">' + 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 id="container">
<!-- TimeLine导航 -->
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">Block Content</div>
</div>
[...]
<div class="item">
<a href='#' class='deletebox'>X</a>
<div class="inner">Block Content</div>
</div>
<div id="popup" class="shade">
<div class="Popup_rightCorner"></div>
<div class="inner">
<h3>What's Up?</h3>
<div class="clearfix"><textarea name="" id="update"></textarea></div>
<div class="clearfix"><input type="submit" id="update_button" value="Update"/></div>
</div>
</div>
</div>
CSS Code
*{
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none outside none;
}
#container {
width: 860px;
margin: 0 auto;
}
.item {
width: 408px;
margin: 20px 10px 10px;
float: left;
background-color: #fff;
border: 1px solid #b4bbcd;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
}
.inner {
padding: 10px;
}
/*timeline navigatior css*/
.timeline_container {
width: 16px;
text-align: center;
margin: 0 auto;
cursor: pointer;
display: block;
}
.timeline{
margin: 0 auto;
background-color: #e08989;
display: block;
float: left;
height: 100%;
left: 428px;
margin-top: 10px;
position: absolute;
width: 4px;
}
.timeline:hover{
cursor: pointer;
margin: 0 auto;
}
.timeline div.plus{
width: 14px;
height: 14px;
position:relative;
left: -6px;
}
/*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;
}
/*deletebox style */
.deletebox {
color: #CC0000;
float: right;
font-weight: bold;
margin: 8px 10px;
text-decoration: none;
}
/*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
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript">
$(function(){
//masonry plugin call
$("#container").masonry({
itemSelector:".item",
});
//timeline_container add mousemove event
$(".timeline_container").mousemove(function(e){
var topdiv = $("#containertop").height();
var page = e.pageY - topdiv - 26;
$(".plus").css({
"top": page + "px",
"background":"url('images/plus.png')",
"margin-left": "1px"
});
}).mouseout(function(){
$(".plus").css({
"background":"url('')"
});
});
//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();
//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;
});
//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 class="item"><a href="#" class="deletebox">X</a>' + '<div class="inner">' + 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;
});
});
</script>
类似“Facebook Timeline”的效果所需代码都在上面了,如果你想看看真实效果,你可以看看Srinivas Tamada写的一个DEMO效果。不过我建议大家还是动手一试好点,这样才能体会到。当然如果你不想自己动手,也可以点击这里进行下载。
那么有关于“Facebook Timeline”的介绍到这就算是全部完成了,希望大家能喜欢,如果您有更好的制作方法,记得与我分享。或者你对上面有任何问题可以直接在下面的评论中留言。
最后在结束此文时,让我们再一次感谢Srinivas Tamada给我们带来这么详细的教程——《Facebook Timeline Design using JQuery and CSS.》
如需转载烦请注明出处:W3CPLUS