HTML, CSS, JS




Эффектный join массива объектов с фильтрацией по условию в строку

TypeScript

Для передачи параметров через Get нужно было собрать строку из выбранных значений Checkbox. В проекте использовал Checkbox из Fluent UI, но подход аналогичный для другого компонента. Собственно, здесь даже не про React, а про TypeScript.

(далее...)

Поиск максимума и подсчет количества из массива объектов с помощью reduce

TypeScript

Сейчас много работаю с TypeScript и потому иногда пишу методы, которые могу не сразу вспомнить, если потом переключусь, к примеру, на NetCore проект. Потому для потенциального освежения памяти в будущем запишу пару полезных примеров использования reduce - поиск максимума и подсчет количества в массиве объектов.

(далее...)

Фон с закруглением для тэга <tr>

Фон в полоску с помощью CSS

Ячейка с закругленными краями выглядит эффектно и часто сильно добавляет карме к интерфейсу сайта. Закругления добавляют элементу мягкости, создают ощущение гармонии. В современных дизайнах закругленные углы часто используются, чтобы придать интерфейсам и объектам более современный и стильный вид.

(далее...)

Как сделать компонент TextField в Material UI маленьким

React Material UI MUI

Чтобы изменить размер компонента TextField в Material UI, вы можете сделать несколько вещей. Базовая модификация очевидна, но другие не так просты. По умолчанию компонент TextField довольно большой, и сделать его меньше - обычная задача.

(далее...)

Click-2-Call, или как делать гиперссылки для звонков по телефону

Смартфон Honor 8 Lite 32Gb

С развитием IP телефонии и различных сервисов, интегрирующих компьютер и телефон, стало возможным осуществлять звонки на телефонные номера прямо с сайта. Это очень удобно. Особенно удобно позвонить по телефону с сайта, когда видишь номер телефона в браузере мобильного телефона. Ниже расскажу, как нужно делать кликабельные ссылки для осуществления звонков по телефону.

(далее...)

Фреймворки для работы с таблицами в веб-интерфейсе

Для генерации и работы с таблицами на сайте существует несколько библиотек. Почти все они частично бесплатные, т. е. могут быть использованы как бесплатно, так и платно. Платные версии, разумеется, обладают намного большим функционалом.  Я выделил 4 фреймворка для работы с таблицами, которые лично мне понравились. Их безусловно больше. Мой выбор остановился на фреймворках Ag-grid, FancyGrid, HandSontable и Koolgrid. Эти фреймворки не только отображают таблицы (только для отображения можно использовать кучу бесплатных библиотек), но и позволяют редактировать данные на странице. Рассмотрим их.

(далее...)

Реализация сносок и всплывающих подсказок с помощью Bootstrap

Подсказка

В бумажных книгах около мест, требующих пояснений, стоят цифры, а внизу страницы около цифр идут соответствующие пояснения. У таких пояснений есть свое название - сноски. Иногда их выносят в конец текста, как например в случаях со списком используемой литературы в рефератах и диссертациях. Где бы их ни размещали, сноски всегда отделены от основного текста в бумажных книжках.

(далее...)

Полупрозрачный фон в CSS

Полупрозрачный фон

Чтобы добиться полупрозрачного фона с помощью CSS, есть как минимум 2 способа, которые сразу в голову приходят – с использованием полупрозрачного png изображения или с использованием RGBa ("a" – значит alpha) для цвета фона. Работает это в современных браузерах, начиная с IE 9. В Chrome, Firefox и т.п. работает очень давно.

(далее...)

Исправление ошибки FileError: 'http://localhost:1234/Styles.less' wasn't found (404) при открытии веб-проекта с .less из Visual studio в IIS

less

Для одного проекта, в котором планировалось использовать много CSS-ной верстки, решил добавить .less файл для упрощения работы с CSS. Сделал все как обычно – создал файл Styles.less, в html-файле прописал путь к файлу Styles.less и less.min.js. Но при обновлении страницы было сообщение об ошибке: FileError: 'http://localhost:2724/Styles.less' wasn't found (404).

(далее...)

Подсветка элементов с помощью jQuery

Довольно распространенная задача – подсвечивать элементы формы. Например, при проверке на корректность заполнения очень неплохо подсветить их и перевести фокус на пропущенные элементы.

(далее...)


MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика