| Форум -> PHP, JS, MySQL -> Tabs (Вкладки) |
| Tabs (Вкладки) |
|---|
| Koc | Дата: 17.01.2008, в 11:25 | Сообщение №1 |
 
ПользовательПользователь №: 217
Сообщений: 35
 | Здрасте. Нужно какое-то решение для экономии места на сайте. Я вот предлагаю вкладки. В инете полно готовых примеров, но столкнулся с проблемой: не все короссбраузерные, много весят.
Делается это легко, на основе:
| Код | 1
| <span onclick="tab2.style.display='none';tab1.style.display='block';return(false);">Вкладка 1</span> |
<span onclick="tab1.style.display='none';tab2.style.display='block';return(false);">Вкладка 2</span>
<div id=tab1 style="display='none'">
содержимое 1
</div>
<div id=tab2 style="display='none'">
содержимое 2
</div> |
очталось только сделать возможность запуска страницы с параметром #tab2 и открывается 2 вкладка. Ну и сделать сss, чтобы было наглядно видно какая вкладка сейчас открыта. Вот я и предлагаю помочь мне с этими 2-мя пунктвми. |
|
|
|
| Serg_pnz | Дата: 17.01.2008, в 11:43 | Сообщение №2 |
 
АдминистраторПользователь №: 1
Сообщений: 2242
| | Koc, как ты верно заметил - они тяжелые. Имхо надо делать на аяксе (кто-то уже продавал такое меню, помоему zigmat) |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
|
|
| Koc | Дата: 17.01.2008, в 11:53 | Сообщение №3 |
ПользовательПользователь №: 217
Сообщений: 35
| не, моем случае Аякс не нужен. Контент вкладок - статистический. Это будет поиск (последние добавления/по алфавиту/по названию). Вот как это реализовано на сайте Артемия Лебедева: http://www.artlebedev.ru/tools/technogrette/js/tabsheets/
2,1 кб. Атлична, я нашел то, что искал.
Ps: глять нарисуйте букву d |
|
|
| Alexder | Дата: 17.01.2008, в 13:28 | Сообщение №4 |
ПользовательПользователь №: 204
Сообщений: 31
| | Если получится, может выложишь готовое решение?? |
|
|
| Alexder | Дата: 17.01.2008, в 14:11 | Сообщение №5 |
ПользовательПользователь №: 204
Сообщений: 31
| | Цитата | | Koc, как ты верно заметил - они тяжелые. Имхо надо делать на аяксе (кто-то уже продавал такое меню, помоему zigmat) |
Делал Duck, но он к сожалению пропал куда-то... |
|
|
| Koc | Дата: 17.01.2008, в 14:19 | Сообщение №6 |
ПользовательПользователь №: 217
Сообщений: 35
| | Alexder, Дык а че выкладывать-то? Аякса нет, да он мне и не нужен. Пример на сайте Атремия Лебедева. Я по нему буду делать отдельный блок и выводить его когда нужно. |
|
|
| Alexder | Дата: 17.01.2008, в 14:22 | Сообщение №7 |
ПользовательПользователь №: 204
Сообщений: 31
| Уже разобрался, затупил просто немного 
Спасибо за ссылочку... |
|
|
| Alexder | Дата: 21.01.2008, в 10:36 | Сообщение №8 |
ПользовательПользователь №: 204
Сообщений: 31
| | Koc, у тебя получилось все это дело в блок запихать? Если да то можешь выложить? |
|
|
| Koc | Дата: 22.01.2008, в 15:40 | Сообщение №9 |
ПользовательПользователь №: 217
Сообщений: 35
| еще не пробовал. Нет времени. Но думаю, что никаких проблем не будет. Че там сложного? через $content .="текст вякий"; все делаешь.
а ввобще нашел подобное для jQuery
http://www.sunsean.com/idTabs/
jQuery реально рулит! |
|
|
| vsv-ivanovo | Дата: 23.06.2010, в 15:41 | Сообщение №10 |
УчастникПользователь №: 132
Сообщений: 61
| http://www.linkexchanger.su/2009/99.html
Делаю все по статье, но слаед в упор не хочет работать с jQuery вкладки не получаются
Вот что выходит... |
|
|
| Serg_pnz | Дата: 23.06.2010, в 16:00 | Сообщение №11 |
АдминистраторПользователь №: 1
Сообщений: 2242
| Я работаю с mootools...
Могу глянуть на действующий пример, авось как-нибудь разберемся. |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
|
|
| vsv-ivanovo | Дата: 23.06.2010, в 16:43 | Сообщение №12 |
УчастникПользователь №: 132
Сообщений: 61
| Примеры:
http://dimox.name/accessible-tabs-with-jquery/
http://dimox.name/examples/accessible-tabs-with-jquery.html
сейчас я его попробую вставить, а не по той статье, мб получится |
|
|
| vsv-ivanovo | Дата: 23.06.2010, в 16:50 | Сообщение №13 |
УчастникПользователь №: 132
Сообщений: 61
| | Отлично, встраивается, однако все разъезжается, надо править чтобы все было норм |
|
|
| vsv-ivanovo | Дата: 23.06.2010, в 19:47 | Сообщение №14 |
УчастникПользователь №: 132
Сообщений: 61
| | Этот пример отлично работает, правда хочется его встроить не через блок, а сразу в index.html но никак не выходит, все блоки разъезжаются, а если делать в блоке то табы както уродски выглядят, Серж, мб у тебя выйдет встроить в шаблон? |
|
|
| Serg_pnz | Дата: 24.06.2010, в 09:18 | Сообщение №15 |
АдминистраторПользователь №: 1
Сообщений: 2242
| | Это к верстальщикам... |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
|
|
| Koc | Дата: 03.08.2010, в 23:44 | Сообщение №16 |
ПользовательПользователь №: 217
Сообщений: 35
| лол, нашел свою старую тему. Сто лет тут не был. Да и в общем-то с лета 2008 со слаедом уже не работал. Сейчас пишу совсем не тот код, что раньше.
Serg_pnz, еще раз спасибо за ту букву "G", которую нарисовал, выручила она тогда меня). |
|
|
| Serg_pnz | Дата: 07.08.2010, в 11:19 | Сообщение №17 |
АдминистраторПользователь №: 1
Сообщений: 2242
|  |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
|
|
| rocksmart | Дата: 19.08.2010, в 15:46 | Сообщение №18 |
 
СтарожилПользователь №: 261
Сообщений: 330
| Вот пример номер один
css для файла style.css
| Код | 1
| .tabsContent {width: 520px;margin-top:20px;}
ul.tabNavigation {list-style: none;margin:10px 0;padding: 0;}
ul.tabNavigation li {display: inline;}
ul.tabNavigation li a {padding: 5px;background-color: #eae7d5;font:13px verdana;font-weight:bold;border:1px solid #B7B296;color: #4b8f0f;text-decoration: none;}
ul.tabNavigation li a.selected,ul.tabNavigationli a:hover {background-color: #509308;border:1px solid #509308;color: #fff;padding-top: 5px;}
ul.tabNavigation li a:focus {outline: 0;}
.tabCont {border: 1px solid #b7b296;}
.tabContainer {background-color: #eae7d5;min-height: 110px;color: #4B4B4B;padding: 10px;border: 1px solid #fff;} |
сама страница
| Код | 1
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabsContent > div');
tabContainers.hide().filter(':first').show();
$('div.tabsContent ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabsContent ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
<div class="tabsContent">
<ul class="tabNavigation">
<li><a href="#first">Первая</a></li>
<li><a href="#second">Вторая</a></li>
<li><a href="#third">Третья</a></li>
<li><a href="#four">четвертая</a></li>
</ul>
<div class="tabCont" id="first"><div class="tabContainer">
Содержание первой вкладки
</div></div>
<div class="tabCont" id="second"><div class="tabContainer">
Содержание второй вкладки
</div></div>
<div class="tabCont" id="third"><div class="tabContainer">
Содержание третьей вкладки
</div></div>
<div class="tabCont" id="four"><div class="tabContainer">
Содержание четвертой вкладки
</div></div>
</div> |
|
|
|
| Serg_pnz | Дата: 19.08.2010, в 16:13 | Сообщение №19 |
АдминистраторПользователь №: 1
Сообщений: 2242
| http://www.ajaxrain.com/tag?tag=tabs
вот хороший, как раз заточен под id
http://www.unwrongest.com/projects/tabify/
смотри код в примере
http://sandbox.unwrongest.com/jquery.tabify/ |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
|
|
|
Вы не можете ответить в тему анонимно, пожалуйста, войдите или зарегистрируйтесь!
|
