Как сделать вкладки на 1 веб странице?
|
|
tifaso | Дата: Понедельник, 23 Января 2012, 10:58 | Сообщение # 1 |
постоянный участник
Сейчас нет на сайте
| Вобщем нужно сделать вкладки на одной странице. Вот к примеру сайт game-maker.ru. Вверху под шапкой сайта установлено три вкладки и на каждой своя инфа. Так вот мне интересно узнать как это будет выглядеть в виде html кода и как оно вообще делается? Возможно ли оно на html?
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 11:22 | Сообщение # 2 |
старожил
Сейчас нет на сайте
| html + css + jQuery и будет красота jquery ui tabs как раз для таких фишек http://www.linkexchanger.su/2009/99.html
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 12:08 | Сообщение # 3 |
постоянный участник
Сейчас нет на сайте
| Quote (lvovand) html + css + jQuery Уу да уж html я в среднем знаю css немного понимаю, а так незнаю как сделать? Для меня это слишком сложно! Поищу ка я лучше другой способ создания вкладок именно на html
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 12:23 | Сообщение # 4 |
старожил
Сейчас нет на сайте
| Quote (tifaso) Поищу ка я лучше другой способ создания вкладок именно на html так тебе все равно придется юзать стили и джаваскрипт, если хочешь чтобы все на одной странице щелкалось и открывалось, только используя готовые библиотеки все проще намного
вот пример табса, наспех набранный, неужели он такой сложный? )
Code <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> </ul> <div id="tabs-1"> <p>Tab 1 content</p> </div> <div id="tabs-2"> <p>Tab 2 content</p> </div> </div> </div>
<script type="text/javascript"> $(function(){ $("#tabs").tabs(); }); </script>
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 12:33 | Сообщение # 5 |
постоянный участник
Сейчас нет на сайте
| Quote (lvovand) вот пример табса, наспех набранный, неужели он такой сложный? ) Code <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> </ul> <div id="tabs-1"> <p>Tab 1 content</p> </div> <div id="tabs-2"> <p>Tab 2 content</p> </div> </div> </div>
<script type="text/javascript"> $(function(){ $("#tabs").tabs(); }); </script> А где табы то ? Это же обычный список !
Или что то ещё нужно добавить?
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
Сообщение отредактировал tifaso - Понедельник, 23 Января 2012, 12:36 |
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 12:36 | Сообщение # 6 |
старожил
Сейчас нет на сайте
| так табы как раз и делаются либо списком, либо дивами
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 12:39 | Сообщение # 7 |
постоянный участник
Сейчас нет на сайте
| Вообще непонял Quote (lvovand) так табы как раз и делаются либо списком, либо дивами . Как тогда им задать правильный внешний вид?
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 12:42 | Сообщение # 8 |
старожил
Сейчас нет на сайте
| внешний вид задается стилями, какой тебе нужен вид такой через css и задаешь
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 12:57 | Сообщение # 9 |
постоянный участник
Сейчас нет на сайте
| Ну всё это понял только возникла проблемка с тем что список то идет в столбик, а табы должны быть в строчку с того то всё и началось у меня.
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 13:07 | Сообщение # 10 |
старожил
Сейчас нет на сайте
| по умолчанию список идет в столбик, но стилями то ты их можешь расположить как угодно. Дефолтные стили ui-tabs уже будут располагать список в строчку, ну а цвета, шрифты, расстояния и т.п. уже сам можешь задать какие нужно
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 13:13 | Сообщение # 11 |
постоянный участник
Сейчас нет на сайте
| Так у меня в том то и проблема что я не могу понять как его так задать стилями. Я только самую малость в них понимаю как раз такиQuote (lvovand) цвета, шрифты, расстояния и т.п. а вот как измеяется стиль списка вовсе не разгребу.
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 13:22 | Сообщение # 12 |
старожил
Сейчас нет на сайте
| возьми пример, поставь к себе, вот навскидку http://slyweb.ru/jquerydoc/tabs-options.php
потом для тегов <ul> и <li> в стилях прописывай нужные тебе свойства и придешь к нужному результату
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 13:33 | Сообщение # 13 |
постоянный участник
Сейчас нет на сайте
| Попытался, но со стилями у меня так ничего и не вышло в столбик отображается и всё. Может какой нибудь пример со стилями подскажешь
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 13:44 | Сообщение # 14 |
старожил
Сейчас нет на сайте
| так ссыль была на рабочий пример Quote (lvovand) http://slyweb.ru/jquerydoc/tabs-options.php
попробуй возьми отсюда исходники его http://prettysites.ru/jquery_ui.zip
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 13:48 | Сообщение # 15 |
постоянный участник
Сейчас нет на сайте
| Там только html, а css где можно найти?
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |
lvovand | Дата: Понедельник, 23 Января 2012, 13:50 | Сообщение # 16 |
старожил
Сейчас нет на сайте
| http://prettysites.ru/jquery_ui.zip - архив с 4-мя файлами, включая нужные js и css
Разработка и продвижение сайтов. Дизайн
|
|
| |
tifaso | Дата: Понедельник, 23 Января 2012, 14:06 | Сообщение # 17 |
постоянный участник
Сейчас нет на сайте
| Наконец то я по этому примеру немного понял как это делается, но пока ещё не доконца ну ничего дальше я сам потихоньку разберусь.
Мой сайт: http://tifaso.narod.ru/ Мои проекты: Cерия игр Hyougo; Медвежонок Кит; Argo Player; Text Manager
|
|
| |