Суббота, 20 Апреля 2024, 08:05

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Дополнительные темы » Вебмастеринг » Как сделать вкладки на 1 веб странице? (Вкладки на веб странице)
Как сделать вкладки на 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>

А где табы то sad ? Это же обычный список wacko !

Или что то ещё нужно добавить?



Мой сайт: 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
Форум игроделов » Дополнительные темы » Вебмастеринг » Как сделать вкладки на 1 веб странице? (Вкладки на веб странице)
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг