Фильтрация и проверка данных PHP. Частые ошибки

>

Неупорядоченный список будет содержать все элементы портфолио, с ссылками на изображения. Каждый элемент списка будет иметь класс, на основе которого и будет производится фильтрация элементов, когда мы нажмем одну из радио-кнопок.

CSS

Мы создадим три примера этого эффекта, но сначала давайте посмотрим на общие стили.

Я опускаю все префиксы браузеров, но вы можете найти их в исходниках.

Основной контейнер будет иметь фиксированную ширину:

Ff-container{
width : 564px ;
margin : 10px auto 30px auto ;
}

Теги label будут скрывать радио-кнопки и мы зададим им градиент и небольшие тонкие тени:

Ff-container label{
font-family : "BebasNeueRegular" , "Arial Narrow" , Arial, sans-serif ;
width : 25% ;
height : 30px ;
cursor : pointer ;
color : #777 ;
text-shadow : 1px 1px 1px rgba(255 , 255 , 255 , 0.8 ) ;
line-height : 33px ;
font-size : 19px ;
background : linear-gradient(top , #ffffff 1% , #eaeaea 100% ) ;
float : left ;
box-shadow:
0px 0px 0px 1px #aaa ,
1px 0px 0px 0px rgba(255 , 255 , 255 , 0.9 ) inset ,
0px 1px 2px rgba(0 , 0 , 0 , 0.2 ) ;
}

Для первого и последнего тега label мы создадим закругленные уголки:

Ff-container label.ff-label-type-all{
border-radius: 3px 0px 0px 3px ;
}
.ff-container label.ff-label-type-3 {
border-radius: 0px 3px 3px 0px ;
}

Для каждой отмеченной радио-кнопки, мы создадим стили имитирующие эффект "нажатия":

Ff-container input.ff-selector-type-all : checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1 : checked ~ label.ff-label-type-1 ,
.ff-container input.ff-selector-type-2 : checked ~ label.ff-label-type-2 ,
.ff-container input.ff-selector-type-3 : checked ~ label.ff-label-type-3 {
background : linear-gradient(top , #646d93 0% , #7c87ad 100% ) ;
color : #424d71 ;
text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , 0.3 ) ;
box-shadow:
0px 0px 0px 1px #40496e ,
0 1px 2px rgba(0 , 0 , 0 , 0.1 ) inset ;
}

Так как у нас все наши элементы находятся на одном уровне, мы используем обобщенный родственный комбинатор (the general sibling combinator), который обозначается символом "тильда" (~). Селектор в ввиде input.ff-selector-type-3:checked ~ label.ff-label-type-3 значит, что элемент input.ff-selector-type-3:checked следует за элементом label.ff-label-type-3 в иерархии документа, исключая различные комментарии и т.п., и они обязательно имеют одного родителя. Этот «трюк» нам также позволит получить различные типы элементов в портфолио.

Элементы input могут быть скрыты, поскольку у нас есть label , которые будут делать всю работу:

Ff-container input{
display : none ;
}

Теперь давайте перейдем к элементам списка:

Ff-items{
position : relative ;
margin : 0px auto ;
padding-top : 20px ;
}

Ff-items a{
display : block ;
position : relative ;
padding : 10px ;
background : #fff ;
box-shadow: 0 1px 2px rgba(0 , 0 , 0 , 0.1 ) ;
margin : 4px ;
width : 160px ;
height : 120px ;
}
.ff-items a span{
display : block ;
background : rgba(113 , 123 , 161 , 0.9 ) ;
font-style : italic ;
color : #fff ;
font-weight : bold ;
padding : 20px ;
position : absolute ;
bottom : 10px ;
left : 10px ;
width : 120px ;
height : 0px ;
overflow : hidden ;
opacity: 0 ;
text-align : center ;
text-shadow : 1px 1px 1px #303857 ;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
height : 80px ;
opacity: 1 ;
}
.ff-items li img{
display : block ;
}

Вот и все "общие" стили. Теперь давайте посмотрим стили для фильтрации элементов!

В первом примере мы сделаем, чтобы выбранные элементы (т.е. когда соответствующую кнопку радио "отметили") имели самую высокую яркость.

Мы добавим transition к элементу списка для создания непрозрачности:

Ff-items li{
margin : 0px ;
float : left ;
opacity: 0 ;
width : 188px ;
height : 148px ;
transition: opacity 0.6s ease-in-out;
}

Затем мы будем использовать обобщенный родственный комбинатор, чтобы установить непрозрачность для соответствующих пунктов:

Ff-container input.ff-selector-type-all : checked ~ .ff-items li,



opacity: 1 ;
}

Так как у нас все радио-кнопки изначально отмечены, то все элементы будут изначально имеют непрозрачность равную 1.

Теперь, мы будем использовать селектор:not(), чтобы указать список элементов, которые не имеют выбранного класса и должны иметь прозрачность 0.1:

opacity: 0.1 ;
}

Описания для этих элементов списка не должны показываться при наведении:

display : none ;
}

Это был первый пример. Давайте взглянем на следующий.

В этом примере мы сделаем выбранные элементы увеличенными, в то время как другие уменьшим и сделаем более прозрачными. Итак, давайте добавим transition к элементам списка:

Ff-items li{
margin : 0px ;
float : left ;
width : 188px ;
height : 148px ;
transition: all 0.6s ease-in-out;
}

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

Ff-container input.ff-selector-type-1 : checked ~ .ff-items .ff-item-type-1 ,
.ff-container input.ff-selector-type-2 : checked ~ .ff-items .ff-item-type-2 ,
.ff-container input.ff-selector-type-3 : checked ~ .ff-items .ff-item-type-3 {
opacity: 1 ;
transform: scale(1.1 ) ;
}

Другие элементы портфолио мы будем уменьшать и применять к ним низкий уровень прозрачности:

Ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) ,
.ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) ,
.ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 ) {
opacity: 0.1 ;
transform: scale(0.5 ) ;
}

И мы опять будем скрывать описание для элементов, которые не выбраны:

Ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) span,
.ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) span,
.ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 ) span{
display : none ;
}

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

Мы хотим, чтобы невыбранные элементы исчезли, но так как мы не можем анимировать свойство display, мы используем одну маленькую хитрость: когда мы будем уменьшать элементы, мы изменим ширину и сделаем её равной 0.

Итак, давайте зададим изначально ширину списка равную 0:

Ff-items li{
margin : 0px ;
float : left ;
height : 148px ;
width : 0px ;
transform: scale(0 , 0 ) ;
}

Когда выбран пункт "all", мы изменим масштаб равный 1 и ширину установим равную 188px:

Ff-container input.ff-selector-type-all : checked ~ .ff-items li{
width : 188px ;
transform: scale(1 , 1 ) ;
transition: transform 0.3s linear;
}

Помните, что это состояние на начальном этапе, так как у нас "all" отмечено по умолчанию.

Теперь, когда мы отмечаем один определенной тип, элементы с этим типом класса будут сначала исчезать вместе с остальными элементами, а затем появляться снова.

Ff-container input.ff-selector-type-1 : checked ~ .ff-items .ff-item-type-1 ,
.ff-container input.ff-selector-type-2 : checked ~ .ff-items .ff-item-type-2 ,
.ff-container input.ff-selector-type-3 : checked ~ .ff-items .ff-item-type-3
{
transition: transform 0.3s linear, width 0s linear 0.3s;
animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) ,
.ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) ,
.ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 )
{
animation: scaleDown 0.3s linear forwards;
}
@keyframes scaleUp {
50% { width : 188px ; transform: scale(0 , 0 ) ; }
100% { width : 188px ; transform: scale(1 , 1 ) ; }
}
@keyframes scaleDown {
0% { width : 188px ; transform: scale(1 , 1 ) ; }
99% { width : 188px ; transform: scale(0 , 0 ) ; }
100% { width : 0px ; transform: scale(0 , 0 ) ; }
}

Обратите внимание, что этот пример экспериментальный и он будет корректно работать только в браузерах, поддерживающих CSS анимацию. В Firefox 9.0.1 поведение не то, которое ожидалось (при наведении на label анимация срабатывает еще раз), но все работает в Авроре 11.0a2, так что может быть это баг браузера.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

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

Если раньше трудно было это даже представить, то сейчас в каскадной таблице реализованы практически все программные фильтры, начиная от размытия и заканчивая художественно-цветовыми моделями.

Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

Поддержка CSS фильтров браузерами

В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

Функции и синтаксис CSS фильтров

Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

Синтаксис

Filter: название фильтра (процент значения) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Применение нескольких фильтров */ filter: contrast(150%) grayscale (80%);

Список фильтров

Примеры CSS filters

Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.

Фильтр размытия

В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efbl1 img{ filter: blur(2px); -webkit-filter: blur(2px); } /*для hover-эффекта*/ .efbl2 img{ transition: all 0.6s ease 0s; } .efbl2:hover img{ filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; }

Фильтр тень

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efdrswd1 img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); } /*для hover-эффекта*/ .efdrswd2 img{ transition: all 0.6s ease 0s; } .efdrswd2:hover img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; }

Фильтр обесцвечивания

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efgrays1 img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); } /*для hover-эффекта*/ .efgrays2 img{ transition: all 0.6s ease 0s; } .efgrays2:hover img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; }

Фильтр яркости

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efbrig1 img{ filter: brightness(150%); -webkit-filter: brightness(150%); } /*для hover-эффекта*/ .efbrig2 img{ transition: all 0.6s ease 0s; } .efbrig2:hover img{ filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; }

Фильтр контрастности

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efcontr1 img{ filter: contrast(150%); -webkit-filter: contrast(150%); } /*для hover-эффекта*/ .efcontr2 img{ transition: all 0.6s ease 0s; } .efcontr2:hover img{ filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; }

Фильтр тона цвета

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

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efhrotai1 img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } /*для hover-эффекта*/ .efhrotai2 img{ transition: all 0.6s ease 0s; } .efhrotai2:hover img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; }

Фильтр инверсия

Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efinve1 img{ filter: invert(100%); -webkit-filter: invert(100%); } /*для hover-эффекта*/ .efinve2 img{ transition: all 0.6s ease 0s; } .efinve2:hover img{ filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; }

Фильтр насыщенность

Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efsatut1 img{ filter: saturate(165%); -webkit-filter: saturate(165%); } /*для hover-эффекта*/ .efsatut2 img{ transition: all 0.6s ease 0s; } .efsatut2:hover img{ filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; }

Фильтр сепия

Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efsepiaa1 img{ filter: sepia(100%); -webkit-filter: sepia(100%); } /*для hover-эффекта*/ .efsepiaa2 img{ transition: all 0.6s ease 0s; } .efsepiaa2:hover img{ filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; }

Фильтр прозрачность

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efopaty1 img{ filter: opacity(50%); -webkit-filter: opacity(50%); } /*для hover-эффекта*/ .efopaty2 img{ transition: all 0.6s ease 0s; } .efopaty2:hover img{ filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; }

Фильтр ссылка

Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.

Генератор CSS filters

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

Заключение

Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

Наконец, я нашел время и хочу представить вашему вниманию свой новый скрипт, который позволяет осуществить фильтрацию данных в html-таблицах.

Скрипт поддерживает следующие типы фильтров:

• Текстовое поле
• Выпадающий список
• Радио-кнопки
• Чекбоксы

Скрипт имеет малый размер и достаточно прост в подключении, а так же неплохо комбинируется со скриптом сортировщиком таблиц скачать его вместе с примерами подключения и настройки можно в моем репозитории: bitbucket.org

Фильтр таблицы демо:

Концептуально скрипт состоит из двух частей: объектов-фильтров filterTable.Filter и собственно из функции filterTable(...) , которая привязывает эти объекты-фильтры к html-таблице.

Объект-фильтр имеет следующий конструктор:

/** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) Первый аргумент: HTMLElement HTMLElementRef

Второй аргумент: Function callback

Функция: callback(value, filters, i) где:
String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции
HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца.
Number i - индекс элемента фильтра в массиве filters который является валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции обратного вызова будет содержать элемент, с которым провзаимодействовал пользователь, в результате чего был запущен процесс валидации. Функция должна возвращать true, или false в зависимости от того проходит фильтрацию пришедшее значение value при установленном значении фильтра filters[i] согласно вашей задумке, или нет.

Третий аргумент: String eventName

Название события привязанного к фильтру, по которому будет запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) onchange - значение по-умолчанию

Сама же функция filterTable имеет следующую сигнатуру:

таблицы * @param Object filters - объект-конфигурация фильтров: { N: FILTER[, N: FILTER] } * * Где: * NUM - это натуральное число - номер столбца таблицы, обслуживаемого * фильтром. Этот номер может принимать значения от 0 до кол-во * столбцов таблицы - 1. Номера можно задавать не по порядку. * * FILTER - это ссылка на HTML-элемент представляющий собой элемент * HTML-формы и имеющий атрибут value (select в том числе), либо * объект типа tableKit.Filter */ filterTable(HTMLTBodyRef, aFilters)

Выглядит достаточно запутанно, но давайте разберем на примере. Для начала нам необходим html - каркас таблицы. Заметьте, что фильтры - это просто элементы html-формы они кстати имеют уникальные атрибуты id по которым мы их будем выбирать для передачи в конструктор filterTable.Filter

Итак, каркас у нас есть. Фильтры в нём есть. Осталось все это связать воедино. Но давайте для начала рассмотрим простейший вариант подключения, и разберем лишь фильтры для 2-го и 3-го столбцов, потому, как там используются текстовое поле и выпадающий список значений, которые скрипт-фильтр понимает "нативно" без нужды создания filterTable.Filter Я нарочно закомментировал элементы 0, 3, 4 и пока обозначил их реализацию как "..." что бы преждевременно не отпугнуть слабонервных:)

Обратите внимание, что второй аргумент ф-ции filterTable(..., {...} ) - это объект-конфигурация фильтров, у которого свойства имеют имена-цифры, начиная от 0 и до КОЛ-ВО_СТОЛБЦОВ_ТАБЛИЦЫ-1 Значением каждого такого свойства должен стать фильтр:

таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: 0: ..., */ /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: document.getElementById("text"), /* Фильтр для третьего столбца выпадающий список: */ 2: document.getElementById("digits"), /* Фильтр для четвертого столбца радио кнопки: 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: 4: ... */ });

Если кому то понадобится весь функционал, как показанный в демо примере, например фильтры с радио-кнопками, или фильтры с чекбоксами, то подключение становится немного сложнее потому, как по сути это фильтры, состоящие из набора html-элементов, и при валидации нужно проверять значения всего набора такого фильтра. Тут в действие вступают callback-функции. Ниже в листинге я постарался подробно прокомментировать этот момент.

Опять же обратите внимание, что для текстового поля и выпадающего списка достаточно просто передать ссылку на html-элемент. А так же обратите внимание на подключение последнего фильтра. Вы спросите почему - ведь в последнем столбце фильтр - это текстовое поле! Да это так, но если вы внимательно поработали с демо примером, то заметили, что первый фильтр - тестовое поле срабатывает только после того как вы ввели значение полностью и нажали кнопку "Enter", или кликнули в любое другое место страницы т.е. фильтр срабатывает по дефолтному событию "onchange"! А вот фильтр-текстовое- поле последнего столбца - срабатывает моментально как только вы вводите какой-либо символ. Вот для реализации этого поведения пришлось создавать фильтр по всем правилам с filterTable.Filter а так же понадобилось задавать callback функцию и плюс к этому необходимо было передать имя события "onkeyup" по которому будет инициироваться процесс фильтрации. Вот так. Надеюсь я вас не запутал окончательно.

FilterTable(/* Ссылка на элемент таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: */ 0: new filterTable.Filter([ /* Элементы фильтра */ document.getElementById("charA"), document.getElementById("charB"), document.getElementById("charC") ], /* Коллбэк ф-ция валидации */ function (value, filters, i) { /* Если чекбокс не отмечен - его значение не учавствует в валидации поэтому мы обязаны вернуть true */ if (false === filters[i].checked) return true; /* Далее, при проверке, мы должны одновременно проверять значения всех элементов набора при условии чекбокс отмечен */ return filters.checked && filters.value === value || filters.checked && filters.value === value || filters.checked && filters.value === value; }), /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: document.getElementById("text"), /* Фильтр для третьего столбца выпадающий список: */ 2: document.getElementById("digits"), /* Фильтр для четвертого столбца радио кнопки: */ 3: new filterTable.Filter(, /* Коллбэк ф-ция валидации */ function (value, filters, i) { /* В filters - у нас радио кнопка "Не выбрано", если она установлена фильтр не участвует в валидации и мы обязаны вернуть true */ if (true === filters.checked) return true; /* Если какая то радио-кнопка отмечена и содержимое проверяемой ячейки совпало то вернем true */ return filters.checked && filters.value === value || filters.checked && filters.value === value || filters.checked && filters.value === value; }), /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: new filterTable.Filter(document.getElementById("regexp"), /* Коллбэк ф-ция валидации */ function (value, filters, i) { return value.indexOf(filters[i].value) === 0; }, /* Будем вызывать валидацию по событию onkeyup фильтра */ "onkeyup") });

Собственно все, жду от вас отзывов и предложений и надеюсь вам пригодится мой труд. Ну, и напоследок привожу полный листинг скрипта.

/** * Привязать фильтры к таблице. * @param HTMLTableSectionElement HTMLTBodyRef - ссылка на элемент таблицы * @param Object filters - объект-конфигурация фильтров: { N: FILTER[, N: FILTER] } * * Где: * NUM - это натуральное число - номер столбца таблицы, обслуживаемого * фильтром. Этот номер может принимать значения от 0 до кол-во * столбцов таблицы - 1. Номера можно задавать не по порядку. * * FILTER - это ссылка на HTML-элемент представляющий собой элемент * HTML-формы и имеющий атрибут value (select в том числе), либо * объект типа tableKit.Filter */ var filterTable = function (HTMLTBodyRef, aFilters) { var rows = HTMLTBodyRef.getElementsByTagName("TR"), filters = {}, n, walkThrough = function (rows) { var tr, i, f; for (i = 0; i < rows.length; i += 1) { tr = rows.item(i); for(f in filters) { if (filters.hasOwnProperty(f)) { if (false === filters[f].validate(tr.children[f].innerText)) { tr.style.display = "none"; break; } else { tr.style.display = ""; } } } } }; for(n in aFilters) { if (aFilters.hasOwnProperty(n)) { if (aFilters[n] instanceof filterTable.Filter) { filters[n] = aFilters[n]; } else { filters[n] = new filterTable.Filter(aFilters[n]); } filters[n]._setAction("onchange", function () {walkThrough(rows);}); } } } /** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee(HTMLElementRef, callback, eventName); } /* Выравниваем пришедший аргумент к массиву */ this.filters = {}.toString.call(HTMLElementRef) == "" ? HTMLElementRef: ; /** * Шаблонный метод вызывается для каждой строки таблицы, для соответствующей * ячейки. Номер ячейки задается в объекте-конфигурации фильтров ф-ции * filterTable (См. параметр 2 ф-ции tableFilter) * @param String cellValue - строковое значение ячейки * @returns {boolean} */ this.validate = function (cellValue) { for (var i = 0; i < this.filters.length; i += 1) { if (false === this.__validate(cellValue, this.filters[i], i)) { return false; } } } this.__validate = function (cellValue, filter, i) { /* Если фильтр был создан явно и явно указана функция валидации: */ if (typeof callback !== "undefined") { return callback(cellValue, this.filters, i); } /* Если в фильтр напихали пробелов, или другой непечатной фигни - удаляем: */ filter.value = filter.value.replace(/^\s+$/g, ""); /* "Фильтр содержит значение и оно совпало со значением ячейки" */ return !filter.value || filter.value == cellValue; } this._setAction = function (anEventName, callback) { for (var i = 0; i < this.filters.length; i += 1) { this.filters[i] = callback; } } };

Фильтр диапазона значений "ОТ" и "ДО"

По просьбе трудящихся, показываю, как можно реализовать фильтр, который позволит выбирать диапазоны значений цифр "от" и "до". В заголовке столбца, которому требуется этот фильтр пропишем код, который являет собой два выпадающих списка. Соответственно: первый - это значение "от", а второй это значение "до":

А в вызове скрипта прописываем фильтр (для третьего столбца) для краткости я сократил листинг оставив только определение фильтра "от" и "до":

FilterTable(/* Ссылка на элемент таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: */ 0: ... , /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: ... , /* ФИЛЬТР диапазон значений ОТ и ДО */ 2: new filterTable.Filter([ document.getElementById("digits-from"), document.getElementById("digits-to") ], function (value, filters, i) { var accept = true; value = parseInt(value,10) if (filters.value) { accept = (value >= parseInt(filters.value,10)); } if (accept && filters.value) { accept = (value <= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

Примеры фильтров таблиц без учета регистра

Фильтр не чувствительный к регистру для точного совпадения (можно заменять им стандартный)

New filterTable.Filter(document.getElementById("text"), function (value, filters, i) { var empty_filter = filters[i].value == "", match_value = value.toLowerCase() == filters[i].value.toLowerCase(); return empty_filter || match_value; })

Фильтр не чувствительный к регистру для постепенного ввода слова

New filterTable.Filter(document.getElementById("regexp"), /* Коллбэк ф-ция валидации */ function (value, filters, i) { var c_value = value.toLowerCase(), f_value = filters[i].value.toLowerCase(); return c_value.indexOf(f_value) === 0; }, /* Будем вызывать валидацию по событию onkeyup фильтра */ "onkeyup")

В принципе не чувствительность к регистру можно встроить и в сам скрипт фильтра, но пока нет времени думаю в будущем переписать этот скрипт с учетом всех ваших пожеланий тогда и сделаем эту фичу там. Как говорится: оставайтесь с нами;)

Но еще HTML поддерживает работу с Фильтрами . Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры , некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: "Доброго времени суток!!! " Давайте попробуем поизвращать эту фразу:-) , применяя к ней различные фильтры.

Фильтр Mask.

Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.

Синтаксис фильтра: STYLE="filter:Mask(Color="Color")

Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Листинг 19.1.

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Листинг 19.3.

Вот как это смотрится web-странице:

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: STYLE="filter:FlipV"

Листинг 19.5.

Вот как это смотрится web-странице:

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра: STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Листинг 19.7.

Вот как это смотрится web-странице:

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия