Archives Posts
Пишем простой Tab list с prototype.js
Как я написал свой Tab list и почему не использовал доступные в интернете готовые примеры.
Вот примеры Tab листов, которые я раньше использовал:
На примерах этих tab листов, трудно понять как работает сам механизм связанный с переключаниями между tab’ами.
И один из больших недостатков я не смог застивить работать эти tab листы на динамически вызваных страницах, которые вызваются через методы библиотеки prototype.js (Ajax.Updater и др.). Вот по этой причине я решил написать свой tab лист.
Первое, создаем простой html документ:
<head>
<title>Делаем ТАБы</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* tab */
.panel {
clear: both;
display: none;
border: 3px solid #CCC;
padding: 1em;
}
.panel.active-tab-body {
display: block;
}
#tabs {
list-style: none;
}
#tabs li {
float: left;
}
#tabs a {
float: left;
padding: 2px 8px;
background-color: #F2F2F2;
text-decoration: none;
color: #999999;
}
#tabs a.active-tab {
background-color: #CCC;
border-top: 3px solid #999;
padding-top: 0px;
color: #000;
}
</style>
<script type="text/javascript" language="JavaScript" src="/js/scriptaculous/lib/prototype.js"></script>
</head>
<body>
</body>
</html>
Обратите внимание на кодировку в документе используется UTF-8, так как библиотека prototype.js не дружит с нашими кодировками windowds-1251
Если у вас все же есть необходимость использовать в работе кодировку windows-1251, вам поможет библиотека Дмитрия Котерова JsHttpRequest. Которая полностью совместима с prototype.js
В моем примере tab list я использую CSS стили из проекта Dexagogo.
Перед закрытием тега </head> , добавляем подключение библиотеки prototype.js, которую я использую для переключения между tab’ами, и динамеческой загрузки информации в выбранный tab.
