jQuery

У цій статті розглянемо розробку найпростішого скрипта степера. Степер — це такий скрипт, який перемикає екрани/слайди при натисканні кнопок «вперед» або «назад». Визначення не найкраще, але думаю, приклад пояснить, що це таке і навіщо воно потрібно.

Особисто мені кілька разів доводилось реалізовувати подібний скрипт у своїх проектах. І я подумав: чому б не зробити зручну заготовку для майбутніх задач і не поділитися нею у блозі.

Підключаємо бібліотеки

Нам знадобляться:

Bootstrap — для зручного підключення шрифтів та стилізації кнопок
Font Awesome — для використання трьох іконок (стрілка назад, вгору та вперед)
Animate.css — для простої анімації (нічого не заважає використовувати чистий CSS)
jQuery — так, вже час відмовлятись і ловити події на чистому JS, але поки що так зручніше 🙂

А виглядає це так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

2018-12-29 Pavel Web КоментаріНемає Коментарів

Як зробити таби на flexbox та jQuery

У цьому уроці розглянемо, як самостійно реалізувати дружні до SEO таби на flex та jQuery.
Наш код буде розділено на три частини.

HTML код

Перше. HTML-код, без якого ніяк:

<div class="tabs" data-tabs="name"> 
<ul class="tab-items"> 
<li class="tab__item active" data-tab-item="tab-item-1"> 
Вкладка 1 
</li> 
<li class="tab__item" data-tab-item="tab-item-2"> 
Вкладка 2 
</li> 
<li class="tab__item" data-tab-item="tab-item-3"> 
Вкладка 3 
</li> 
</ul> 

<div class="tab-contents"> 
<div class="tab__content active" data-tab-content="tab-item-1"> 
Вміст вкладки 1 
</div> 
<div class="tab__content" data-tab-content="tab-item-2"> 
Вміст вкладки 2 
</div> 
<div class="tab__content" data-tab-content="tab-item-3"> 
Вміст вкладки 3 
</div> 
</div>
</div>

Грубо кажучи, наш код складається з трьох частин:

Обгортка для табів із назвою групи, що задається у data-атрибуті «data-tabs».
Самі таби (вкладки), де кожна має своє ім’я, задане у властивості «data-tab-item». Значення цього атрибута має відповідати одному з «data-tab-content» у блоках вмісту табів.
Вміст табів, обгорнутий у блок з класом «tab-contents». Кожен блок має атрибут «data-tab-content», і його значення повинно відповідати одному з «data-tab-item». Ці атрибути використовуються для зв’язку між табами та їх вмістом.

2018-12-24 Pavel Web КоментаріНемає Коментарів

Як зробити гамбургер кнопку на HTML і CSS

У цій статті розглянемо найпростіший приклад реалізації анімованої кнопки-гамбургера (hamburger).

Схожі кнопки ви, напевно, зустрічали на сайтах із мобільною адаптацією. У bootstrap 3/4 також можна знайти таку кнопку.

2018-12-09 Pavel Web КоментаріНемає Коментарів

Як у Yii2 оновити частину контенту використовуючи JavaScripit та Pjax

Перше, що нам потрібно — це підключити сам "Pjax":

use yiiwidgetsPjax;

Далі — обгорнути потрібний контент у віджет Pjax. Наприклад ось так:

<?php Pjax::begin([ 'id' => 'pjaxContent'
]); ?>

Content here

<?php Pjax::end(); ?>

2017-08-30 Pavel Yii2 КоментаріНемає Коментарів

Як встановити параметри за замовчуванням для віджету в Yii2

Щоб встановити параметри за замовчуванням для віджета у Yii2, потрібно використати механізм впровадження залежностей (dependency injection).

Приклад з DatePicker:

Yii::$container -> set('yiijuiDatePicker', [
	'language' => 'en-US',
]);

Першим параметром у set вказується клас, а другим — необхідні параметри для налаштування. Таким чином, ми можемо заздалегідь правильно налаштувати наш віджет.

2017-08-30 Pavel Yii2 КоментаріНемає Коментарів