Max Sapunov

Маски для input на JS

2020-10-07T14:43:09.155Z

Сегодня познакомлю с интересной библиотекой maskedinput.js. Если посмотреть на гите, то можно заметить - библиотека не из свежих, но достойных альтернатив маловато. Сам файл плагина весит всего 4кб, а зато сколько всего умеет. Сейчас все расскажу.

Устанавливаем

📎Качаем модуль с Гугл диска или с GitHub.

🪓Подрубаем его перед </body> :

<script src="js/jquery.maskedinput.min.js"></script>

Не забудьте подключить jQuery!

Используем

🪓Вставляем в файл скриптов, либо в HTML сайта через <script>...</script> эту кодулю:

$(document).ready(function () {
$(".phonemask").mask("+7 (999) 999 99-99");
});

Здесь мы указали: класс поля .phonemask, к которому будем прикручивать маску для телефона, и собственно саму маску +7 (999) 999 99-99 которая любую вводимую в поле информацию будет приводить к этому виду.

🪓И дописываем этот класс к нашему полю:

<input type="text" name="phone" class="phonemask">

И не соврал - работает!

Другие маски

Помимо масок для номеров телефона, плагин позволяет сделать маски:

🗓Для даты

$(".datemask").mask("99/99/9999");

💳Для номера карты

$(".cardmask").mask("9999-9999-9999-9999");

🔢И даже для обычных чисел

$(".numbermask").mask("0.9?9");

Подписаться на @wjourn 🔥

Модальные окна fancybox

2020-10-02T08:23:37.114Z

Исторически сложилось, что разные люди называют эти самые всплывашки абсолютно по-разному. Pop-up, модальные окна и до кучи AJAX-окна.

Но, предлагаю определится. То что мы сейчас будем делать - называется модальное окно. Pop-up - история про другое, это больше в сторону порно-баннеров. Если разобраться, то и AJAX вообще не про это, аякс вообще отдельно живущая технология, которая не имеет никакого отношения к нашим всплывашкам (практически никакого).

Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек. Можно делать их и вообще без JS, можно по-быстрому написать свою. Но нам же нужна современная, отлаженная, быстрая и легкая реализация модальных окон, верно? Да конечно верно, о чем разговор.

Установка fancybox 3

1. Качаем сам плагин отсюда: https://fancyapps.com/fancybox/3/ (кнопка Download)

2. У нас появится архив с кучей всего непонятного. Без паники, нам нужны в папке dist всего 2 файла:

Выбираем эти 2 файла и закидываем в свой проект

3. После того как закинули файлы, самое время их подключить, на нужных страницах перед </body> вставляем:

<link rel='stylesheet prefetch' href='/css/jquery.fancybox.min.css'>
<script src='/js/jquery.fancybox.min.js'></script>

Убедите также что подключена библиотека jQuery! Кстати, подключить по-быстрому ее можно так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

4. Да впринципе все, можем пользоваться 🙌

Делаем модальное окно на fancybox 3

<a data-fancybox data-src="#modal" href="javascript:;">Открыть окно</a>
 
<div style="display: none;" id="modal">
  <p>Здарова отец</p>
</div>

Собственно что мы тут видим. В <a> у нас ссылочка при клике на которую будем открывать модальное окно с id #modal . И ниже - само модальное окно.

Также его можно вызывать из функции JS и генерировать контент прямо в скрипте:

$.fancybox.open('<div class="message"><h2>Здарова</h2><p>Отец</p></div>');

Делаем увеличение картинки через fancybox 3

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Подпись к картинке">
    <img src="thumbnail_1.jpg" alt="" />
</a>

В href="" указываем ссылку на ту картинку, которая будет открывать при клике. В data-fancybox можно указать название галереи, что бы оно сгруппировалось в слайдшоу. И внутри всей ссылки у нас лежит картинка, можно и нужно там указывать уменьшенный вариант изображения.

Загружаем окно по AJAX

Вот тут есть небольшое пересечение с AJAX. Fancybox может загружать контент окна по ajax запросу, делается это так:

<a data-fancybox data-type="ajax" data-src="/ajax/ajax.php" data-filter="#two" href="javascript:;">
    AJAX content
</a>

Теперь при клике на кнопку, мы будем забирать ответ из файла ajax.php.

Можно также круто работать с фреймами и с видео. Больше настроек и опций тут.

Подписаться на @wjourn 🦩

Слайдер OWL Carousel 2.0 для ваших проектов

2020-09-29T14:32:55.636Z

Как часто приходится использоваться листалки картинок? Да почти в каждом проекте 🙀 Даже самый скучный лендос из одной секции тоже хочет быть со слайдером.

Можно и свой сделать, но зачем? Существует туева хуча популярных велосипедов, таких как: Slick.js, bxSlider, OWL Carousel и т.д. Я долго и нудно пользовался сликом, пока не наткнулся на OWL Carousel 2.

На мой испорченный вкус - очень удобная и сильно кастомизабельная штука.

Базар базаром, но давайте подробней.
Первое что хочется посмотреть, это демки - они тут. Кому впадлу переходить, напишу что слайдер имеет 60+ опций и подойдет практически под любую задачу.

Пару строк как его использовать

1. Скачиваем слайдер с официального гита: https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip

2. Подрубаем стили:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Кстати, в последнем файле правится внешний вид слайдера.

3. Подрубаем скриптули:

<script src="owlcarousel/owl.carousel.min.js"></script>

Убедитесь что вы подключили jQuery!

4. Собственно ставим в HTML в нужное место наш слайдер:

<!— Слайдер для фоток жопы -->
<div class="owl-carousel"> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
</div>

5. Наконец, дописываем скриптулю в ваш файл скриптов, ну или под слайдером в тег <script></script>:

$(document).ready(function(){
$(".owl-carousel").owlCarousel(); 
});

У слайдера есть много опций, они тут - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Прописываются они примерно так:

$(".owl-carousel").owlCarousel({
nav: true, //Навигация стрелочками
loop: true, //Бесконечный слайдер
dots: false, //Навигация точками
autoplay:true //Автоматическая смена слайдов
});

Слайдер OWL Carousel 2 отвечает на вопрос в чем смысл жизни

Подписаться на @wjourn 🦉

Определяем город по IP на PHP

2020-09-28T12:21:10.635Z

Самый элементарный способ ~~вычислить~~ определить город посетителя сайта по IP - воспользоваться каким то готовым API.

Sypex Geo как раз предоставляет такую возможность. Сразу немного инфы по количеству запросов:

10 000 запросов в месяц на каждого пользователя
если мы зарегистрируемся - у нас будет 30 000 запросов в месяц на каждого пользователя

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

Итак, все что нам нужно - это закинуть им запрос. На пыхе (PHP), можно написать так:

if($request = filegetcontents("https://api.sypexgeo.net/json/".$SERVER['REMOTEADDR']))
{
$array = json_decode($request);
$geoipcity = $array->city->name_en;
}

Где $SERVER['REMOTEADDR'] - IP нашей жертвы.

Ответ нам придет такой (в JSON):

JSON ответа

При этом, на скрине не видно, но там еще валяется информация о стране (население, телефонный код, ближайшие соседи) и о регионе. Имена мы получаем сразу на 7 языках, что наверняка пригодится.

Подписаться на @wjourn