• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Hướng dẫn tạo giao diện timeline

Admin

Well-Known Member
Staff member
Administrator
SinhVienIT.Net---facebooktimeline.png



Xem Demo



Mã HTML

<div id="container">

<
div class="item">1</div>
<
div class="item">2</div>
<
div class="item">3</div>
<
div class="item">4</div>

</
div>


SinhVienIT.Net---space1.png


CSS
#container{width:860px; margin: 0 auto; }
.item {
width: 408px;
margin: 20px 10px 10px 10px;
float: left;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word;
}


Tạo ra khoảng không gian

Ở đây sử dụng jQuery Masonry

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"
></script>
<script type="text/javascript" src="jquery.masonry.min.js"/>
<script type="text/javascript" >
$(function()
{
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});
</script>


Sau khi chèn plug in

SinhVienIT.Net---space2.png

Tạo thanh Timeline

<div id="container">
// Timeline Navigator
<div class="timeline_container">
<
div class="timeline">
<
div class="plus"></div>
</
div>
</
div>

<
div class="item">1</div>
--------
--------

</
div>


SinhVienIT.Net---timeline.png

JavaScript
$('.timeline_container').mousemove(function(e)
{
var
topdiv=$("#containertop").height();
var
pag= e.pageY - topdiv-26;
$(
'.plus').css({"top":pag +"px", "background":"url('images/plus.png')","margin-left":"1px"});}).
mouseout(function()
{
$(
'.plus').css({"background":"url('')"});
});


CSS cho Timeline

.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;}

Tạo nút mũi tên chỉ vào Timeline

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


SinhVienIT.Net---arrow.png

CSS
.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;
}


Nút xóa cho các bài viết

<div id="container">

<
div class="item">
<
a href='#' class='deletebox'>X</a>
1
</div>
<
div class="item">
<
a href='#' class='deletebox'>X</a>
2
</div>
-----------
-----------
-----------

</
div>

Javascript
Trongđoạn code. $(".deletebox").live('click',function(){} - deletebox là tên class của tag (X). Sử dụng$(this).attr("id") để gọi nút xóa. tại đây mỗi khi nút xóa đc bấm container sẽ reload lại trang.
$(".deletebox").live('click',function()
{
if(
confirm("Are your sure?"))
{
$(
this).parent().fadeOut('slow');
//Remove item block
$('#container').masonry( 'remove', $(this).parent() );
//Reload masonry plugin
$('#container').masonry( 'reload' );
//Hiding existing Arrows
$('.rightCorner').hide();
$(
'.leftCorner').hide();
//Injecting fresh arrows
Arrow_Points();
}
return
false;
});


Phần đăng trạng thái
Tạo 1 thẻ div popup bên trong thẻ div container. Lớp này chứa textbox ID='update' và input ID "update_button.

<div id="container">

<
div class="item">1</div>
--------
--------

<
div id="popup" class='shade'>
<
div class="Popup_rightCorner" > </div>
What's Up?
<textarea id='
update'></textarea>
<input type='
submit' value=' Update ' id='update_button/>
</
div>

</
div>

SinhVienIT.Net---status.png

JavaScript
$(".timeline_container").live('click',function() {} - timeline_containerlà tên class của thanh Timeline .

/Timeline navigator on click action
$(".timeline_container").click(function(e)
{
var
topdiv=$("#containertop").height();
//Current Postion
$("#popup").css({'top'
2.gif
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>'+x+'</div>');
//Reload masonry
$('#container').masonry( 'reload' );
//Hiding existing arrows
$('.rightCorner').hide();
$(
'.leftCorner').hide();
//Injecting fresh arrows
Arrow_Points();
//Clear popup textbox value
$("#update").val('');
//Popup hide
$("#popup").hide();
return
false;
});

CSS
#popup{
display: block;width: 408px;
float: left;margin-top:10px;
background-color:#ffffff;
border:solid 1px #A9B6D2;
min-height:60px;display:none;
position:absolute;margin:10px;
}

-----> Tạo 1 giao diện Timeline đâu có khó
SinhVienIT.Net---4-1.gif

Nguồn: http://windowsz.net

Tặng mọi người cái demo... Của windowsz.net nhá. Mình chỉ edit sơ qua thôi. CÒn cái mình edit hoàn chỉnh thì không share đc. Đang ở trên localhost.. ;))
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
V Hướng dẫn tạo logo giống Xenforo Xenforo 4
dammechiase Dowload phần mềm UltraISO Mới nhất phần mềm tạo ổ đĩa ảo mới nhất full key bản chuẩn kèm hướng dẫn Phần mềm 0
Admin Hướng dẫn tạo con vật thật sự trên màn hình điện thoại bằng Animal 4D+ Thảo luận chung 0
Admin Hướng dẫn tạo video karaoke đơn giản và chi tiết nhất 2019 Video, clip 4
SuperTroll Share Hướng dẫn tự tạo App Android để truy cập vào wapsite của mình Android, iOS 0
V Hướng Dẫn Tạo Forum Trên Xtgem Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
B Hỏi Adm hướng dẫn mình tạo filelist đơn giản cho wap xtgem với? HTML & CSS 2
A Xin hướng dẫn tạo forum xenforo chi tiết dễ hiểu Thảo luận wap việt 4
D Share Hướng dẫn tạo cấu trúc php sửdụng hàm GET hoặc POST All Shared Scripts 0
H Hướng dẫn Hướng dẫn tạo chuyên mục cho Xenforo Xenforo 0
Admin Hướng dẫn chi tiết tạo paypal bằng hình ảnh Thảo luận chung 1
roboconz Hướng dẫn Hướng dẫn ae tạo tên miền .tk đây Mã nguồn wap 4
nhokzodanh Share hướng dẫn tạo wap upload wapka Wap builder, wapego, xtgem, wen.ru, wapka, wap4 2
G : [b]Hướng dẫn chi tiết tạo logo[/b] Hình ảnh 0
Yeukodamnoi Hướng dẫn cách chế tạo súng hơi Ý tưởng, góp ý, sáng kiến mới của thành viên 10
X Hướng dẫn Hướng dẫn tạo trang riêngtrong vbb 4 Vbulletin 1
H Hỏi Tạo domen.tk trên điện thoại được ko anh em ơi.nếu được xin a e hướng dẫn nhé! Thanks rất nhiều.tớ v Hosting & Domain Share 5
H Hướng dẫn tạo Sitemap cho các blogger sử dụng Blogspot Thảo luận SEO 0
N Hướng dẫn Hướng dẫn tạo database trên cPanel Hosting / Domain 0
Della007 Hỏi Xin anh thắng hướng dẫn tạo database host directadmin Hỏi đáp về domain & hosting 3
2 Thảo luận Mong A thắng hay congtu24, kidbloob và pro john trên host cp11 tạo top hướng dẫn chi tiết Johncms 10
H Hướng dẫn tạo subdomain Hướng dẫn Tạo Subdomain Hosting & Domain Free 0
yeuthenao [Share] Hướng dẫn sử dụng PSD để tạo Logo Video, clip 0
L Hỏi Ae nào hướng dẫn mình tạo page tren facebook tks Thảo luận SEO 2
Yeukodamnoi Share zip html hướng dẫn tạo wap Mã nguồn wap 6
Admin [Full HD 1080] Hướng dẫn tạo add-on Xenforo 1/9 - Creating your own add-on Xenforo 0
A Help Wapka xin hướng dẫn tạo phần trang nhanh Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
Admin Hướng dẫn sử dụng PSD để tạo logo + PSD Thiết kế đồ họa 2
Admin Hướng dẫn tạo ổ USB flash cài đặt Windows 8 Sử dụng, chia sẻ, hỏi đáp 0
Admin Hướng dẫn tạo javascript tự động thay đổi hình ảnh, link JavaScript / Ajax 2
K Hướng Dẫn Tạo Ảnh Nền Cho Chatbox Trong Vbb Mã nguồn web 1
K [Hướng Dẫn] Edit Templeate Tạo Tcat Ảnh Cho Riêng Từng Box Mã nguồn web 0
Admin Hướng dẫn tạo Banner Flash chuyển ảnh Kiến thức lập trình 0
Admin Hướng dẫn tạo phân vùng chủ trong Ubuntu Sử dụng, chia sẻ, hỏi đáp 0
Admin [Hướng dẫn] tạo giao diện 2 cột, 3 cột HTML & CSS 0
T Xin hướng dẫn tạo user database trên mobile Kiến thức lập trình 4
N Help Xin hướng dẫn tạo subdomain ở host khác nhau Hỏi đáp về domain & hosting 0
Admin Video hướng dẫn tạo user/password admin khi người share code ko đưa thông tin này Mã nguồn web 7
Admin Hướng dẫn tạo hình nền chatbox - ngầu hơn Vbulletin 1
Admin Hướng dẫn tạo database trong cpanel PHP 3
congtust24 Hướng dẫn tạo logo ở header style mobile HTML & CSS 32
N Xin hướng dẫn tạo banner cho profile Thảo luận chung 4
M Hướng dẫn tạo đầu trọc vĩnh viễn cho ai chưa biết Ý tưởng, góp ý, sáng kiến mới của thành viên 0
Kidblood Hướng dẫn tạo phòng chát ngoài trang chủ yourwap.eu Wap builder, wapego, xtgem, wen.ru, wapka, wap4 17
Admin Hướng dẫn tạo block (quảng cáo 1 bên hông forum vbb4) Vbulletin 0
Admin Hướng dẫn tạo quảng cáo chạy dọc 2 bên forum vbb Vbulletin 0
Admin Hướng dẫn tạo prefix (tiền tố) cho vbb4.x.x Add-ons 0
Admin Hướng dẫn tạo trang hiển thị trình duyệt khi truy cập PHP 0
Admin Hướng dẫn tạo logo team chi tiết từ a đến z Thủ thuật ĐTDĐ 17
Admin Hướng dẫn tạo đường dẫn topic style mobile Vbulletin 0

Similar threads

New posts New threads New resources

Back
Top