Быстрый поиск
Введите фрагмент названия статьи для поиска
Сортировка строк 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>
Читать статью целиком »
Просмотров: 4863 | Комментариев: 7
Прячем IP-адрес сервера в ссылке
26.06.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Все мы давно привыкли, что IP-адрес записывается при помощи 4 октетов, разделенных точками. Я имею в виду IPv4. Но по стандарту протокол TCP/IP также поддерживает адресацию, когда IP-адрес задан единым числом. Это число получается из октетов IP-адреса по определенной формуле. К примеру, IP-адрес главной страницы поисковика Google 64.233.165.94. Разобьем его на октеты и преобразуем в число:(64<<24) + (233<<16) + (165<<8) + 94 = 1089054046или более наглядный вариант:
(64*256*256*256) + (233*256*256) + (165*256) + 94 = 1089054046В PHP такое преобразование делается вообще одной командой ip2long. Теперь подставляем найденное значение в ссылку вместо IP-адреса: закодированная ссылка на Google. Современные браузеры распознают такие подмены и при наведении курсора на ссылку показывают корректный IP-адрес, но можете посмотреть в исходном коде страницы и убедиться, что вместо IP-адреса там действительно стоит число. При клике по этой ссылке открывается главная страница поисковика. По таким ссылкам можно загружать файлы, открывать сайты, пересылать данные, делать все то же самое, что и с обычными адресами. Единственное условие, чтобы целевой ресурс однозначно сопоставлялся с конкретным IP-адресом.
Читать статью целиком »
Просмотров: 2392 | Комментариев: 3
Таблица с колонками одинаковой ширины
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>
Просмотров: 2114 | Комментариев: 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>
Просмотров: 4807 | Комментариев: 2
3D текст с помощью CSS
13.03.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
3D текст с помощью CSS
Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.
Читать статью целиком »
Просмотров: 2547 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,348 раз
Поблагодарили 34,348 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |