Lập trình - Áo Hai Dây

Mình đã từng thử cái này không thích lắm. Nghe nói bài gốc đã bị xóa khỏi Internet rồi

Có một nhóm viết FileManager sử dụng ExtJS giống y chang Vista từ A - Z. Cài này thì hổng bắt chước được. Dù ExtJS có document tuyệt vời nhưng hiểu thì hổng dễ chút nào.

Mình copy nguyên website luôn cho bạn dễ đọc:

 

Due to great demand, now you can download all files in 1 zip file

VISTA_toolbar.zip (20.36 kb)

I want to show you what you can do with a minimal effort and a little imagination. Here's a screenshoot from Windows VISTA. We'll try to reproduce that toolbar, with buttons and hover effect in cross-browser compatible CSS and HTML.

Screenshoot from Windows VISTA

 

Our toolbar with few line of css and html. Click to see live demo

 

Toolbar

We'll define toolbar as user list tag -> <ul>. <ul> tag will be in #vista_toolbar <div> tag. Each <li> element will be toolbar button. So when you need a new button you just add new <li> tag, hmmm I just love CSS! Here's how it looks in HTML

<div id="vista_toolbar"> 
<ul> 
            <li>...</li> 
      </ul> 
</div> 

Ok, lets define CSS for this elements

First <div id="vista_toolbar">

#vista_toolbar { 
float:left; 
font:normal 12px 'Trebuchet MS','Arial'; 
margin:0; 
padding:0; 
} 

It's straightforward.

 

<ul> element CSS

#vista_toolbar ul { 
background-image:url(back.gif); 
background-repeat:repeat-x; 
float:left; 
line-height:32px; 
list-style:none; 
margin:0; 
padding:0 10px 0 10px; 
width:500px; 
} 

Height of toobar define with „line-height:32px;“ and width with „width:500px;“. And 10 px padding because we don't want to start with buttons from beggining of toolbar.

 

<li> element CSS

#vista_toolbar li { 
display:inline; 
padding:0; 
} 

Display „inline“ because we want our buttons to be displayed in row.

 

 

Buttons.

How to create a button? It's simple, we will use Sliding doors technique.

Just crop picture of button.

  left.png

  right.png

 

we'll add this picture on a:hover in CSS and it works in IE6 as well. Let's go!

 

HTML code of button

<li> 
<a href="#"> 
<span>Add New</span> 
</a> 
</li> 

If you want add picture next to text just add <img align="left" src="files/add.gif" alt="add new" /> in <span> tab

Example HTML code for button with image:

<li> 
<a href="#"> 
<span> 
<img align="left"  src="files/add.gif" alt="add new"/>Add New 
</span> 
</a> 
</li> 

Put it in work with CSS

#vista_toolbar a { 
color:#FFF 
float:left; 
padding:0 3px 0 3px; 
text-decoration:none; 
} 

Color property is defined because we need to override default link color with white color and also text-decoration.

#vista_toolbar a span { 
display:block; 
float:none; 
padding:0 10px 0 7px; 
} 
  
#vista_toolbar a span img { 
border:none; 
margin:8px 4px 0 0; 
} 

If we have image next to text we must center her vertical with margins.

Here is a CSS code used to make hover effect

#vista_toolbar a:hover{ 
background: url(left.png) no-repeat left center; 
} 
  
#vista_toolbar a:hover span { 
background:url(right.png) no-repeat right center; 
} 

Cross-browser compatibility?

Tested in: Firefox 2, IE 6, IE 7, Opera 9.2, Safari 3.0.3 for Windows

If you test in other browsers please let me know.

Summary

I hope this tutorial was helpful. Feel free to post any comment. 

Have a great week!  

minh.tran Lập trình web CSS, toolbar http://blog.itookia.com/post/How-to-create-VISTA-style-toolbar-with-CSS.aspx

Ðược xem 2048 lần, 1 hôm nay