
Быстрый поиск
Введите фрагмент названия статьи для поиска

Сортировка строк HTML-таблицы на JavaScript
05.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобился скрипт для сортировки строчек HTML-таблицы в зависимости от значений столбцов. В этих ваших интернетах есть немало готовых решений, но, как часто случается на моей работе, постановка задачи включает в себя кучу дополнительных условий. Например, в ячейке таблицы может быть не просто текст, а несколько HTML-тегов, сортируемое значение может быть отформатировано особым образом или к нему могут быть дописаны какие-нибудь дополнительные данные, а то и вовсе отображаемое текстовое значение в ячейке соответствует какому-то внутреннему индексу в системе и сортировать надо именно по этому индексу. Короче, отображаемое содержимое ячеек таблицы не влияет на ожидаемый порядок их сортировки.Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
- <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
- <td>менее 10 млн.</td>
- <td>без отделки</td>
- <td>32 м<sup>2</sup></td>
- <td>ООО СуперСтрой</td>
- </tr>
- <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
- <td>50.000.000</td>
- <td>черновая</td>
- <td>62.7 м<sup>2</sup></td>
- <td>ГК "ПИК"</td>
- </tr>
Читать статью целиком »
Просмотров: 2290 | Комментариев: 7

Таблица с колонками одинаковой ширины
29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:Code: Убрать нумерацию
- .equal_table {
- table-layout: fixed;
- }
- .equal_table td {
- width:100%;
- }
Code (HTML) : Убрать нумерацию
- <table class="equal_table" style="width:600px;">
- <tr>
- <td>первая</td>
- <td>вторая</td>
- <td>третья</td>
- <td>а в этой колонке будет очень длинный текст</td>
- </tr>
- </table>
Просмотров: 769 | Комментариев: 1

CSS: перечеркнутый по диагонали текст
10.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Ранее я уже выкладывал статью о том, как можно сделать текст, перечеркнутый линией другого цвета. Там линия была строго горизонтально. Сегодня будет похожая задача, но только зачеркивающая линия будет проходить по диагонали.Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
Code: Убрать нумерацию
- .striked {
- position: relative;
- }
- .striked:before {
- position: absolute;
- width: 100%;
- height: 50%;
- content: '';
- border-bottom: 4px solid #FF0000;
- pointer-events: none;
- }
Code: Убрать нумерацию
- .up::before {
- transform: rotate(-5deg);
- }
- .down::before {
- transform: rotate(5deg);
- }
Code (HTML) : Убрать нумерацию
- <div><span class="striked up">Исправленному</span> верить.</div>
- <div><span class="striked down">Исправленному</span> верить.</div>
Просмотров: 2811 | Комментариев: 2

3D текст с помощью CSS
13.03.2018 | Категория: Web-мастеру и не только | Автор: ManHunter

3D текст с помощью CSS
Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.
Читать статью целиком »
Просмотров: 1292 | Комментариев: 0

Символ рубля без использования шрифтов
18.11.2017 | Категория: Web-мастеру и не только | Автор: ManHunter

Символ рубля без использования шрифтов
Небольшой трюк, как можно нарисовать символ рубля без использования юникода и внешних шрифтов, средствами одного только CSS. Кроме того, даже с отключенными стилями цена будет отображаться просто с буквой "Р", что тоже, в принципе, допустимо.
Code (HTML) : Убрать нумерацию
- <div class="price">Цена: 20,100,999 <span class="rub">Р</span></div>
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .price {
- font-family: Verdana;
- font-size: 24px;
- }
- .rub {
- position: relative;
- color: #FF0000;
- }
- .rub::before {
- content: '–';
- position: absolute;
- bottom: -4px;
- left: -2px;
- }
- </style>
Просмотров: 997 | Комментариев: 2
