Menu dạng các tab [Lưu Trữ] - HOA HỌC TRÒ (Matnauhoctro)

JavaScriptBank

17-09-2009, 08:08 AM

Hiệu ứng tạo một trình đơn (http://www.javascriptbank.com/javascript/menu/) với các mục chọn giống như các tab và mỗi tab sẽ có một màu khác nhau khi bạn rê hoặc nhấp chuột và... chi tiết (http://www.javascriptbank.com/toggle-tab-menus-index.html/vi//)

http://www.javascriptbank.com/javascript.images/menu/toggle-tab-menus-index.jpg (http://www.javascriptbank.com/toggle-tab-menus-index.html/vi/)
Demo: Menu dạng các tab (http://www.javascriptbank.com/javascript/menu/navigation/toggle-tab-menus-index/preview/vi/)

Cách cài đặt

Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS

<link rel="stylesheet" href="ttStyle.css" type="text/css">


Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript

<script language="JavaScript" type="text/javascript">
// Toggle Tab Menus script - Â© 2004 Mircea Baldean
// Version 1.1, release 09/01/2004

var tabProp = new Array()
/*
Tab Menu properties:
Add new tab menus using this convention
tabProp[No] = new Array("tabMenuNo", "tabCaption", "#tabBgColor", "tabContNo")
*/
tabProp[0] = new Array("tabMenu0", "Lorem", "#B3E7FF", "tabCont0")
tabProp[1] = new Array("tabMenu1", "Odio", "#FFFFCC", "tabCont1")
tabProp[2] = new Array("tabMenu2", "Sed", "#DFD5FF", "tabCont2")
tabProp[3] = new Array("tabMenu3", "Viverra", "#CCFFCC", "tabCont3")
//tabProp[4] = new Array("tabMenu4", "Caption", "#FFFFFF", "tabCont4")
//tabProp[5] = new Array("tabMenu5", "Caption", "#FFFFFF", "tabCont5")
//tabProp[6] = new Array("tabMenu6", "Caption", "#FFFFFF", "tabCont6")
//tabProp[7] = new Array("tabMenu7", "Caption", "#FFFFFF", "tabCont7")
//tabProp[8] = new Array("tabMenu8", "Caption", "#FFFFFF", "tabCont8")
//tabProp[9] = new Array("tabMenu9", "Caption", "#FFFFFF", "tabCont9")

// Set-up Parameters
var menuBgColorOff = "#EDEDED"; //Default shaded colour
var menuBorderColor = "#AAAAAA"; //Border colour
var menuWidth = "100px"; //Tab Menu width
var menuHeight = "24px"; //Tab Menu height
var menuSpacing = "20px"; //Tab Manu spacing
var menuLeftOffset = "20px"; //Offset first Tab Menu
var menuSelected = 0; //Selected Tab Menu by default: 0, 1, ...
var menuBorderStyle = "1px solid"; //Do not change
var menuVerifyWidth = 1; //Check to see if menus overflow content width

var menuFontFamily = "Arial, Helvetica, sans-serif"; //Font Family for tab menus
var menuFontSize = "13px"; //Font Size for tab menus
var menuFontColorOff = "#0000FF"; //Font Colour for un-selected tab menus
var menuFontColorOn = "#000000"; //Font Colour for current menu

var contentWidth = "500px"; //Content window width
var contentHeight = "186px"; //Content window height
var contentFontFamily = "Arial, Helvetica, sans-serif"; //Content window font family
var contentFontSize = "13px"; //Content window font size
var contentFontColor = "#000000"; //Content window font colour
var contentPadding = "4px"; //Content window padding
</script>
<script language="JavaScript" type="text/javascript" src="ttApi.js"></script>


Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

<body onload="ttInitTabs();">
<div id="tabHolder">
<div id="tabOffset"> </div>
<script type="text/javascript" language="JavaScript">ttMenuDisplay();</script>
<br style="clear: both;">
<div id="tabContent" class="tabContent">


<div id="tabCont0">Lorem ipsum dolor sit amet, et venenatis est nam blandit
a, in velit aliquam libero amet faucibus mauris, ipsum turpis tellus
urna, animi arcu neque etiam. Eaque tincidunt enim nibh aliquam magnis
tellus. Duis faucibus ullamcorper volutpat eleifend pulvinar. Elit risus
consectetuer vestibulum tincidunt et tempor, curabitur elementum
aliquam, torquent non suscipit phasellus. Et enim autem est, lacus
egestas elit dolor quam, eros viverra arcu massa fusce leo et, lectus
massa lectus laoreet lacus vestibulum, volutpat metus quis.</div>
<div id="tabCont1">Odio libero nemo, natoque velit. Urna pede. Fusce est
sodales pellentesque aliquet. Pellentesque dui mauris nisi odio velit a,
eu eget vulputate eu erat leo, pretium ut, luctus potenti libero ut
magna per pellentesque. Id urna, vestibulum vel vestibulum risus lectus.
Sed id. Felis tempor placerat, corporis sollicitudin, nisl eget quam
tortor nibh aliquam cursus. Sodales tellus eros. Sed praesent feugiat,
at fringilla in gravida magna tellus. Fermentum cras est mauris amet sed
ultricies, donec luctus id, amet amet phasellus, et imperdiet eu arcu
venenatis, velit pretium diam aliquam tellus.</div>
<div id="tabCont2">Sed sit hendrerit. Taciti maecenas vitae porta aenean
adipiscing. Nostra sodales, malesuada interdum tincidunt quis nulla
proin, suscipit ut augue justo mi, ea neque, vulputate et fringilla
euismod. Sed massa dictum vivamus. Ipsum interdum in, tincidunt in
justo, ac commodo facilisis felis. Volutpat placerat at consequat
accumsan, quis ante leo libero eget cras quisque, sapien ligula id ac
ultricies eu pellentesque, orci facilisi at sollicitudin ullamcorper,
sed rutrum tincidunt sed. Diam fringilla quam sit pellentesque mattis
possimus. Fames mollis dictum ut pellentesque, elit hac massa ante, eget
tellus lorem suspendisse mauris, leo arcu wisi, nulla diam. Litora magna
purus cursus donec nascetur nec, amet vitae, amet dignissim.</div>
<div id="tabCont3">Viverra adipiscing lorem eget in massa ultrices. Ea donec
orci voluptate venenatis commodi, iusto nulla duis lobortis qui, iaculis
laborum auctor sit sociosqu, eros nullam amet et, vitae vivamus
hendrerit nisl elit. Fermentum penatibus eget neque, faucibus commodo
vivamus. Accumsan risus ornare nunc semper, sed et interdum augue, erat
vel venenatis in. Eget potenti amet non diam vitae, nulla quis pulvinar
sodales tempor suscipit a, aliquam aenean nec beatae nullam molestie
dolor, praesent ab, nisl pellentesque facilisis urna convallis nec ut.
Dignissim suspendisse a, nam molestie pretium quisque fusce ut, turpis
sed, ad neque ligula a. Erat pellentesque, dis pede. Neque curae risus
sed non vitae. Felis non, dictumst dolor. Iaculis risus sit a, vulputate
suspendisse. Sem molestie et dictumst vulputate turpis eget, mauris
vestibulum.</div>
<div id="tabCont4"></div>
<div id="tabCont5"></div>
<div id="tabCont6"></div>

<div id="tabCont7"></div>
<div id="tabCont8"></div>
<div id="tabCont9"></div>

</div>
</div>
</body>


Bước 4: tải các file
Files
ttApi.js (http://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttApi.js)
ttStyle.css (http://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttStyle.css)
ttMenuFrm.html (http://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttMenuFrm.html)

Hiệu ứng cùng chức năng
- Menu dạng tab động (http://www.javascriptbank.com/animated-minitabs.html/vi/)
- Tạo các tab nội dung (http://www.javascriptbank.com/sections-maker-script.html/vi/)
- Tạo các tab (http://www.javascriptbank.com/tab-folder-script.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Trình đơn (http://www.javascriptbank.com/javascript/menu/vi/) và Định hướng (http://www.javascriptbank.com/javascript/menu/navigation/vi/)

Bảng đăng nhập (http://www.javascriptbank.com/forum/giup-em-co-cai-bang-dang-nhap-nhu-cua-trang-chu-t636.html) - Cách tạo id động (http://www.javascriptbank.com/forum/xin-code-tao-id-tu-dong-t351.html) - Hiệu ứng phóng to thu nhỏ ảnh với javascript (http://www.javascriptbank.com/vi+title=phóng to thu nhỏ)