Phần 1: Tạo một Tabbed Content Slick Diện tích sử dụng CSS và jQuery (Phần 1).
.content {
background-color : # ffffff ;
đệm : 10px ;
biên giới : 1px rắn # 464c54 ;
}
#content_ 2 , #content_ 3 { display : none ; }
Bạn sẽ thấy rằng phần đầu tiên của CSS cho trình duyệt rằng tất cả các phần tử với class = "nội dung" nên có màu trắng với lớp đệm và là biên giới (cùng màu với các tab). Phần thứ hai nói rằng các phần tử với id = "content_2" và id = "content_3" cần phải có một màn hình hiển thị: không có, hoặc trong otherwords nên vô hình.
Sau khi chúng tôi thêm một số Javascript chúng ta có thể sử dụng kịch bản để luân phiên giữa display: none và hiển thị: khối để làm cho chúng hiển thị và ẩn.
Vì vậy, đây là cách các tab của chúng tôi đang tìm kiếm, bạn cũng có thể nhìn thấy một phiên bản HTML của nơi chúng tôi đang ở . Như bạn có thể thấy nó đang tìm kiếm khá gần, nhưng chúng ta cần phải khắc phục khoảng cách và thêm một số nội dung thực tế.
ul.tabs {
lợi nhuận : 0px ; đệm : 0px ;
margin-top : 5px ;
margin-bottom : 6px ;
}
Để được hoàn toàn trung thực tôi không chắc chắn lý do tại sao mà vấn đề khoảng cách xảy ra. Đôi khi HTML thu hút tôi, nhưng tôi chỉ cần điều chỉnh các thiết lập cho đến khi mọi thứ đúng Của mình. Đôi khi trong quá trình tôi tìm ra đâu là nguyên nhân, đôi khi tôi thì không. Tôi đoán những gì tôi nói là, trừ khi bạn đang đi để thực sự có được vào mọi chi tiết thông số kỹ thuật w3, sớm hay muộn bạn sẽ gặp một số vấn đề mà bạn không thể giải thích. Đừng để nó giúp bạn có được xuống, chỉ cần điều chỉnh cho đến khi bạn tìm thấy một sửa chữa hoặc một giải pháp.
Bây giờ chúng ta sẽ thêm một số nội dung vào khu vực nội dung. Tôi tránh được điều này trước khi tôi muốn giữ HTML tìm kiếm đơn giản. Dưới đây là một số:
< 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" > Chủ đề </ a > </ li >
< li > < một href = "" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "" id = "tab_3" > Trang </ a > </ li >
</ ul >
< div id = "content_1" class = "nội dung" >
< ul >
< li > < một href = "" > <HTML Kỹ thuật nhỏ > 4 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > CSS Styling < nhỏ > 32 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Flash Hướng dẫn < nhỏ > 2 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Web tạp < nhỏ > 19 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > trang web Tin tức < nhỏ > 6 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Phát triển Web < nhỏ > 8 bài viết </ nhỏ > </ a > </ li >
</ ul >
</ div >
< div id = "content_2" class = "nội dung" >
< ul >
< li > < một href = "" > Tháng mười hai 2008 < nhỏ > 6 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng mười một 2008 < nhỏ > 4 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng mười 2008 < nhỏ > 22 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng 9 năm 2008 < nhỏ > 12 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng tám 2008 < nhỏ > 3 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng bảy 2008 < nhỏ > 1 bài viết </ nhỏ > </ a > </ li >
</ ul >
</ div >
< div id = "content_3" class = "nội dung" >
< ul >
< li > < một href = "" > Home </ a > </ li >
< li > < một href = "" > Giới thiệu về </ a > </ li >
< li > < một href = "" > Đóng góp </ a > </ li >
< li > < một href = "" > Liên hệ </ a > </ li >
</ ul >
</ div >
</ div >
</ div >
Vì vậy, ở đây tôi đã chỉ cần thêm một loạt các danh sách không có thứ tự vào ba lĩnh vực nội dung. Ngẫu nhiên tôi chế giễu này lên như thể nó đã được sử dụng trên một blog WordPress. Nhưng thực sự bạn có thể sử dụng này cho tất cả các loại của sự vật. Mới Flashden trang chủ mà tôi làm việc trên cách đây vài ngày sử dụng khu vực tab để hiển thị các loại khác nhau của các tập tin gần đây.
Bây giờ chúng ta sẽ thêm một số phong cách để làm cho những người nhìn một chút đẹp hơn:
.content ul {
lợi nhuận : 0px ;
đệm : 0px 20px 0px 20px ;
}
ul li {.content
list-style : none ;
cửa dưới : 1px rắn # d6dde0 ;
padding-top : 15px ;
padding-bottom : 15px ;
font-size : 13px ;
}
.content ul li a {
text-decoration : none ;
màu : # 3e4346 ;
}
.content ul li một nhỏ {
màu : # 8b959c ;
font-size : 9px ;
văn bản chuyển đổi : hoa ;
font-family : Verdana , Arial , Helvetica , sans-serif ;
vị trí : tương đối ;
trái : 4px ;
top : 0px ;
}
Một lần nữa chúng tôi phong cách của chúng tôi lên danh sách. Lần này, thay vì đưa ra các <ul> yếu tố một className, tôi chỉ đơn giản là thêm phong cách cho tất cả <ul> yếu tố bên trong yếu tố với class = "nội dung" . Điều này chỉ có nghĩa là tôi không cần phải viết nhiều tên lớp vào HTML của tôi mà làm cho nó gọn gàng và sạch hơn.
Những điều khác cần lưu ý:
Một lần nữa chúng tôi đã loại bỏ các điểm đạn ra khỏi <li> yếu tố với danh sách theo phong cách: không có .
Lần này chúng tôi đang tạo kiểu tóc các yếu tố danh sách như trái ngược với <a> 's. Điều này là quan trọng bởi vì nếu chúng ta có thể có một mục trình đơn mà không phải là một liên kết, và cách này nó vẫn sẽ nằm gọn trong.
Một lần nữa tôi đã sử dụng một <nhỏ> bọc bên trong <a> để làm cho số lượng bài viết. Tôi đã sử dụng một văn bản chuyển đổi để làm cho nó tất cả các mũ và một số vị trí tương đối để di chuyển nó sang bên phải một chút.
Vì vậy, đây là những gì trang của chúng tôi hình như:
Nói chung nó là khá tốt, ngoại trừ chúng ta có một quá nhiều biên giới. Nhưng đó là OK, chúng ta có thể sửa chữa nó với một giả chọn phép thuật được gọi là " cuối cùng con "như thế này:
.content ul li: cuối cùng con {
cửa dưới : không có ;
}
Phong cách này chỉ áp dụng đối với các yếu tố cuối cùng của loại hình riêng của mình - tức là cuối cùng <li> yếu tố. Bây giờ tôi phải chỉ ra rằng cuối cùng con không làm việc trong tất cả các trình duyệt. Đặc biệt IE6 không thích nó. Nhưng đó là OK, vì nó không phải là kết thúc của thế giới nếu biên giới là có, và đó là cách tinh tế của tôi về trừng phạt bất cứ ai đã không có ít nhất một mơ hồ đến trình duyệt ngày:-)
Bây giờ có chỉ là một bước nữa để kết thúc HTML của chúng tôi, và đó là một số hình ảnh nền tảng tốt đẹp cho các thành phần của chúng tôi. Như bạn sẽ nhớ lại một số yếu tố trong tập tin PSD ban đầu của tôi đã có gradient tinh tế. Vì vậy, bây giờ là lúc để thêm những người có ba tốt nghiệp bit:. (A) trên tab hoạt động (b) trên các tab không hoạt động và (c) ở dưới cùng của khu vực nội dung. Dưới đây là ba hình ảnh chúng ta sẽ cần:
Họ là một chút khó khăn để nhìn thấy, nhưng về cơ bản họ từng lát nhỏ của gradient rằng chúng tôi sẽ thiết lập như là lặp đi lặp lại hình ảnh nền. Đây là một đóng lên của một cho các tab (lưu ý tôi đã thêm một đường viền mỏng xung quanh nó để nó là một chút rõ ràng hơn. Chú ý rằng có một dòng trắng 1px ở đầu trang. Điều đó sẽ làm cho các tab trông thực sự sắc nét.
Vì vậy, chúng ta cần phải thực hiện một vài điều chỉnh mã CSS để thêm vào hình ảnh nền, như thế này:
ul.tabs li a {
background-image : url (images / tab_off.jpg);
background-repeat : repeat-x ;
background-position : dưới cùng ;
}
ul.tabs li a.active {
background-image : url (images / tab_on.jpg);
background-repeat : repeat-x ;
background-position : top ;
}
.content {
background-image : url (images / content_bottom.jpg);
background-repeat : repeat-x ;
background-position : dưới cùng ;
}
Lưu ý rằng tôi thực sự đưa các bit thêm với phần còn lại của định nghĩa lớp của họ, nhưng vì lợi ích của ngắn gọn vừa sao chép trong chiết xuất. Như bạn có thể thấy trong cả ba trường hợp chúng ta lặp đi lặp lại một hình nền theo trục x chỉ. Trong trường hợp của hai (tab ra và khu vực nội dung), chúng tôi đang làm điều đó cùng phía dưới, và trong khác đó là ở đầu trang.
Và với điều đó chúng tôi đã chính thức hoàn thành phần HTML / CSS của hướng dẫn này. Bạn có thể xem trang theo kiểu kết thúc ở đây.
Điều tiếp theo chúng ta cần làm là thêm một số Javascript để làm cho các tab của chúng tôi thực sự làm điều gì đó. Đầu tiên chúng ta sẽ làm điều này bằng tay và sau đó tôi sẽ chỉ cho bạn cách sử dụng một thư viện Javascript để thực hiện điều tương tự. Bây giờ tôi phải chỉ ra rằng tôi không có chuyên môn JS, và tôi hy vọng sẽ mang lại một số chủ thực sự programatic viết hướng dẫn ở đây, vì vậy nếu bạn nhận thấy tôi làm bất cứ điều gì đó là một chút mơ hồ, cảm thấy tự do để lại comment và Tôi sẽ học cách hướng dẫn và làm cho nó một chút thực hành tốt nhất nhiều hơn nữa!
Vì vậy, đầu tiên chúng ta hãy phác thảo những gì chúng tôi muốn làm khi có ai đó nhấp chuột vào một tab. Chúng tôi muốn tắt tab hiện tại của chúng tôi, bật mới, ẩn các khu vực nội dung hiện tại và hiển thị mới.
Bây giờ chúng ta có thể có một cái gì đó thông minh hoạt động ra tab mà hiện nay và chuyển nó đi, nhưng nó dễ dàng hơn chỉ để đi qua và chuyển đổi chúng tất cả ra, và sau đó chuyển vào những gì chúng tôi muốn. Tương tự như vậy đối với các lĩnh vực nội dung, chúng ta có thể ẩn tất cả ba trong số họ và sau đó hiển thị những gì chúng tôi muốn. Điều này tiết kiệm cho chúng tôi phải làm việc ra khỏi tình trạng hiện tại của công việc.
Xem thêm: thiet ke web tphcm
Các yếu tố chúng tôi đang làm việc với cái nhìn như thế này:
<a href="" id="tab_1" class="active">
<Div id = "content_1" class = "nội dung">
Bây giờ trong Javascript chúng ta có thể tìm thấy một yếu tố đơn giản bằng cách sử dụng nó là id và document.getElementById () phương pháp. Vì vậy, document.getElementById ('content_1') sẽ cung cấp cho chúng tôi khu vực nội dung đầu tiên. Sau đó chúng tôi có thể thiết lập nó phong cách hiển thị để không sử dụng dòng này:
. document.getElementById ('content_1') style.display = 'không';
Tương tự như vậy để thấy một lớp học chúng tôi sử dụng:
. document.getElementById ('tab_1') className = 'hoạt động';
Vì vậy, sau đó là một thực sự phương pháp đơn giản có thể viết:
chức năng tabSwitch (new_tab, new_content) {
document.getElementById ( 'content_1' ) .style.display = 'không' ;
document.getElementById ( 'content_2' ) .style.display = 'không' ;
document.getElementById ( 'content_3' ) .style.display = 'không' ;
document.getElementById (new_content) .style.display = 'khối' ;
document.getElementById ( 'tab_1' ) .className = '' ;
document.getElementById ( 'tab_2' ) .className = '' ;
document.getElementById ( 'tab_3' ) .className = '' ;
document.getElementById (new_tab) .className = 'hoạt động' ;
}
Điều này sẽ được đặt bên trong một tập tin, hãy gọi nó là functions.js . Sau đó chúng tôi sẽ gọi kịch bản này bằng cách thay đổi các liên kết tab của chúng tôi để:
< script src = "functions.js" loại = "text / javascript" > </ script >
< ul class = "tab" >
< li > < một href = "javascript: tabSwitch ('tab_1', 'content_1');" id = "tab_1" class = "hoạt động" > Chủ đề </ a > </ li >
< li > < một href = "javascript: tabSwitch ('tab_2', 'content_2');" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "javascript: tabSwitch ('tab_3', 'content_3');" id = "tab_3" > Trang </ a > </ li >
</ ul >
Và chắc chắn, đây là một ví dụ của chúng tôi ví dụ javascript siêu đơn giản . Nó hoạt động!
Hiện nay có một số vấn đề rất rõ ràng với kịch bản này. Không ít trong số đó là nếu bạn thêm một tab khác bạn sẽ phải thay đổi chức năng của bạn. Và nếu bạn có nhiều hơn một tập hợp các tab trên một trang bạn sẽ cần hai chức năng! Vì vậy, hãy cường nó lên một chút:
chức năng tabSwitch_2 (hoạt động, số lượng, tab_prefix, content_prefix) {
cho ( var i = 1; i <số 1; i ++) {
document.getElementById (content_prefix + i) .style.display = 'không' ;
document.getElementById (tab_prefix + i) .className = '' ;
}
document.getElementById (content_prefix + hoạt động) .style.display = 'khối' ;
document.getElementById (tab_prefix + hoạt động) .className = 'hoạt động' ;
}
Phiên bản thứ hai của chúng tôi về chức năng chuyển tab có một vài chi tiết lập luận, nhưng là một chút thông minh. Nó giả định rằng chúng ta có một tập hợp các tab và một tập hợp các lĩnh vực nội dung và họ có id có một tiền tố và một tập hợp các số incrementing. Tức là tab_1, tab_2 ... và content_1, content_2 ...
Đối số đầu tiên của chúng tôi có chức năng, 'hoạt động', là số tab / nội dung chúng tôi muốn vào. Đối số thứ hai, 'số', là số lượng các tab đang được sử dụng. Những lập luận thứ ba và thứ tư là các tiền tố được sử dụng trong các id của các yếu tố của chúng tôi.
Các chức năng sau đó đã có một vòng lặp cho rằng chu kỳ thông qua từ 1 đến số lượng các tab và chuyển tất cả chúng ra, sau đó chuyển sang hai chúng tôi muốn trở lại vào lúc kết thúc. Nói cách khác, nó là kịch bản tương tự như trước, nhưng chúng tôi đã chỉ làm cho nó một chút nhỏ bé thông minh hơn.
Vì vậy, trong ví dụ của chúng tôi để gọi các chức năng chúng ta sẽ có mã này:
< script src = "functions.js" loại = "text / javascript" > </ script >
< ul class = "tab" >
< li > < một href = "javascript: tabSwitch_2 (1, 3, 'tab_', 'content_');" id = "tab_1" class = "hoạt động" > Chủ đề </ a > </ li >
< li > < một href = "javascript: tabSwitch_2 (2, 3, 'tab_', 'content_');" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "javascript: tabSwitch_2 (3, 3, 'tab_', 'content_');" id = "tab_3" > Trang </ a > </ li >
</ ul >
Điều này có nghĩa rằng sau này nếu chúng ta có một bộ thứ hai của các tab, chúng tôi có thể cung cấp cho họ tiền tố id khác nhau và sử dụng các chức năng tương tự một lần nữa và một lần nữa.
Xem ví dụ javascript thứ hai .
Gần đây đã có rất nhiều thư viện Javascript xuất hiện, và trong thực tế có (ít nhất) hai được thực hiện cụ thể để đạt được hiệu quả tab này: MooTabs và DomTab . Tôi đã không được sử dụng một trong hai, nhưng từ một cái nhìn ngắn gọn họ nhìn khá hữu dụng.
Tuy nhiên như tôi đã nghe rất nhiều về các thư viện jQuery, tôi quyết định cố gắng chuyển đổi các tab cùng sử dụng jQuery. Tôi có một giải pháp của tôi cảm thấy có thể sử dụng một số công việc, nhưng nó vẫn còn thú vị để xem xét thông qua.
Vì vậy, đầu tiên, đi đến jQuery trang web và tải về phiên bản mới nhất của thư viện kịch bản của họ.
jQuery cung cấp một loạt các chức năng cho phép bạn chọn nhóm của sự vật. Ví dụ, nếu bạn muốn chọn tất cả các yếu tố trên trang đó là một liên kết (tức là <a> yếu tố) và sau đó làm cho họ biến mất, bạn sẽ đặt này trong <head> của khu vực:
<Script src = "kịch bản / jquery-1.2.3.min.js" > </ script>
<Script>
// Khi tải tài liệu làm tất cả mọi thứ bên trong ở đây ...
$ (Tài liệu) đã sẵn sàng ( chức năng () {
$ ( "a" ) .slideUp ();
});
</ Script>
Dòng đầu tiên cho biết thêm các thư viện kịch bản jQuery. Diện tích kịch bản chính là bên trong một đoạn mã trông như thế này: $ (document) đã sẵn sàng (function () {}); Điều này về cơ bản cho trình duyệt của bạn để thực hiện tất cả mọi thứ bên trong khi nó cập trang. Vì vậy, trong trường hợp của chúng tôi, chúng tôi đang đem lại cho nó lệnh:
1
$ ( "a" ) .slideUp ();
Điều này nói tìm thấy tất cả mọi thứ đó là một <a> và thực hiện slideUp () trên đó. Hay nói cách khác: tìm thấy tất cả các liên kết và làm cho họ biến mất với một hiệu ứng trượt lên. Hãy thử thêm kịch bản cho một trang web và tải nó và bạn sẽ thấy tất cả các liên kết của bạn biến mất. Khá gọn gàng huh?
Nhưng dù sao có rất nhiều cách để lựa chọn điều gì đó, và bạn có thể đọc về họ trong các API và tài liệu . Bạn có thể làm những việc như tìm thấy mọi phần tử với một lớp học nào đó, một id nào đó và như vậy. Tại một số điểm tôi sẽ viết một giới thiệu thích hợp để jQuery hướng dẫn ở đây, nhưng trong thời điểm này, đó là giới thiệu nhỏ sẽ làm - ngoài việc chỉ cần một giờ kinh nghiệm với jQuery tôi nghi ngờ nó muốn được một cái gì đó của một trò hề cho tôi để viết một intro nó!
< ul class = "tab" >
< li > < một href = "#" tiêu đề = "content_1" class = "active tab" > Chủ đề </ a > </ li >
< li > < một href = "#" tiêu đề = "content_2" class = "tab" > lưu trữ </ a > </ li >
< li > < một href = "#" tiêu đề = "content_3" class = "tab" > Trang </ a > </ li >
</ ul >
Bây giờ sử dụng hai yếu tố này, về cơ bản tôi có thể nhận được tất cả các liên kết với các lớp học 'tab' và tôi cũng có thể tìm thấy bất kỳ yếu tố có id bằng với thuộc tính tiêu đề của liên kết đã được chỉ cần nhấp vào. Đây là kịch bản (được đặt trong <head>) mà giải thích điều này tốt hơn một chút:
<Script src = "kịch bản / jquery-1.2.3.min.js" > </ script>
<Script>
// Khi tải tài liệu làm tất cả mọi thứ bên trong ở đây ...
$ (Tài liệu) đã sẵn sàng ( chức năng () {
// Khi một liên kết được nhấp
$ ( "a.tab" ) Tích vào ( chức năng () {
// Chuyển đổi tất cả các tab tắt
$ ( ".active" ) .removeClass ( "hoạt động" );
// Chuyển tab này
$ ( này ) .addClass ( "hoạt động" );
// Trượt tất cả các thành phần với lớp 'nội dung' lên
$ ( ".content" ) .slideUp ();
// Bây giờ tìm ra những 'danh hiệu' giá trị thuộc tính là gì và tìm các phần tử với id đó. Sau đó trượt xuống đó.
var content_show = $ ( này ) .attr ( "title" );
$ ( "#" + content_show) .slideDown ();
});
});
</ Script>
Vì vậy, thiet ke website nha trang đã thêm ý kiến để giúp giải thích. Về cơ bản khi bất cứ liên kết với các lớp học 'tab' được click, chúng tôi làm tất cả mọi thứ bên trong chức năng đó.
Trong khi chờ đợi tôi hy vọng bạn thích hướng dẫn bạn thiet ke website đơn giản với bài viết này.
Bước 11
Có hai điều chúng ta cần phải làm gì để làm cho nội dung khu vực làm việc. Đầu tiên là chúng ta nên làm cho hai khu vực thứ hai biến mất và thứ hai là để làm cho họ nhìn một cách thích hợp theo kiểu..content {
background-color : # ffffff ;
đệm : 10px ;
biên giới : 1px rắn # 464c54 ;
}
#content_ 2 , #content_ 3 { display : none ; }
Bạn sẽ thấy rằng phần đầu tiên của CSS cho trình duyệt rằng tất cả các phần tử với class = "nội dung" nên có màu trắng với lớp đệm và là biên giới (cùng màu với các tab). Phần thứ hai nói rằng các phần tử với id = "content_2" và id = "content_3" cần phải có một màn hình hiển thị: không có, hoặc trong otherwords nên vô hình.
Sau khi chúng tôi thêm một số Javascript chúng ta có thể sử dụng kịch bản để luân phiên giữa display: none và hiển thị: khối để làm cho chúng hiển thị và ẩn.
Vì vậy, đây là cách các tab của chúng tôi đang tìm kiếm, bạn cũng có thể nhìn thấy một phiên bản HTML của nơi chúng tôi đang ở . Như bạn có thể thấy nó đang tìm kiếm khá gần, nhưng chúng ta cần phải khắc phục khoảng cách và thêm một số nội dung thực tế.
Bước 12
Sửa chữa các vấn đề khoảng cách thực sự là một vấn đề chỉ đơn giản là thêm lợi nhuận trở lại các yếu tố <ul> như thế này:ul.tabs {
lợi nhuận : 0px ; đệm : 0px ;
margin-top : 5px ;
margin-bottom : 6px ;
}
Để được hoàn toàn trung thực tôi không chắc chắn lý do tại sao mà vấn đề khoảng cách xảy ra. Đôi khi HTML thu hút tôi, nhưng tôi chỉ cần điều chỉnh các thiết lập cho đến khi mọi thứ đúng Của mình. Đôi khi trong quá trình tôi tìm ra đâu là nguyên nhân, đôi khi tôi thì không. Tôi đoán những gì tôi nói là, trừ khi bạn đang đi để thực sự có được vào mọi chi tiết thông số kỹ thuật w3, sớm hay muộn bạn sẽ gặp một số vấn đề mà bạn không thể giải thích. Đừng để nó giúp bạn có được xuống, chỉ cần điều chỉnh cho đến khi bạn tìm thấy một sửa chữa hoặc một giải pháp.
Bước 13
Bây giờ chúng ta sẽ thêm một số nội dung vào khu vực nội dung. Tôi tránh được điều này trước khi tôi muốn giữ HTML tìm kiếm đơn giản. Dưới đây là một số:
< 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" > Chủ đề </ a > </ li >
< li > < một href = "" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "" id = "tab_3" > Trang </ a > </ li >
</ ul >
< div id = "content_1" class = "nội dung" >
< ul >
< li > < một href = "" > <HTML Kỹ thuật nhỏ > 4 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > CSS Styling < nhỏ > 32 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Flash Hướng dẫn < nhỏ > 2 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Web tạp < nhỏ > 19 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > trang web Tin tức < nhỏ > 6 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Phát triển Web < nhỏ > 8 bài viết </ nhỏ > </ a > </ li >
</ ul >
</ div >
< div id = "content_2" class = "nội dung" >
< ul >
< li > < một href = "" > Tháng mười hai 2008 < nhỏ > 6 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng mười một 2008 < nhỏ > 4 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng mười 2008 < nhỏ > 22 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng 9 năm 2008 < nhỏ > 12 bài viết </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng tám 2008 < nhỏ > 3 bài </ nhỏ > </ a > </ li >
< li > < một href = "" > Tháng bảy 2008 < nhỏ > 1 bài viết </ nhỏ > </ a > </ li >
</ ul >
</ div >
< div id = "content_3" class = "nội dung" >
< ul >
< li > < một href = "" > Home </ a > </ li >
< li > < một href = "" > Giới thiệu về </ a > </ li >
< li > < một href = "" > Đóng góp </ a > </ li >
< li > < một href = "" > Liên hệ </ a > </ li >
</ ul >
</ div >
</ div >
</ div >
Vì vậy, ở đây tôi đã chỉ cần thêm một loạt các danh sách không có thứ tự vào ba lĩnh vực nội dung. Ngẫu nhiên tôi chế giễu này lên như thể nó đã được sử dụng trên một blog WordPress. Nhưng thực sự bạn có thể sử dụng này cho tất cả các loại của sự vật. Mới Flashden trang chủ mà tôi làm việc trên cách đây vài ngày sử dụng khu vực tab để hiển thị các loại khác nhau của các tập tin gần đây.
Bây giờ chúng ta sẽ thêm một số phong cách để làm cho những người nhìn một chút đẹp hơn:
.content ul {
lợi nhuận : 0px ;
đệm : 0px 20px 0px 20px ;
}
ul li {.content
list-style : none ;
cửa dưới : 1px rắn # d6dde0 ;
padding-top : 15px ;
padding-bottom : 15px ;
font-size : 13px ;
}
.content ul li a {
text-decoration : none ;
màu : # 3e4346 ;
}
.content ul li một nhỏ {
màu : # 8b959c ;
font-size : 9px ;
văn bản chuyển đổi : hoa ;
font-family : Verdana , Arial , Helvetica , sans-serif ;
vị trí : tương đối ;
trái : 4px ;
top : 0px ;
}
Một lần nữa chúng tôi phong cách của chúng tôi lên danh sách. Lần này, thay vì đưa ra các <ul> yếu tố một className, tôi chỉ đơn giản là thêm phong cách cho tất cả <ul> yếu tố bên trong yếu tố với class = "nội dung" . Điều này chỉ có nghĩa là tôi không cần phải viết nhiều tên lớp vào HTML của tôi mà làm cho nó gọn gàng và sạch hơn.
Những điều khác cần lưu ý:
Một lần nữa chúng tôi đã loại bỏ các điểm đạn ra khỏi <li> yếu tố với danh sách theo phong cách: không có .
Lần này chúng tôi đang tạo kiểu tóc các yếu tố danh sách như trái ngược với <a> 's. Điều này là quan trọng bởi vì nếu chúng ta có thể có một mục trình đơn mà không phải là một liên kết, và cách này nó vẫn sẽ nằm gọn trong.
Một lần nữa tôi đã sử dụng một <nhỏ> bọc bên trong <a> để làm cho số lượng bài viết. Tôi đã sử dụng một văn bản chuyển đổi để làm cho nó tất cả các mũ và một số vị trí tương đối để di chuyển nó sang bên phải một chút.
Bước 14
Vì vậy, đây là những gì trang của chúng tôi hình như:
Nói chung nó là khá tốt, ngoại trừ chúng ta có một quá nhiều biên giới. Nhưng đó là OK, chúng ta có thể sửa chữa nó với một giả chọn phép thuật được gọi là " cuối cùng con "như thế này:
.content ul li: cuối cùng con {
cửa dưới : không có ;
}
Phong cách này chỉ áp dụng đối với các yếu tố cuối cùng của loại hình riêng của mình - tức là cuối cùng <li> yếu tố. Bây giờ tôi phải chỉ ra rằng cuối cùng con không làm việc trong tất cả các trình duyệt. Đặc biệt IE6 không thích nó. Nhưng đó là OK, vì nó không phải là kết thúc của thế giới nếu biên giới là có, và đó là cách tinh tế của tôi về trừng phạt bất cứ ai đã không có ít nhất một mơ hồ đến trình duyệt ngày:-)
Bước 15
Bây giờ có chỉ là một bước nữa để kết thúc HTML của chúng tôi, và đó là một số hình ảnh nền tảng tốt đẹp cho các thành phần của chúng tôi. Như bạn sẽ nhớ lại một số yếu tố trong tập tin PSD ban đầu của tôi đã có gradient tinh tế. Vì vậy, bây giờ là lúc để thêm những người có ba tốt nghiệp bit:. (A) trên tab hoạt động (b) trên các tab không hoạt động và (c) ở dưới cùng của khu vực nội dung. Dưới đây là ba hình ảnh chúng ta sẽ cần:
Họ là một chút khó khăn để nhìn thấy, nhưng về cơ bản họ từng lát nhỏ của gradient rằng chúng tôi sẽ thiết lập như là lặp đi lặp lại hình ảnh nền. Đây là một đóng lên của một cho các tab (lưu ý tôi đã thêm một đường viền mỏng xung quanh nó để nó là một chút rõ ràng hơn. Chú ý rằng có một dòng trắng 1px ở đầu trang. Điều đó sẽ làm cho các tab trông thực sự sắc nét.
Vì vậy, chúng ta cần phải thực hiện một vài điều chỉnh mã CSS để thêm vào hình ảnh nền, như thế này:
ul.tabs li a {
background-image : url (images / tab_off.jpg);
background-repeat : repeat-x ;
background-position : dưới cùng ;
}
ul.tabs li a.active {
background-image : url (images / tab_on.jpg);
background-repeat : repeat-x ;
background-position : top ;
}
.content {
background-image : url (images / content_bottom.jpg);
background-repeat : repeat-x ;
background-position : dưới cùng ;
}
Lưu ý rằng tôi thực sự đưa các bit thêm với phần còn lại của định nghĩa lớp của họ, nhưng vì lợi ích của ngắn gọn vừa sao chép trong chiết xuất. Như bạn có thể thấy trong cả ba trường hợp chúng ta lặp đi lặp lại một hình nền theo trục x chỉ. Trong trường hợp của hai (tab ra và khu vực nội dung), chúng tôi đang làm điều đó cùng phía dưới, và trong khác đó là ở đầu trang.
Theo kiểu!
Và với điều đó chúng tôi đã chính thức hoàn thành phần HTML / CSS của hướng dẫn này. Bạn có thể xem trang theo kiểu kết thúc ở đây.
Thêm một kịch bản đơn giản
Điều tiếp theo chúng ta cần làm là thêm một số Javascript để làm cho các tab của chúng tôi thực sự làm điều gì đó. Đầu tiên chúng ta sẽ làm điều này bằng tay và sau đó tôi sẽ chỉ cho bạn cách sử dụng một thư viện Javascript để thực hiện điều tương tự. Bây giờ tôi phải chỉ ra rằng tôi không có chuyên môn JS, và tôi hy vọng sẽ mang lại một số chủ thực sự programatic viết hướng dẫn ở đây, vì vậy nếu bạn nhận thấy tôi làm bất cứ điều gì đó là một chút mơ hồ, cảm thấy tự do để lại comment và Tôi sẽ học cách hướng dẫn và làm cho nó một chút thực hành tốt nhất nhiều hơn nữa!
Vì vậy, đầu tiên chúng ta hãy phác thảo những gì chúng tôi muốn làm khi có ai đó nhấp chuột vào một tab. Chúng tôi muốn tắt tab hiện tại của chúng tôi, bật mới, ẩn các khu vực nội dung hiện tại và hiển thị mới.
Bây giờ chúng ta có thể có một cái gì đó thông minh hoạt động ra tab mà hiện nay và chuyển nó đi, nhưng nó dễ dàng hơn chỉ để đi qua và chuyển đổi chúng tất cả ra, và sau đó chuyển vào những gì chúng tôi muốn. Tương tự như vậy đối với các lĩnh vực nội dung, chúng ta có thể ẩn tất cả ba trong số họ và sau đó hiển thị những gì chúng tôi muốn. Điều này tiết kiệm cho chúng tôi phải làm việc ra khỏi tình trạng hiện tại của công việc.
Xem thêm: thiet ke web tphcm
Tìm yếu tố sử dụng DOM
Các yếu tố chúng tôi đang làm việc với cái nhìn như thế này:
<a href="" id="tab_1" class="active">
<Div id = "content_1" class = "nội dung">
Bây giờ trong Javascript chúng ta có thể tìm thấy một yếu tố đơn giản bằng cách sử dụng nó là id và document.getElementById () phương pháp. Vì vậy, document.getElementById ('content_1') sẽ cung cấp cho chúng tôi khu vực nội dung đầu tiên. Sau đó chúng tôi có thể thiết lập nó phong cách hiển thị để không sử dụng dòng này:
. document.getElementById ('content_1') style.display = 'không';
Tương tự như vậy để thấy một lớp học chúng tôi sử dụng:
. document.getElementById ('tab_1') className = 'hoạt động';
Vì vậy, sau đó là một thực sự phương pháp đơn giản có thể viết:
chức năng tabSwitch (new_tab, new_content) {
document.getElementById ( 'content_1' ) .style.display = 'không' ;
document.getElementById ( 'content_2' ) .style.display = 'không' ;
document.getElementById ( 'content_3' ) .style.display = 'không' ;
document.getElementById (new_content) .style.display = 'khối' ;
document.getElementById ( 'tab_1' ) .className = '' ;
document.getElementById ( 'tab_2' ) .className = '' ;
document.getElementById ( 'tab_3' ) .className = '' ;
document.getElementById (new_tab) .className = 'hoạt động' ;
}
Điều này sẽ được đặt bên trong một tập tin, hãy gọi nó là functions.js . Sau đó chúng tôi sẽ gọi kịch bản này bằng cách thay đổi các liên kết tab của chúng tôi để:
< script src = "functions.js" loại = "text / javascript" > </ script >
< ul class = "tab" >
< li > < một href = "javascript: tabSwitch ('tab_1', 'content_1');" id = "tab_1" class = "hoạt động" > Chủ đề </ a > </ li >
< li > < một href = "javascript: tabSwitch ('tab_2', 'content_2');" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "javascript: tabSwitch ('tab_3', 'content_3');" id = "tab_3" > Trang </ a > </ li >
</ ul >
Và chắc chắn, đây là một ví dụ của chúng tôi ví dụ javascript siêu đơn giản . Nó hoạt động!
Một kịch bản khác Complex
Hiện nay có một số vấn đề rất rõ ràng với kịch bản này. Không ít trong số đó là nếu bạn thêm một tab khác bạn sẽ phải thay đổi chức năng của bạn. Và nếu bạn có nhiều hơn một tập hợp các tab trên một trang bạn sẽ cần hai chức năng! Vì vậy, hãy cường nó lên một chút:
chức năng tabSwitch_2 (hoạt động, số lượng, tab_prefix, content_prefix) {
cho ( var i = 1; i <số 1; i ++) {
document.getElementById (content_prefix + i) .style.display = 'không' ;
document.getElementById (tab_prefix + i) .className = '' ;
}
document.getElementById (content_prefix + hoạt động) .style.display = 'khối' ;
document.getElementById (tab_prefix + hoạt động) .className = 'hoạt động' ;
}
Phiên bản thứ hai của chúng tôi về chức năng chuyển tab có một vài chi tiết lập luận, nhưng là một chút thông minh. Nó giả định rằng chúng ta có một tập hợp các tab và một tập hợp các lĩnh vực nội dung và họ có id có một tiền tố và một tập hợp các số incrementing. Tức là tab_1, tab_2 ... và content_1, content_2 ...
Đối số đầu tiên của chúng tôi có chức năng, 'hoạt động', là số tab / nội dung chúng tôi muốn vào. Đối số thứ hai, 'số', là số lượng các tab đang được sử dụng. Những lập luận thứ ba và thứ tư là các tiền tố được sử dụng trong các id của các yếu tố của chúng tôi.
Các chức năng sau đó đã có một vòng lặp cho rằng chu kỳ thông qua từ 1 đến số lượng các tab và chuyển tất cả chúng ra, sau đó chuyển sang hai chúng tôi muốn trở lại vào lúc kết thúc. Nói cách khác, nó là kịch bản tương tự như trước, nhưng chúng tôi đã chỉ làm cho nó một chút nhỏ bé thông minh hơn.
Vì vậy, trong ví dụ của chúng tôi để gọi các chức năng chúng ta sẽ có mã này:
< script src = "functions.js" loại = "text / javascript" > </ script >
< ul class = "tab" >
< li > < một href = "javascript: tabSwitch_2 (1, 3, 'tab_', 'content_');" id = "tab_1" class = "hoạt động" > Chủ đề </ a > </ li >
< li > < một href = "javascript: tabSwitch_2 (2, 3, 'tab_', 'content_');" id = "tab_2" > lưu trữ </ a > </ li >
< li > < một href = "javascript: tabSwitch_2 (3, 3, 'tab_', 'content_');" id = "tab_3" > Trang </ a > </ li >
</ ul >
Điều này có nghĩa rằng sau này nếu chúng ta có một bộ thứ hai của các tab, chúng tôi có thể cung cấp cho họ tiền tố id khác nhau và sử dụng các chức năng tương tự một lần nữa và một lần nữa.
Xem ví dụ javascript thứ hai .
Sử dụng jQuery
Gần đây đã có rất nhiều thư viện Javascript xuất hiện, và trong thực tế có (ít nhất) hai được thực hiện cụ thể để đạt được hiệu quả tab này: MooTabs và DomTab . Tôi đã không được sử dụng một trong hai, nhưng từ một cái nhìn ngắn gọn họ nhìn khá hữu dụng.
Tuy nhiên như tôi đã nghe rất nhiều về các thư viện jQuery, tôi quyết định cố gắng chuyển đổi các tab cùng sử dụng jQuery. Tôi có một giải pháp của tôi cảm thấy có thể sử dụng một số công việc, nhưng nó vẫn còn thú vị để xem xét thông qua.
Vì vậy, đầu tiên, đi đến jQuery trang web và tải về phiên bản mới nhất của thư viện kịch bản của họ.
Bắt Hang jQuery
jQuery cung cấp một loạt các chức năng cho phép bạn chọn nhóm của sự vật. Ví dụ, nếu bạn muốn chọn tất cả các yếu tố trên trang đó là một liên kết (tức là <a> yếu tố) và sau đó làm cho họ biến mất, bạn sẽ đặt này trong <head> của khu vực:
<Script src = "kịch bản / jquery-1.2.3.min.js" > </ script>
<Script>
// Khi tải tài liệu làm tất cả mọi thứ bên trong ở đây ...
$ (Tài liệu) đã sẵn sàng ( chức năng () {
$ ( "a" ) .slideUp ();
});
</ Script>
Dòng đầu tiên cho biết thêm các thư viện kịch bản jQuery. Diện tích kịch bản chính là bên trong một đoạn mã trông như thế này: $ (document) đã sẵn sàng (function () {}); Điều này về cơ bản cho trình duyệt của bạn để thực hiện tất cả mọi thứ bên trong khi nó cập trang. Vì vậy, trong trường hợp của chúng tôi, chúng tôi đang đem lại cho nó lệnh:
1
$ ( "a" ) .slideUp ();
Điều này nói tìm thấy tất cả mọi thứ đó là một <a> và thực hiện slideUp () trên đó. Hay nói cách khác: tìm thấy tất cả các liên kết và làm cho họ biến mất với một hiệu ứng trượt lên. Hãy thử thêm kịch bản cho một trang web và tải nó và bạn sẽ thấy tất cả các liên kết của bạn biến mất. Khá gọn gàng huh?
Nhưng dù sao có rất nhiều cách để lựa chọn điều gì đó, và bạn có thể đọc về họ trong các API và tài liệu . Bạn có thể làm những việc như tìm thấy mọi phần tử với một lớp học nào đó, một id nào đó và như vậy. Tại một số điểm tôi sẽ viết một giới thiệu thích hợp để jQuery hướng dẫn ở đây, nhưng trong thời điểm này, đó là giới thiệu nhỏ sẽ làm - ngoài việc chỉ cần một giờ kinh nghiệm với jQuery tôi nghi ngờ nó muốn được một cái gì đó của một trò hề cho tôi để viết một intro nó!
Trượt Away với Selectors
Vì vậy, sau một chút thử nghiệm, tôi đã đưa ra một cách để sử dụng jQuery để làm slide các tab của tôi trong và ngoài. Để làm điều này đầu tiên tôi thay đổi liên kết của tôi không có bất kỳ javascript, mà là để có một tiêu đề thuộc tính và thêm một class = "tab" . Chú ý rằng bạn có thể cho một yếu tố hai lớp bằng cách làm này: class = "tab đang hoạt động" .< ul class = "tab" >
< li > < một href = "#" tiêu đề = "content_1" class = "active tab" > Chủ đề </ a > </ li >
< li > < một href = "#" tiêu đề = "content_2" class = "tab" > lưu trữ </ a > </ li >
< li > < một href = "#" tiêu đề = "content_3" class = "tab" > Trang </ a > </ li >
</ ul >
Bây giờ sử dụng hai yếu tố này, về cơ bản tôi có thể nhận được tất cả các liên kết với các lớp học 'tab' và tôi cũng có thể tìm thấy bất kỳ yếu tố có id bằng với thuộc tính tiêu đề của liên kết đã được chỉ cần nhấp vào. Đây là kịch bản (được đặt trong <head>) mà giải thích điều này tốt hơn một chút:
<Script src = "kịch bản / jquery-1.2.3.min.js" > </ script>
<Script>
// Khi tải tài liệu làm tất cả mọi thứ bên trong ở đây ...
$ (Tài liệu) đã sẵn sàng ( chức năng () {
// Khi một liên kết được nhấp
$ ( "a.tab" ) Tích vào ( chức năng () {
// Chuyển đổi tất cả các tab tắt
$ ( ".active" ) .removeClass ( "hoạt động" );
// Chuyển tab này
$ ( này ) .addClass ( "hoạt động" );
// Trượt tất cả các thành phần với lớp 'nội dung' lên
$ ( ".content" ) .slideUp ();
// Bây giờ tìm ra những 'danh hiệu' giá trị thuộc tính là gì và tìm các phần tử với id đó. Sau đó trượt xuống đó.
var content_show = $ ( này ) .attr ( "title" );
$ ( "#" + content_show) .slideDown ();
});
});
</ Script>
Vì vậy, thiet ke website nha trang đã thêm ý kiến để giúp giải thích. Về cơ bản khi bất cứ liên kết với các lớp học 'tab' được click, chúng tôi làm tất cả mọi thứ bên trong chức năng đó.
Lời cuối cùng
OK do đó, một vài phút sau khi thực hiện ví dụ jQuery của tôi, tôi phát hiện ra rằng có trong thực tế, đặc biệt kiểm soát hình ảnh 'tab' trong jQuery . Tôi sẽ cần phải có một vở kịch với ngày mai là không có nghi ngờ nó sẽ làm cho cuộc sống đơn giản hơn rất nhiều!Trong khi chờ đợi tôi hy vọng bạn thích hướng dẫn bạn thiet ke website đơn giản với bài viết này.
