Tạo một Tabbed Content Slick Diện tích sử dụng CSS và jQuery (Phần 1)

Một trong những thách thức lớn nhất đối với các nhà thiết kế web là tìm cách để ra rất nhiều thông tin trên một trang mà không làm mất khả năng sử dụng. Nội dung là một cách tuyệt vời để xử lý vấn đề này và đã được sử dụng rộng rãi trên blog gần đây. Hôm nay chúng ta sẽ xây dựng một hộp nhỏ thông tin theo thẻ đơn giản trong HTML, sau đó thực hiện chức năng của nó bằng cách sử dụng một số Javascript đơn giản, và cuối cùng chúng tôi sẽ đạt được điều tương tự bằng cách sử dụng thư viện jQuery với bài viết Tạo một Tabbed Content Slick Diện tích sử dụng CSS và jQuery (Phần 1).

Bước 1

Trước tiên, chúng ta cần cái gì đó trông tuyệt vời. Vì vậy, một chuyến đi ngắn đến Photoshop và thì đấy chúng ta có một mockup tốt đẹp của những thành phần theo thẻ của chúng tôi như thế nào. Nó khá thẳng về phía trước với một vài gradient thêm để làm cho nó nettuts tuyệt vời. Bạn có thể lấy các PSD Photoshop tập tin cho hình ảnh này nếu bạn muốn có một cái nhìn gần hơn, nhưng nó khá đơn giản và chúng tôi có thể xây dựng nó ra khỏi JPG phẳng thực sự.

Bước 2

Điều đầu tiên cần làm khi xây dựng tất nhiên là để có được một ý tưởng thô như thế nào bạn sẽ làm điều đó. Điều này sẽ dễ dàng hơn nhiều hơn những điều bạn đã phát triển. Nhìn vào hình ảnh này tôi sẽ nói điều tốt nhất cần làm là:

Có một hộp đựng <div> mà chúng ta sẽ đặt tất cả mọi thứ bên trong. Bằng cách đó, nếu chúng ta cần phải xác định vị trí hộp của chúng tôi hoặc thả nó vào một bên, chúng ta chỉ có thể lấy tất cả mọi thứ gói trong <div> và sao chép + dán nó ở đâu đó.

Sau đó chúng ta sẽ có vùng tiêu đề, có lẽ với một thẻ <h>

Sau đó, dưới đây chúng tôi sẽ có một thẻ thứ hai <div> đó sẽ tổ chức các tab và nội dung. Đây là hộp màu xám đen tối trong hình ảnh.

Sau đó, bên trong có chúng tôi sẽ sử dụng một danh sách không có thứ tự <ul> trong đó mỗi phần tử là một liên kết cho các tab. Điều này sẽ cho phép chúng tôi sử dụng <li> bit của danh sách để xác định vị trí các tab và các bit <a> để tạo kiểu cho họ và cho họ lật và bật / tắt tiểu bang.

Sau đó, dưới đây chúng ta sẽ tạo ra một trận chung kết <div> khu vực trong đó có các nội dung cho mỗi tab. Chúng tôi sẽ cần một trong những cho mỗi tab, và chúng tôi sẽ hiển thị hoặc ẩn chúng tùy thuộc vào tab đã được nhấp vào.

SO để tóm tắt, nó sẽ là một cái gì đó như thế này:

< div >

< h4 > nhóm </ h4 >

< div >

< ul >

< li > < một > Tab </ a > </ li >

</ ul >

< div > Nội dung cho Tab 1 </ div >

< div > Nội dung cho Tab 2 </ div >

< div > Nội dung cho Tab 3 </ div >

</ div >

Đừng lo lắng nếu nhìn vào hình ảnh mà không ngay lập tức làm cho bạn nghĩ rằng cấu trúc đó. Đôi khi bạn chỉ cần làm những việc bằng cách thử và sai. Trong trường hợp của tôi, tôi đã thực hiện những điều này theo thẻ nhỏ một vài lần và tôi biết rằng đây là một cách đơn giản tốt đẹp của làm cho chúng.

Ngoài ra nó là tốt đẹp để suy nghĩ về cấu trúc như thế này trước khi bạn có rất nhiều tên lớp và id và nội dung vì nó có thể được khó để nhìn thấy rừng từ cây sau này. Đặc biệt là khi bạn thêm nội dung cho tất cả các tab khác nhau.

Vì vậy, bây giờ chúng ta có một hình ảnh trong tâm trí làm thế nào để xây dựng cấu trúc của chúng tôi, chúng ta hãy để nó!

Bước 3

Bây giờ nếu bạn đã thực hiện theo hướng dẫn của thiet ke website o Ha Noi trên PSDtuts bạn sẽ biết rằng tôi yêu một nền gradient tốt. Vì vậy, trước khi chúng tôi bắt đầu với cấu trúc theo thẻ, chúng ta hãy cho mình một nền tảng tốt đẹp!

Mở Photoshop, tạo một tài liệu 1000px x 1000px và vẽ một tốt đẹp (tinh tế) radial gradient như hình dưới đây. Lưu ý rằng tôi đã rút ra từ trung tâm / đầu và chắc chắn rằng gradient được hoàn thành vào thời gian tôi nhận được để cạnh của tài liệu. Điều đó có nghĩa tôi có thể thiết lập màu nền trong HTML là màu tối hơn và nếu ai đó trải dài cửa sổ trình duyệt của họ nó sẽ được liền mạch.

Bước 4

Vì vậy, tạo một thư mục mới cho dự án, sau đó tạo ra một thư mục thứ hai bên trong đó được gọi là hình ảnh và lưu lại hình ảnh bên trong như background.jpg . Khi lưu sử dụng File> Save for Web và các thiết bị và chọn JPG với một thiết lập chất lượng của khoảng 70 đó đi ra đến một kích thước tập tin của 16kb mà không phải là quá xấu. Đã từng có một thời gian mà bạn thực sự phải tằn tiện và tiết kiệm, nhưng bây giờ bạn chỉ muốn chắc chắn rằng bạn không phải là ngu ngốc lãng phí với các kích thước tập tin của bạn.

Bây giờ chúng ta tạo ra một tài liệu HTML và viết một số mã:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

< html xmlns = " http://www.w3.org/1999/xhtml " xml: lang = "en" lang = "en" >

< đầu >

< tiêu đề > Tabbed Cơ cấu - Thường xuyên </ tiêu đề >

< link rel = "stylesheet" href = "style.css" loại = "text / css" phương tiện truyền thông = "màn hình" />

</ head >

< cơ thể >

</ body >

</ html >

Vì vậy, đó sẽ là cơ sở của HTML. Bây giờ chúng ta sẽ tạo style.css tài liệu và viết như sau:

body {

background-image : url (images / background.jpg);

background-repeat : không lặp lại ;

background-position : đầu trung tâm ;

background-color : # 657.077 ;

lợi nhuận : 40px ;

}

Một vài điều cần lưu ý ở đây:

Có thể viết cùng một CSS này sử dụng tốc ký và giảm số lượng các dòng được sử dụng, nhưng nó rõ ràng hơn nhiều theo cách này và tốt hơn cho hướng dẫn bằng văn bản!

Chúng tôi có một hình nền (gradient) và chúng tôi đã thiết lập nó để không lặp lại, bởi vì chúng tôi chỉ muốn nó xuất hiện một lần, nó làm trung tâm và cuối cùng là màu nền (# 657.077) là màu sắc tối hơn.

Tôi đã thêm một biên độ 40px. Đây chỉ là vị trí thứ của tôi sau này để nó trông thật đẹp.

Bạn có thể xem kết quả tài liệu HTML ở đây. Lưu ý rằng nếu bạn thay đổi kích thước cửa sổ của bạn đó là một liền mạch đẹp tốt nghiệp nền. Wunderbar!

Bước 5

Tiếp theo chúng ta thêm cấu trúc của chúng tôi để trang để chúng ta có thể bắt đầu tạo kiểu tóc nó.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

< html xmlns = " http://www.w3.org/1999/xhtml " xml: lang = "en" lang = "en" >

< đầu >

< tiêu đề > Tabbed Cơ cấu - Thường xuyên </ tiêu đề >

< link rel = "stylesheet" href = "style.css" loại = "text / css" phương tiện truyền thông = "màn hình" />

</ head >

< cơ thể >

< div id = "tabbed_box_1" class = "tabbed_box" >

< h4 > Duyệt trang web < nhỏ > Chọn Tab </ nhỏ > </ h4 >

< div class = "tabbed_area" >

< ul class = "tab" >

< li > < một href = "" id = "tab_1" class = "hoạt động" > lưu trữ </ a > </ li >

< li > < một href = "" id = "tab_2" > Chủ đề </ a > </ li >

< li > < một href = "" id = "tab_3" > Trang </ a > </ li >

</ ul >

< div id = "content_1" class = "nội dung" > Nội dung cho Tab 1 </ div >

< div id = "content_2" class = "nội dung" > Nội dung cho Tab 2 </ div >

< div id = "content_3" class = "nội dung" > Nội dung cho Tab 3 </ div >

</ div ></ div >

</ body >

</ html >

Vì vậy, như bạn có thể thấy tôi đã về cơ bản sử dụng cấu trúc tương tự tôi đã đề cập trong Bước 2: Tôi đã thêm một số id và các lớp học và một số nội dung thực tế. Đây là lý do đằng sau những gì tôi đã thực hiện:

Đối với tiêu đề, tôi đã đặt ẩn ý "Chọn Tab" trong một <nhỏ> yếu tố. Điều này cho phép tôi sử dụng <h4> yếu tố để định vị tổng thể và <nhỏ> yếu tố để Restyle và vị trí ẩn ý.

Các container <div> có id = "tabbed_box_1" và một class = "tabbed_box" . Tôi đã làm điều này bởi vì chúng tôi có thể tái sử dụng mã này nhiều lần trên cùng một trang. Nếu chúng ta đã làm điều đó chúng ta có thể sử dụng số hiệu của vị trí mỗi người ở những nơi khác nhau. Nhưng chúng tôi vẫn muốn có các lớp học để làm phong cách. Trong khi đó, nếu chúng ta muốn sử dụng id để tạo kiểu tóc, chúng tôi muốn kết thúc phải xác định phong cách tương tự một lần nữa và một lần nữa cho id khác nhau.

Tôi đã cho các liên kết khu vực và nội dung id bởi vì chúng ta cần phải sử dụng Javascript để thao tác chúng sau này.

Cuối cùng tôi đã cho các phần tử <ul> một tên lớp. Trên thực tế chúng ta có thể tạo kiểu cho nó mà không có một lớp học chỉ bởi phong cách .tabbed_area ul {} nhưng điều này có thể bị lẫn lộn với tương lai <ul> 's chúng tôi đặt trong khu vực nội dung. Vì vậy, nó tốt hơn cho nó để có một tên lớp để chúng ta tham khảo.

OK vậy mà không có phong cách nó không thực sự trông giống như nhiều .... chưa!

Bước 6

Bây giờ với phong cách lập các yếu tố, tôi nghĩ rằng đó là tốt nhất để làm việc từ các yếu tố bên ngoài Vì vậy, chúng tôi sẽ bắt đầu với yếu tố này -. <Div id = "tabbed_box" class = "container"> - mà chúng tôi sẽ sử dụng để xác định vị trí hộp độc đáo ở trung tâm của tài liệu chúng tôi sử dụng mã này:

#tabbed_box {

lợi nhuận : 0px tự động 0px tự động ;

chiều rộng : 300px ;

}

Bước 7

Bây giờ chúng ta sẽ làm vùng tiêu đề. Chúng ta có thể tạo kiểu cho nhóm như thế này:

.tabbed_box h 4 {

font-family : Arial , Helvetica , sans-serif ;

font-size : 23px ;

màu : # ffffff ;

thư-khoảng cách : -1px ;

margin-bottom : 10px ;

}

.tabbed_box h 4 nhỏ {

màu : # e3e9ec ;

font-weight : bình thường ;

font-size : 9px ;

font-family : Verdana , Arial , Helvetica , sans-serif ;

văn bản chuyển đổi : hoa ;

vị trí : tương đối ;

đầu : -4px ;

trái : 6px ;

thư-khoảng cách : 0px ;

}

Một số điều cần lưu ý ở đây:

Thay vì chỉ cần xác định phong cách cho h4, tôi đã xác định cho h4 .tabbed_box. Điều này là rất quan trọng trong một tài liệu HTML lớn hơn bởi vì bạn có thể có một phong cách h4 ở một nơi khác. Vì vậy, bạn muốn chắc chắn rằng bạn không chồng chéo lên nhau hoặc gây ra vấn đề chồng chéo trong tương lai.

Bạn sẽ nhận thấy tôi cũng điều chỉnh lề dưới trên h4 10px. Điều này là để khoảng cách có vẻ đúng. Điều quan trọng là biết rằng nhiều yếu tố có giá trị mặc định. Ví dụ một h4 đã có một lề dưới, và nó lớn hơn, chúng tôi muốn. Vì vậy, nếu chúng ta không đặt mình này nó sẽ xuất hiện với một biên độ lớn hơn. Một số người sử dụng stylesheets đặc biệt mà đặt lại tất cả các giá trị mặc định, nhưng tôi đã nhận được sử dụng để đặt chúng riêng rẽ khi tôi cần.

Bạn sẽ thấy rằng tôi cũng được sử dụng các thuộc tính văn bản chuyển đổi để làm cho văn bản nhỏ tất cả các thủ đô. Chúng tôi tất nhiên có thể vừa viết nó trong mũ, nhưng tôi chỉ thích làm theo cách này!

Ngoài ra, bạn sẽ nhận thấy trong định nghĩa nhỏ, tôi đã cho nó một vị trí: định nghĩa tương đối, điều này là để tôi có thể điều chỉnh, nơi nó xuất hiện, di chuyển nó lên 4px đầu trang và 6px bên phải.

Cuối cùng, khi các yếu tố phong cách h4 tôi đã cho nó một khoảng cách chữ tiêu cực, nhưng điều đó có nghĩa là các yếu tố nhỏ nhận được thư cùng một khoảng cách quá tiêu cực mà chúng ta không muốn. Vì vậy, tôi phải xác định lại một lần nữa là 0px đó. Điều này là nhờ thực tế là phong cách thác xuống - vì thế tên Cascading Style Sheets. Thông thường bạn sẽ nhận thấy một cái gì đó có vẻ lạ trên trang của bạn và nó sẽ là do các yếu tố đã được thừa hưởng một số phong cách bạn hoàn toàn quên mất. Khi lần đầu tiên tôi đã làm điều này chút phong cách tôi nhìn chằm chằm vào chút nhỏ cho lứa tuổi cố gắng tìm ra lý do tại sao nó trông có vẻ chụm lại, cho đến khi tôi nhớ!

Bước 8

Tiếp theo chúng tôi sẽ cung cấp cho chúng tôi bên trong <div> một chút phong cách với mã này:

.tabbed_area {

biên giới : 1px rắn # 494e52 ;

background-color : # 636d76 ;

đệm : 8px ;

}

Điều này chỉ cung cấp cho nó một chút về định nghĩa và không gian các yếu tố nội thất đi từ hai bên. Bạn có thể thấy nơi chúng tôi đến trong hình dưới đây.

Bằng cách làm việc từ bên ngoài vào, chúng tôi đã đưa ra các yếu tố của chúng tôi một chút về hình dạng và nó dễ dàng hơn rất nhiều để xem làm thế nào nó sẽ gió lên tìm kiếm. Cũng thường bạn sẽ có những hạn chế đến từ bên ngoài vào, ví dụ như hộp có thể cần phải phù hợp với một cột có chiều rộng nhất định. Cuối cùng nó cũng là một ý tưởng tốt để đi ra ngoài ở, bởi vì sau đó bất kỳ kế thừa phong cách rất rõ ràng. Ví dụ nếu bạn đi theo con đường khác và đã làm các yếu tố nội thất đầu tiên, sau đó phong cách thể ảnh hưởng đến những yếu tố nội thất và bạn cần phải quay trở lại và điều chỉnh nào.

Bước 9

Bây giờ chúng ta có được những thứ tốt - các tab! Nếu chúng tôi thêm này đôi chút về CSS chúng ta sẽ đi một chặng đường dài để làm cho các tab trông giống như tab:

ul.tabs {

lợi nhuận : 0px ; đệm : 0px ;

}

ul.tabs li {

list-style : none ;

hiển thị : inline ;

}

Mã này nói rằng các phần tử <ul> với lớp 'tab' nên không có lợi nhuận và không có đệm. Nó cũng nói rằng tất cả các <li> yếu tố bên trong nên không có điểm viên đạn kèm theo. Cuối cùng chúng ta thay đổi màn hình hiển thị từ mặc định 'khối' thành 'inline'. Hãy để tôi giải thích rằng bit cuối cùng trong một chi tiết chút.

Các yếu tố trên một trang thường có ba giá trị chung cho 'hiển thị'. Họ là những khối , nội tuyến , hoặc không có .

Thiết lập một yếu tố để không làm cho nó vô hình. Chúng tôi sẽ sử dụng thực tế là sau này.

Thiết lập một yếu tố để nội tuyến làm cho nó chảy cùng với các yếu tố khác cách văn bản không. Vì vậy, ở đây thay vì xuất hiện bên dưới mỗi khác, <li> yếu tố chạy dọc theo chiều ngang.

Thiết lập một yếu tố để ngăn chặn làm cho nó một khu vực hình chữ nhật xuất hiện thường dưới phần tử cuối cùng.

Đó là một lời giải thích thực sự đơn giản, bạn có thể có được một còn qua tại Thiết kế Web From Scratch

Thực tế, có giá trị hiển thị khác mà bạn có thể đọc tại Quirksmode .

Bước 10

Tất nhiên chúng tôi 'tab' vẫn trông khá crappy, vì vậy hãy cung cấp cho họ một số phong cách. Chúng tôi đã sử dụng <li> yếu tố để vị trí của họ, nhưng chúng tôi sẽ sử dụng các yếu tố <a> để tạo kiểu cho chúng, như thế này:

ul.tabs li a {

background-color : # 464c54 ;

màu : # ffebb5 ;

đệm : 8px 14px 8px 14px ;

text-decoration : none ;

font-size : 9px ;

font-family : Verdana , Arial , Helvetica , sans-serif ;

font-weight : bold ;

văn bản chuyển đổi : hoa ;

biên giới : 1px rắn # 464c54 ;

}

ul.tabs li a: hover {

background-color : # 2f343a ;

border-color : # 2f343a ;

}

ul.tabs li a.active {

background-color : # ffffff ;

màu : # 282e32 ;

biên giới : 1px rắn # 464c54 ;

cửa dưới : 1px rắn #ffffff ;

}

Vì vậy, những gì chúng tôi đã làm ở đây là:

Phong cách lên các từ khóa <a> để nó đệm ra và có nền văn bản và màu sắc phù hợp, và có các thiết lập font chữ.

Tạo ra một phong cách thứ hai cho một: hover và tối màu nền và biên giới. Lưu ý rằng chúng tôi không cần phải đặt tất cả các thiết lập <a> khác vì họ được thừa kế. Chúng tôi chỉ cần thay đổi những cái mà chúng ta muốn thay đổi khi người dùng cuộn chuột lên tab.

Cuối cùng chúng ta có một phong cách thứ ba khi <a> có class = "hoạt động" . Nói cách khác cho các tab được chọn. Một lần nữa, chúng tôi thiết lập màu nền là màu trắng và thay đổi màu sắc văn bản. Một điều cần lưu ý là chúng tôi cũng thay đổi biên giới phía dưới màu trắng. Điều này là để các tab sẽ trông giống như nó được gắn liền với các khu vực nội dung (khi chúng ta thêm nó vào sau!)