Folder ./module/tabs

FADE табы

First
Second
Third

First

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!

Second

Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!

First

Second

Third

Табы без эффекта

First
Second
Third

First

Second

Third

CUSTOM EFFECT табы

First
Second
Third

First

Second

Third

Folder ./module/tabs-to-accordion

Tab 1
Tab 2
Tab 3
Tab 4

Tab 1 Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!

Tab 2 Lorem ipsum dolor sit amet

Tab 3 Lorem ipsum dolor sit amet

Tab 4 Lorem ipsum dolor sit amet

Folder ./module/tab-to-select

Home
Products
About

Home tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?

Products tab

About tab

Folder ./module/tab-to-accordion-vert

Cucumber
Ashwagandha
Comfrey root
Elderflower

1Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.

2Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.

3Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.

4Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.

Folder ./module/accordion

		jQuery('ul.accordion').slideAccordion({
		activeClass:'open',      // класс "active" открытого состояния
		opener:'>a.opener',      // селектор ссылки-opener
		slider:'>div.slide',     // селектор дропа аккордиона
		collapsible:false,       // разрешать сворачивать активный элемент аккордиона
		animSpeed: 300,          // скорость анимации аккордиона
		scrollToActiveItem: {    // прокрутка к активному элементу аккордиона
			enable: true,
			breakpoint: 1920, // max-width
			animSpeed: 600,
			extraOffset: null
		}
	});

Обычный аккордион

opener 1

Slide content 1
Lorem ipsum
opener 2

Slide content 2
opener 3

Slide content 3 Lorem ipsum
dolor sit amet

Многоуровневый аккордион

opener 1
- Sub Item 1
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.
- Sub Item 2
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.
- Sub Item 3
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.
opener 2

Slide content 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.
opener 3

Slide content 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.

Folder ./module/viewportchecker-animate

just example animate - add class "a-up" to you block

Folder ./module/slider-run

Folder ./module/js-custom-forms

Для отмены действия плагина на каком либо элементе добавить класс "jcf-ignore" на этот элемент

JavaScript Custom Forms

This library allows crossbrowser form elements customization using CSS.

Supported elements are following: select, checkbox, radio, file input (and more coming)

Number inputs

Select

Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.

Checkboxes and radios

Focused and pressed states are also handled.

Unchecked

Checked

Disabled

Disabled checked

Unchecked

Checked

Disabled

File input

Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.

Normal:

Disabled:

Folder ./module/jcf-select2

More info see - https://github.com/select2/select2

Folder ./module/smooth-scroll

Для плавного перемещения по якорным ссылкам

LINK UP TO BODY

LINK UP TO BODY WITH DATA OPTIONS

Folder ./module/countdown

Folder ./module/sticky-box

example-sticky-block

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore nesciunt perferendis optio ut reprehenderit animi doloremque nisi fugiat debitis, facilis ab praesentium commodi quam, incidunt iusto! Dolores, voluptate excepturi explicabo incidunt asperiores molestias iusto perferendis molestiae deserunt commodi consequuntur quidem, enim aliquid praesentium debitis dignissimos quibusdam, nulla corporis ullam blanditiis dolorum est quaerat aperiam ab id. Eveniet velit vitae odio perferendis porro, obcaecati veritatis! Autem dicta, beatae deleniti a placeat perferendis ab veniam? Maxime et aperiam, nam sed totam fugiat labore illum, dolor neque adipisci aspernatur magni ipsam eum beatae aliquid sunt fuga consequatur nemo alias delectus optio dignissimos ab! Earum ex laborum accusamus beatae ipsa iste et perspiciatis molestiae, blanditiis sint illo voluptas voluptate culpa autem id quaerat impedit voluptatibus laudantium cupiditate optio cum odit totam! Dignissimos suscipit expedita odit, placeat sit possimus. Voluptates quia accusantium quod quae aspernatur aliquid. Vero magnam similique, nulla labore, obcaecati dolorem, quas eum error sed alias assumenda dolor necessitatibus provident ullam! Incidunt ut laboriosam est quisquam deserunt eaque tenetur nisi aliquid repudiandae! Facere a perferendis officiis ut sunt saepe, deleniti totam ipsum quaerat animi, in nesciunt maxime blanditiis temporibus. Modi cum commodi obcaecati accusamus. Illo odit reiciendis sapiente culpa iure ad explicabo alias architecto facere, mollitia quia neque eius cum et nulla sit voluptas modi error atque nemo, placeat cumque itaque dolorum minima delectus! Mollitia, doloribus, aliquid at velit voluptatem harum, optio impedit repellendus unde tempore voluptatum ad sunt, vitae amet. Veritatis, blanditiis! Eveniet delectus soluta neque, quod debitis sapiente numquam sequi.

Folder ./module/browser-detect

Скрипт определения браузера, движка и OS, срабатывает при подключении прописывает название в тег html

Folder ./module/scriptToggleClassParents

Скрытие показ блока по другому блоку, с привязкой к родителю + добавления класса родителю

Toggle block - click me

Folder ./module/jquery-validate-form

Валидация формы + отправка ajax

Folder ./module/arrow-up

Кнопка вверх с небольшой анимацией появления исчезания вверху

↑

Folder ./module/jquery-rating-stars

Рейтинг с возможностью выбора - более подробно http://biznesguide.ru/coding/156.html

Folder ./module/table-responsive

First Name	Last Name	Job data-label	Favorite Color	Wars or Trek?	What is Lorem Ipsum?	Date of Birth
James	Matman	Chief Sandwich Eater Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Option 20
Option 21
Option 22
Option 23

Folder ./module/tabs

FADE табы

First

Second

Third

SLIDE табы

First

Second

Third

Табы без эффекта

First

Second

Third

CUSTOM EFFECT табы

First

Second

Third

Folder ./module/tabs-to-accordion

Tab 1 Lorem ipsum dolor sit amet

Tab 2 Lorem ipsum dolor sit amet

Tab 3 Lorem ipsum dolor sit amet

Tab 4 Lorem ipsum dolor sit amet

Folder ./module/tab-to-select

Home tab

Products tab

About tab

Folder ./module/tab-to-accordion-vert

Folder ./module/accordion

Обычный аккордион

Многоуровневый аккордион

Folder ./module/viewportchecker-animate

just example animate - add class "a-up" to you block

Folder ./module/slider-run

Folder ./module/js-custom-forms

JavaScript Custom Forms

Number inputs

Select

Checkboxes and radios

File input

Folder ./module/jcf-select2

Folder ./module/smooth-scroll

Folder ./module/countdown

Folder ./module/sticky-box

Folder ./module/browser-detect

Folder ./module/scriptToggleClassParents

Toggle block - click me

Toggle block

Folder ./module/jquery-validate-form

Folder ./module/arrow-up

Folder ./module/magnific-popup

Заголовок

Folder ./module/jquery-rating-stars

Folder ./module/table-responsive

Folder ./module/fancybox

Folder ./module/datepicker

Folder ./module/tooltip

Пример работы Tooltip для инлайновых ссылок (наведите на ссылки в тексте)

Пример работы Tooltip с различными способами позиционирования

Пример работы Tooltip с кастомной структурой

Folder ./module/Touch-Device-Detect

Folder ./module/add-class-for-focus

Add class parents for focus input example:

Folder ./module/input-mask