Меню сайта
Категории раздела
Скрипты для uCoz [582] |
HTML коды для uCoz [58] |
Шаблоны для uCoz [189] |
Социальные сети и закладки [4] |
Меню для uCoz сайта [30] |
Опросы на uCoz [6] |
Работа с Информерами [7] |
Для Веб мастера [90] |
CSS стили для uCoz [15] |
Как это сделать? (для новичков с картинками) [11] |
Видео Уроки по uCoz [2] |
Полезное для пользователей [45] |
Counter Strike мониторинг [5] |
Регистрация и прикрепление своего домена к uCoz [1] |
Новости сайта scripts-for-ucoz [47] |
Учебник HTML [11] |
Разное/Другое [12] |
Статьи про uCoz
Рекламко
Наш опрос
Статистика
Онлайн всего: 6
Гостей: 6
Пользователей: 0
Зарегистрировано 31229 (сегодня + 0 новых, вчера + 0 новых), В каталоге файлов 1130 материала(ов), Оставлено 5178 комментариев, На форуме создано тем и ответов.
установить такую статистику
Блок Программ
Установить себе такой Блок
Скрипты и HTML для uCOz
Блок CW результаты
Скачать Броузеры
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)
установить такой блок
Поиск
Рекламко
http://www.allforyou13.ucoz.ru
Добавить свой сайт в ТОП!
И он будет рекламироваться тут БЕСПЛАТНО!
стань модератором сайта и рекламируй свой сайт за бесплатно тут
Расскажи Друзьям!
Комментарии
Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
написал:
написал:
В итоге получим в статистике целую кучу ботов, и отказов. Что само собой скажется на ПС
Новость: Фотогалерея изображений для uCoz
Sultanbek Ajdos написал:
Sultanbek Ajdos написал:
Не убрать календарики правильно
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Читать все комментарии
Топ комментаторов
VKONTAKTE
FACEBOOK
Кто и Откуда Вы?
Мини-чат
Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [06.11.2013, 14:56] |
Вкладки или табы (tabs) для uCoz
Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!] | |||
Отличные рабочие красивые и легкоустанавлемые вкладки или от английского слова - табы (tabs) для вашего сайта uCoz. Что же может быть лучше и для кого это надо? Пожалуй, этот материал будет полезен любому веб-мастеру, который ценит пространство своего сайта и наполняет его нужной информацией. Такие вот вкладки дают ему предоставлять выбор посетителю того, что он желает видеть. Будь то последние новости, или комментарии... а может и новые добавленные картинки и видео. Всё это может теперь спрятать и предложить юзеру всего один блок на сайте и при одном нажатие мышки на таб (вкладку) посетитель сам выберите то, что он хочет видеть в данный момент.
Установка не очень сложная, так как в этом материале вам не нужно будет ничего скачивать и загружать на свой сайт. Главное, в нужное место скопировать коды и отредактировать их под свой сайт. Совет: используйте информеры внутри вкладок. Например, создайте информер последних комментариев, ленты новостей, фотографий и видео и каждый из информеров вставляйте в свою вкладку, таким образом у вас один блок будет содержать очень много нужной и полезной информации, а пользователь выберет лишь только то, что ему нужно. Если будут вопросы по установке, то незамедлительно пишите комментарии, а модераторы сайта постараются вам помочь с этим разобраться. Так же кликайте на 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 Расскажи друзьям интересные новости: - Установить на свой сайт блок социальных закладок | |||
Просмотров: 13158 | Загрузок: 0 | Комментарии: 6 | Рейтинг: 0.0/0 |
Всего комментариев: 6 | |
| |
По вопросам сотрудничества и рекламы пишите на почту rusalex11@live.com