беЛн.бу - Белорусский, народный портал





Реклама

Купить ссылку здесь за руб.
Поставить к себе на сайт

ОПРОС

А как вы относитесь к "налогу на тунеядство в Беларуси"?
Всего ответов: 268

Вход на портал

Для просмотра профиля, войдите на портал как пользователь.

Меню портала

Погода

GISMETEO: Погода по г.Минск
Погода в других городах

Категории раздела

Скрипты для uCoz [32]Шаблоны для uCoz [2]
Видео уроки по ucoz [0]Иконки для ucoz [0]
Кнопки для ucoz [2]Php скрипты для ucoz [0]

Реклама



Полезные ссылки

Статистика портала



соц.сети

Облако тегов

Мы принимаем

ТОП РЕЙТИНГ

Скрипты (CMS)

Главная » Скрипты (CMS) » Для UCOZ » Скрипты для uCoz

Миниатюрные вкладки на JavaScript для uCoz

чень часто на сайтах используют вкладки (Tabs), для сортировки информации, чтобы она не была вся в куче, а была поделена по категориям. Вот например взять школьный сайт. Ваша задача состоит в том чтобы написать общую информацию про каждый класс. Не обязательно для этого создавать новые страницы, вам достаточно создать одну и на ней разместить Javascript вкладки, по-другому «Табы».

В этом материале мы выложили для вас простые вкладки без зависимостей, на чистом JavaScript. Работают во всех современных браузерах (IE9+).

Установка

1. Для начала загрузим все необходимые файлы в Файловый менеджер.

2. Между <head> и </head> подключаем файл JavaScript который будет отвечать за работоспособность наших вкладок:

<script src="http://ваша ссылка/puretabs.js"></script>

3. Там где мы хотим видеть наши вкладки в нужное место вставляем следующий код:

<div class="tabs">

  <nav class="tabs__navigation">  
  <a class="tabs__link tabs__link--active" href="#first">первая секция</a>
  <a class="tabs__link" href="#second">вторая секция</a>
  <a class="tabs__link" href="#third">третья секция</a>
  <a class="tabs__link" href="#fourth">четвёртая секция</a>  
  </nav>
   
  <p class="tabs__section" id="first">Умножение двух векторов…</p>
  <p class="tabs__section" id="second">Нормаль к поверхности…</p>
  <p class="tabs__section" id="third">Математическое моделирование…</p>
  <p class="tabs__section" id="fourth">Подынтегральное выражение…</p>
   
</div>

<script> pureTabs.init('tabs__link', 'tabs__link--active'); </script>

 

Ссылки и секции связаны идентификатором секции, который прописывается в атрибут href у ссылки. Каждая ссылка должна иметь общий класс (по умолчанию — puretabs). Чтобы задать секцию по умолчанию, следует добавить к ссылке на эту секцию класс puretabs--active.

4. Таблица стилей (CSS):

.tabs {
border: 1px solid #ddd;
position: relative;
margin-top: 5rem;
margin-bottom: 3rem;
}

.tabs__section {
margin: 1rem;
}

.tabs__navigation {
margin-left: -1px;
position: absolute;
top: -34px;  
}  

.tabs__link {
display: inline-block;
border: 1px solid #ddd;  
text-decoration: none;  
padding: .25rem .75rem;  
color: #B3B3B3;  
background: #E7E7E7;  
margin-left: .25rem;
}

.tabs__link:first-child {
margin-left: 0;
}  

.tabs__link--active {
font-weight: bold;  
border-bottom-color: #fff;
background: #fff;
color: #186baa;
}

 

Чтобы задать ссылкам пользовательские классы, достаточно при инициализации скрипта передать их в качестве параметров:

Пользовательские классы для вкладок на JavaScript

  • var className = 'tab', // Общий класс ссылок
  • activeClassName = 'tab--active' // Класс активной ссылки
  • pureTabs.init(className, activeClassName);
Размер файла: 1 kb







Внимание!!! Скачивание файла доступно, только для групп "Пользователи", "VIP" и "Я, Online".
Категория: Скрипты для uCoz | Добавил: rinhed (01.10.2015)
Просмотров: 47 | Теги: скрипты для Ucoz, миниатюрные, JavaScript, вкладки, uCoz, для, на
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Реклама

Купить ссылку здесь за руб.Поставить к себе на сайт

Корзина

Ваша корзина пуста

Переводчик

Выберите язык портала

Поиск по порталу

Поиск от яндекс

Анекдоты...

[23.12.2016][Разные]
Топ дня! 15 анекдотов

Маленький мальчик бегает по квартире со словами:
- Хочу быть Робин Гудом. Хочу быть Робин Гудом.
Мама умиленно:
- Каким он у нас хорошим человеком растет.
Отец:
- Не торопись с выводами. Он еще не дочитал до места, где Робин Гуд раздает награбленное бедным.

***

Если честно, она сама не знала чего хотела, но он всё равно должен был догадаться обо всём сам.(Женская логика)

***

Начальству не объяснить, что если работа — любимая, то на ней хочется спать.

***

Определить, в какой вы сейчас Корее, Северной или Южной, можно по мху на коре деревьев. Если люди его едят, то вы в Северной.

***

Вот смотрю на некоторых людей, и в голове только одно: "Как получить лицензию на оружие?".

***

Клинтонша опять хочет пересчитывать голоса...
Ох, допересчитывается до того, что вместо Трампа победит Путин!

***

Женщину даже наказать нельзя. Ей это может понравиться.

***

Сесть в России можно за все. А вот подняться - только если знаешь тех, кто сажает.

***

Если при взгляде на женскую грудь мужчине не до шуток — значит размер подходящий.

***

Поднимаюсь по лестнице, смотрю - выбросили толстые пачки журнала "Работница". Понимаю - в подъезд провели интернет!

***

- С таким трудом выпроводил Коляна на медведя охотиться, ты не представляешь.
- Еще как представляю, ведь его единственное ружье поломалось и не стреляет.

***

Поговаривают, в Польше на всякий случай запретили продавать кастрюли.

***

На широкую ногу жить не получилось. Попробовал жить на широкую руку. Нет, ладонь узковата.

***

Поговаривают, в России появились почтальоны-оборотни. Под видом людей, разносящих пенсии, они оформляют ни в чём не повинным старикам банковские кредиты.

***

Утром мажу масла грамм, сразу мыслю, как там Трамп?!

(0)

Видео

Тимати feat. Филипп Кир...

00:04:42
0 0 0.0

ANAR - Второе дыхание

00:04:34
0 0 0.0

Грибы - Тает Лёд

00:03:51
0 0 0.0

Джиган - Дни и ночи

00:03:11
0 0 0.0

Мот feat. Ани Лорак - С...

00:04:32
0 0 0.0

Получить бонус

Еще бонусы тут

Моментальный обмен WebMoney

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

Бонус

BAKSGRAD.RU
Обновить Код.