Tab Menu

jScrollPane - jQuery Scrollbar như facebook

jScrollPane - jQuery Scrollbar như facebook jScrollPane - jQuery Scrollbar like facebook.
Cũng khá lâu rồi, hôm nay mới rãnh ngồi chia sẻ với các bạn. Bài viết này s cùng các bạn tạo ra một scrollpanel với thanh scrollbar tương tự như facebook. Tuy không mới mẻ gì nhưng đây lại là một cách khiến cho website của chúng ta trông thoáng gọn và mượt mà hơn hẳn. Không tin bạn cứ thử một lần rồi sẽ thích ^^ !!

#bl1 Với bài viết này chúng ta sẽ ứng dụng chủ yếu là jQuery và CSS để tạo ra một thanh scrollbar giống như facebook hoặc hơn nữa là như ý bạn muốn. Bài viết này s sử dụng jScrollpane plugin của Kelvin Luck và edit lại một tí. Thui không nhiều chuyện nữa, chúng ta bắt đầu nhé!

Xem DEMO
#bllink

#bl2 Công việc đầu tiên là chúng ta hãy nhúng vào các thư viện javascript cần thiết trong header. Bạn có thể download tại đây: jScrollPane GitHub #bllink
<!-- styles needed by jScrollPane -->
 <link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all">
 <!-- latest jQuery direct from google's CDN -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <!-- the mousewheel plugin - optional to provide mousewheel support -->
 <script type="text/javascript" src="jquery.mousewheel.js"></script>
 <!-- the jScrollPane script -->
 <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

#bl2 Tiếp theo, đây là CSS style cho vùng chứa văn bản và thanh scrollbar của bạn.
<style type="text/css">
.content-area{
 height:300px;
}
.jspVerticalBar {
 width: 10px;
 background: transparent;
 right:0px;
}

.jspHorizontalBar {
 bottom: 5px;
 width: 100%;
 height: 8px;
 background: transparent;
}
.jspTrack {
 background: transparent;
 width: 10px;
}
.jspTrackHover {
 background-color: rgba(0, 0, 0, .15);
 -webkit-border-radius: 8px; 
}
.jspDrag {
 background: url(jScrollPane_files/transparent-black.png) repeat;
        background-color: #AAA;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-transition: width 250ms;
 width: 5px;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar  {
 float: left;
 height: 100%;
}
.jspDrag {
 float: right;
}
.jspCorner {
 display:none
}
 </style>
#bl2 Tiếp theo, đây là một ít jQuery xử lý ẩn hiện thanh cuộn của chúng ta thôi.
$(document).ready(function(){

 $('.content-area').jScrollPane({
 horizontalGutter:5,
 verticalGutter:5,
 'showArrows': false
 });

 $('.jspDrag').hide();
 $('.content-area').mouseenter(function(){
  $('.jspDrag').stop(true, true).fadeIn(0);   
 });
 $('.content-area').mouseleave(function(){
  $('.jspDrag').stop(true, true).fadeOut('slow');
 });
 
 $('.jspTrack').mouseenter(function(){
  $('.jspTrack').stop(true, true).addClass('jspTrackHover');
  $('.jspDrag').css("width","10px"); 
 });
 $('.jspTrack').mouseleave(function(){
  $('.jspTrack').stop(true, true).removeClass('jspTrackHover');
  $('.jspDrag').css("width",""); 
 });
 
});

#bl2 Và cuối cùng không gì khác hơn là vùng văn bản của chúng ta được chứa trong thẻ <div> với class được sẽ được sử dụng trong đoạn code phía trên.
<div class="content-area">
  Nội dung ở đây...Nhớ là dài dài nhé!!
</div>

#bl1 Bạn có thể tham khảo trang chủ để có thêm nhiều tùy chọn: Click here!! #bllink


Cùng wWw.blogit.info chia sẻ Thế giới công nghệ 4 sao

Hiện có 6 comments

Anonymous

Your style is really unique in comparison to other folks I have read stuff from.
Thank you for posting when you've got the opportunity, Guess I'll just bookmark this web site.



my blog post: visit the up coming post

Anonymous

It's amazing to visit this web page and reading the views of all friends concerning this post, while I am also eager of getting know-how.

my blog post :: filmy online

Anonymous

When someone writes an article he/she keeps the plan of a user
in his/her mind that how a user can understand it.
Therefore that's why this article is amazing. Thanks!

Here is my webpage krankenversicherung Vergleich Selbständige

Anonymous

No matter if some one searches for his vital thing, therefore he/she
needs to be available that in detail, therefore
that thing is maintained over here.

Look into my blog post :: bermuda vacations

Haritha

Wonderful article, very useful and well explanation. Thanks a lot for offering this unique post with us. I really enjoyed by reading your blog post.

Hadoop Training in Chennai

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))