Filtrering og validering av PHP-data. Vanlige feil

>

Den uordnede listen vil inneholde alle porteføljeelementene, med lenker til bildene. Hvert listeelement vil ha en klasse, basert på hvilken elementene vil bli filtrert når vi klikker på en av alternativknappene.

CSS

Vi skal lage tre eksempler på denne effekten, men la oss først se på de generelle stilene.

Jeg utelater alle nettleserprefikser, men du finner dem i kildene.

Hovedbeholderen vil ha en fast bredde:

Ff-beholder(
bredde: 564px;
margin: 10px auto 30px auto;
}

Etikettetikettene skjuler radioknappene, og vi gir dem en gradient og noen subtile skygger:

Ff-beholderetikett(
font-family : "BebasNeueRegular" , "Arial Narrow" , Arial, sans-serif ;
bredde: 25 %;
høyde: 30px;
markør: peker;
farge : #777 ;
text-shadow : 1px 1px 1px rgba(255 , 255 , 255 , 0.8 );
linjehøyde: 33px;
skriftstørrelse: 19px;
bakgrunn : lineær gradient(topp , #ffffff 1% , #eaeaea 100% );
flyte: venstre;
boks-skygge:
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 ) ;
}

For de første og siste etiketttaggene lager vi avrundede hjørner:

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 ;
}

For hver avkrysset alternativknapp vil vi lage stiler som simulerer "klikk"-effekten:

Ff-beholder input.ff-selector-type-all : krysset av ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1 : krysset av ~ label.ff-label-type-1 ,
.ff-container input.ff-selector-type-2 : krysset av ~ label.ff-label-type-2 ,
.ff-container input.ff-selector-type-3 : krysset av ~ label.ff-label-type-3 (
bakgrunn : lineær gradient(topp , #646d93 0% , #7c87ad 100% ) ;
farge : #424d71 ;
text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , 0.3 );
boks-skygge:
0px 0px 0px 1px #40496e ,
0 1px 2px rgba(0 , 0 , 0 , 0.1 ) innfelt ;
}

Siden vi har alle elementene våre på samme nivå, bruker vi den generelle søskenkombinatoren, som er betegnet med tilde-symbolet (~). Velger i visning input.ff-selector-type-3:checked ~ label.ff-label-type-3 betyr at elementet input.ff-selector-type-3:kontrollert følger elementet label.ff-label-type-3 i dokumenthierarkiet, unntatt ulike kommentarer osv., og de må ha samme overordnede. Dette "trikset" vil også tillate oss å få forskjellige typer elementer i porteføljen.

Elementer input kan være skjult fordi vi har merkelapp som vil gjøre alt arbeidet:

Ff-beholderinngang(
display: ingen;
}

La oss nå gå videre til listeelementene:

Ff-varer(
stilling: pårørende;
margin: 0px auto;
polstring-topp: 20px;
}

Ff-elementer a(
display: blokk;
stilling: pårørende;
polstring: 10px;
bakgrunn : #fff ;
box-shadow: 0 1px 2px rgba(0 , 0 , 0 , 0.1 );
margin: 4px;
bredde: 160px;
høyde: 120px;
}
.ff-elementer en span(
display: blokk;
bakgrunn: rgba(113, 123, 161, 0,9);
skriftstil: kursiv;
farge : #fff ;
font-weight: fet;
polstring: 20px;
posisjon: absolutt;
bunn: 10px;
venstre: 10px;
bredde: 120px;
høyde: 0px;
overløp: skjult;
opasitet: 0 ;
tekst-align: center;
text-shadow : 1px 1px 1px #303857 ;
overgang: alle 0.3s lett inn-ut;
}
.ff-items a:hover span(
høyde: 80px;
opasitet: 1 ;
}
.ff-items li img(
display: blokk;
}

Det er alle de "generelle" stilene. La oss nå se på stiler for filtrering av elementer!

I det første eksemplet vil vi få de valgte elementene (dvs. når den tilsvarende radioknappen er "avkrysset") til å ha høyest lysstyrke.

Vi legger til en overgang til listeelementet for å skape opasitet:

Ff-elementer li(
margin: 0px;
flyte: venstre;
opasitet: 0 ;
bredde: 188px;
høyde: 148px;
overgang: opasitet 0,6s lett inn-ut;
}

Vi vil da bruke den generaliserte søskenkombinatoren for å angi opasiteten for de tilsvarende elementene:

Ff-beholder input.ff-selector-type-all : krysset av ~ .ff-elementer li,



opasitet: 1 ;
}

Siden alle alternativknappene først er merket av, vil alle elementene i utgangspunktet ha en opasitet på 1.

Nå vil vi bruke :not()-velgeren til å spesifisere en liste over elementer som ikke har en valgt klasse og skal ha en opasitet på 0,1:

opasitet: 0,1 ;
}

Beskrivelser for disse listeelementene skal ikke vises når du holder musepekeren:

display: ingen;
}

Dette var det første eksemplet. La oss ta en titt på den neste.

I dette eksemplet vil vi gjøre utvalgte elementer større, mens andre vil være mindre og mer gjennomsiktige. Så la oss legge til en overgang til listeelementene:

Ff-elementer li(
margin: 0px;
flyte: venstre;
bredde: 188px;
høyde: 148px;
overgang: alle 0.6s lett inn-ut;
}

Som standard vil vi ha alle listeelementer i normal størrelse og med full opasitet. Når vi velger én type, vil vi at disse elementene skal øke i størrelse og også forbli helt ugjennomsiktige:

Ff-beholder input.ff-selector-type-1 : krysset av ~ .ff-varer .ff-item-type-1 ,
.ff-container input.ff-selector-type-2 : krysset av ~ .ff-items .ff-item-type-2 ,
.ff-container input.ff-selector-type-3 : krysset av ~ .ff-items .ff-item-type-3 (
opasitet: 1 ;
transform: skala(1.1 );
}

Vi vil redusere andre porteføljeelementer og bruke en lav grad av åpenhet for dem:

Ff-beholder input.ff-selector-type-1 : krysset av ~ .ff-items li: not(.ff-item-type-1 ),
.ff-container input.ff-selector-type-2 : krysset av ~ .ff-items li: not(.ff-item-type-2 ),
.ff-container input.ff-selector-type-3 : krysset av ~ .ff-items li: not(.ff-item-type-3 ) (
opasitet: 0,1 ;
transform: skala(0.5 );
}

Og igjen vil vi skjule beskrivelsen for elementer som ikke er valgt:

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

Det siste eksemplet er bare et eksperiment. Vi ønsker å gjøre noe litt mer komplekst her: når vi velger en type, vil vi skalere alle elementene for å gjøre dem mindre, og deretter skalere opp bare elementene med den valgte typen.

Vi vil at de uvalgte elementene skal forsvinne, men siden vi ikke kan animere visningsegenskapen, bruker vi et lite triks: når vi gjør elementene mindre, endrer vi bredden til 0.

Så la oss først sette listebredden til 0:

Ff-elementer li(
margin: 0px;
flyte: venstre;
høyde: 148px;
bredde: 0px;
transform: skala(0 , 0 );
}

Med "alle" valgt, endrer vi skalaen til 1 og setter bredden til 188px:

Ff-container input.ff-selector-type-all : krysset av ~ .ff-items li(
bredde: 188px;
transform: skala(1 , 1 );
overgang: transformere 0,3s lineær;
}

Husk at dette er starttilstanden, siden vi har "alle" merket som standard.

Nå, når vi markerer en spesifikk type, vil elementer med den klassetypen først forsvinne sammen med resten av elementene, og deretter vises igjen.

Ff-beholder input.ff-selector-type-1 : krysset av ~ .ff-varer .ff-item-type-1 ,
.ff-container input.ff-selector-type-2 : krysset av ~ .ff-items .ff-item-type-2 ,
.ff-container input.ff-selector-type-3 : krysset av ~ .ff-items .ff-item-type-3
{
overgang: transform 0,3s lineær, bredde 0s lineær 0,3s;
animasjon: scaleUp 0,3s lineær 0,4s fremover;
}
.ff-container input.ff-selector-type-1 : krysset av ~ .ff-items li: not(.ff-item-type-1 ),
.ff-container input.ff-selector-type-2 : krysset av ~ .ff-items li: not(.ff-item-type-2 ),
.ff-container input.ff-selector-type-3 : krysset av ~ .ff-items li: not(.ff-item-type-3 )
{
animasjon: skaler ned 0,3s lineært fremover;
}
@keyframes scaleUp (
50 % ( width : 188px ; transform: scale(0 , 0 ) ; )
100 % ( width : 188px ; transform: scale(1 , 1 ) ; )
}
@keyframes scaleDown (
0 % ( bredde : 188 px ; transform: skala(1 , 1 ) ; )
99 % ( width : 188px ; transform: scale(0 , 0 ) ; )
100 % ( width : 0px ; transform: scale(0 , 0 ) ; )
}

Vær oppmerksom på at dette eksemplet er eksperimentelt og vil bare fungere korrekt i nettlesere som støtter CSS-animasjon. I Firefox 9.0.1 er ikke oppførselen som forventet (når du holder musepekeren over etiketten avfyres animasjonen igjen), men alt fungerer i Aurora 11.0a2, så kanskje dette er en nettleserfeil.

Hvis du har spørsmål, anbefaler vi å bruke vår

CSS-egenskaper har nådd et slikt utviklingsnivå at de er i stand til å takle noen viktige funksjoner til grafiske redaktører. Et eksempel på dette er CSS-filtre, som du kan lage vakre effekter for bilder med.

Hvis det tidligere var vanskelig å forestille seg, nå er nesten alle programvarefiltre implementert i kaskadetabellen, fra uskarphet til kunstneriske fargemodeller.

Men det er fortsatt en liten ulempe med CSS-filtre - ikke alle nettlesere støtter visuelle effekter. Det er selvfølgelig bare et spørsmål om tid. Og når timen "x" kommer, må utviklerne være forberedt. For nå, la oss se på hva som allerede er implementert så langt.

Nettleserstøtte for CSS-filtre

I utgangspunktet har alle populære nettlesere, Firefox, Chrome, Opera, et "vennlig" forhold til filtereffekter. Det samme kan ikke sies om IE, som fullstendig nekter å støtte effekter, selv i de nyeste versjonene.

Funksjoner og syntaks for CSS-filtre

Alle CSS-egenskaper har visse parametere som kombinerer rekkefølgen verdier skrives i. Filteregenskapen er intet unntak, som andre kan den bruke en kombinasjon av flere regler i en applikasjon. For eksempel, legg til et lysstyrkefilter for et bilde, og etter et mellomrom spesifiser et annet - kontrast. Vi vil dekke alt i denne artikkelen med noen få eksempler for bedre forståelse.

Syntaks

Filter: filternavn (prosent av verdi); filter: url(img.svg); filter: blur(10px); filter: lysstyrke(0,9); filter: kontrast(150%); filter: drop-shadow(5px 5px 10px svart); filter: gråtoner (80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opasitet (50%); filter: mett (50%); filter: sepia (40%); /* Bruk flere filtre */ filter: kontrast(150%) gråtoner (80%);

Liste over filtre

Eksempler på CSS-filtre

Vi har kommet til en interessant del av artikkelen, der vi vil vurdere hvert filter separat med eksempler på bruken. For klarhetens skyld vil tre bilder bli brukt. Den første vil vise utgangspunktet, utseendet til originalitet. Den andre vil tjene som et statisk eksempel på bruk av et filter, og den tredje vil vise sveveeffekten ved å holde musepekeren over bildet.

Uskarphet filter

I grafiske redaktører er uskarphetfilteret et uunnværlig verktøy og brukes ofte i arbeid. Det kan enkelt lage et uskarpt bilde, men kan skape effekten av å fokusere på et spesifikt element mens resten av bildet faller under uskarphet. Og mye mer.

I webdesign (for eksempel uskarphet) kan brukes som en lining for bedre lesbarhet av teksten som ligger i bildet. Faktisk er uskarphet Gaussisk fra en verdi på 0 px til den forsvinner helt.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efbl1 img( filter: blur(2px); -webkit-filter: blur(2px); ) /*for hover-effekt*/ .efbl2 img( overgang: alle 0.6s ease 0s; ). efbl2 :hover img( filter: blur(4px); -webkit-filter: blur(4px); overgang: alle 0.6s ease 0s; )

Filterskygge

Skyggeegenskapen kom til oss med den tredje versjonen av kaskadebordet. Selvfølgelig er det kjent for alle som er involvert i nettstedutvikling, siden box-shadow spiller en viktig rolle i design. Drop-shadow-filteret kan kalles et dårligere alternativ med lignende parametere, og det er bare 5 av dem, uten å telle den indre skyggen.

Skriverekkefølgen er som følger: 5px/-5px (horisontal offset), 5px/-5px (vertikal offset), 15px (skyggesløringsradius), 5px/-5px (shadow stretch), svart (farge). Filteret støtter all syntaks unntatt strekk- og innsettingsverdier, i tillegg til å legge til flere skygger atskilt med komma. Men til tross for alt dette er det noen fordeler, for eksempel tar filteret hensyn til pseudoelementer, som lar deg vise den nøyaktige formen på elementets skygge.

Det er også interessant at når blokken ikke har en bakgrunn, men bare et kantlinje er spesifisert, vil en skygge vises når du bruker boksskygge, som visstnok tar hensyn til bakgrunnen, det vil si en solid. Og ved bruk av drop-shadow tar skyggen form av et slag uten å ta hensyn til bakgrunnen.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .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)); ) /*for hover-effekten*/ .efdrswd2 img( overgang: alle 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)); overgang: alle 0.6s ease 0s; )

Avfargingsfilter

Klassisk fotografistil for alle tider i riktig retning. Filteret tillater kun én verdi - positiv. Avhengig av den angitte prosentandelen, vil gråtoner jevnt erstatte fargen på bildet. I stedet for prosenter kan du også bruke brøker opp til et helt tall (0,01/1).

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efgrays1 img( filter: gråtoner(90%); -webkit-filter: gråtoner(90%); ) /*for sveveeffekt*/ .efgrays2 img( overgang: alle 0.6s ease 0s; ) .efgrays2:hover img( filter: gråtoner(90%); -webkit-filter: gråtoner(90%); overgang: alle 0.6s letthet 0s; )

Lysstyrkefilter

Legger lys til de "uutforskede" svarte hjørnene av bildet. Det brukes ofte i fotobehandling, siden amatørbilder vanligvis tas på dårlig opplyste steder. Lysstyrken på filteret kan justeres fra 0% (et helt svart bilde) til nesten helt å forsvinne bildet. Det opprinnelige punktet er definert som 100 %, og verdien kan også angis som en brøk.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efbrig1 img( filter: lysstyrke(150%); -webkit-filter: lysstyrke(150%); ) /*for sveveeffekt*/ .efbrig2 img( overgang: alle 0.6s letthet 0s; ) .efbrig2:hover img( filter: lysstyrke(150%); -webkit-filter: lysstyrke(150%); overgang: alle 0.6s letthet 0s; )

Kontrastfilter

En enkel måte å gjøre et bilde mer uttrykksfullt på er å eksperimentere med lysstyrkeinnstillingene for de lyseste og mørkeste delene av bildet. Kontrastfilteret er klar til å hjelpe med dette. Dens parametere, som mange andre, utelukker en negativ verdi (-150%), og startposisjonen er angitt til 100%. I tillegg til prosenter er også brøker (1,5) tillatt.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efcontr1 img( filter: kontrast(150%); -webkit-filter: kontrast(150%); ) /*for hover-effekt*/ .efcontr2 img( overgang: alle 0.6s ease 0s; ) .efcontr2:hover img( filter: kontrast(150%); -webkit-filter: kontrast(150%); overgang: alle 0.6s letthet 0s; )

Fargetonefilter

En utmerket designteknikk innen bildedesign som matcher stilen til hovedressursdesignet. Ideen er å legge en nyanse av den valgte fargen over på originalbildet. Forholdene kommer ut avhengig av gitt grad, som indikerer fargepunktet på fargehjulet.

Hvis verdien er positiv (150 grader), skjer rotasjonen med klokken. Følgelig, hvis negativ, så mot klokken. I to posisjoner starter den fra 0 grader til 360 grader.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*for hover-effekt*/ .efhrotai2 img( overgang: alle 0.6s ease 0s ; ) .efhrotai2:hover img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); overgang: alle 0.6s ease 0s; )

Inversjonsfilter

En spesifikk effekt som lar deg snu fargen på et bilde opp ned. I grafiske redaktører har det en viss rolle, og det hender at uten deltakelse kan det ønskede resultatet ikke oppnås. Invertfilterparameteren spesifiseres kun i positiv retning fra en verdi på 0 % til 100 %.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*for hover-effekt*/ .efinve2 img( overgang: alle 0.6s ease 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); overgang: alle 0.6s ease 0s; )

Metningsfilter

Når et bilde mister sin naturlige farge av ukjente årsaker (noe sånt som en solbleket T-skjorte), kan øke metningen umiddelbart gjenopprette det opprinnelige utseendet. Og hvis dette filteret brukes i kombinasjon med andre filtre, vil resultatet bli meget tilfredsstillende. Innstillingen gjøres fra 0 første visning til store tall.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*for hover-effekt*/ .efsatut2 img( overgang: alle 0.6s ease 0s; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); overgang: alle 0.6s ease 0s; )

Sepia filter

Imitasjon av effekten av gamle fotografier (litt brun fargetone). Dette oppnår en retro-bildestil, som er spesielt populær. Sepiafilteret kan justeres fra 0 % (hjemmeposisjon) til 100 %.

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*for sveveeffekt*/ .efsepiaa2 img( overgang: alle 0.6s ease 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); overgang: alle 0.6s ease 0s; )

Filtergjennomsiktighet

Et filter som ligner opacitetsegenskapen fra kaskadetabellversjon 3. Syntaksen er den samme, men transparensverdien kan justeres fra 0 % til 100 % (opprinnelig posisjon).

Opprinnelig

Filter

Hover effekt

/*statisk regel*/ .efopaty1 img( filter: opacity(50%); -webkit-filter: opacity(50%); ) /*for hover-effekt*/ .efopaty2 img( overgang: alle 0.6s ease 0s; ) .efopaty2:hover img( filter: opasitet(50%); -webkit-filter: opasitet(50%); overgang: alle 0.6s ease 0s; )

Filterlink

Et tilpasset filter lages basert på SVG-elementer med en spesifikk identifikator, som deretter kan brukes i CSS gjennom et lenkefilter. Effektene kan være svært forskjellige fra standardfiltre, fra overleggsmasker til banal gjennomsiktighet.

Generator for CSS-filtre

Det har lenge vært skikken å lage generatorer av ulike CSS-egenskaper. , og mange mange andre. De fungerer som et verktøy for å gjøre arbeidet enklere. Og for nybegynnere webmastere kan de ha doble fordeler. De er veldig enkle å bruke: Flytt glidebryterne og du kan se resultatene umiddelbart. Og når du er ferdig, gjenstår det bare å kopiere den genererte koden. Det samme gjelder CSS-filtergeneratorer. Her er to av dem for din referanse:

Konklusjon

Anmeldelsen viste seg å være ganske stor, men jeg håper at den vil være nyttig for noen i praksis. Ikke glem å kombinere filtre, ett er bra, men to vil være bedre i visse tilfeller.

Til slutt fant jeg tiden og vil gjerne presentere mitt nye skript, som lar deg filtrere data i html-tabeller.

Skriptet støtter følgende typer filtre:

• Tekstfelt
• Nedtrekksliste
• Radioknapper
• Avmerkingsbokser

Skriptet er lite i størrelse og ganske enkelt å koble til, og kombinerer også godt med bordsorteringsskriptet; du kan laste det ned sammen med tilkoblings- og konfigurasjonseksempler i mitt depot: bitbucket.org

Demotabellfilter:

Konseptuelt består skriptet av to deler: filterobjekter filterTabell.Filter og fra selve funksjonen filtertabell(...), som binder disse filterobjektene til html-tabellen.

Filterobjektet har følgende konstruktør:

/** * Filterobjekt. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - En lenke, eller en rekke lenker * til html-elementer som fungerer som filtre. * @param Funksjon tilbakeringing - tilbakeringingsfunksjon. Kalt når skriptet * validerer innholdet i cellen. Funksjonen kalles for hver rad i tabellen, for * hver celle i kolonnen som filteret er tildelt. * Funksjonen vil bli sendt 3 parametere: callback(verdi, filtre, i) hvor: * Strengverdi - verdien av tabellcellen som kontrolleres på tidspunktet funksjonen kalles * HTMLElements-filtre - en rekke HTML-elementer tilordnet som filtre for kolonnen som kontrolleres. * Nummer i er indeksen til filterelementet i filtergruppen som er * validatoren for gjeldende samtale. De. filtre[i] inne i tilbakeringingsfunksjonen * vil inneholde elementet som brukeren * interagerte med, noe som resulterer i at valideringsprosessen utløses. * @param String eventName - navnet på hendelsen knyttet til filteret, som vil bli * brukt for validering (onkeyup | onclick | onblur | onchange, etc.) * @constructor */ filterTable.Filter = funksjon (HTMLElementRef, tilbakeringing, eventName) Første argument: HTMLElement HTMLElementRef

Andre argument: Tilbakeringing av funksjon

Funksjon: tilbakeringing(verdi, filtre, i) Hvor:
Strengverdi- verdien av tabellcellen som kontrolleres på tidspunktet funksjonen kalles
HTMLElements-filtre- en rekke HTML-elementer tilordnet som filtre for kolonnen som kontrolleres.
Nummer i- indeks for filterelementet i filterarrayet som er validatoren for gjeldende samtale. De. filtre[i] inne i tilbakeringingsfunksjonen vil inneholde elementet som brukeren samhandlet med, som et resultat av at valideringsprosessen ble startet. Funksjonen skal returnere true eller false avhengig av om den innkommende verdien filtreres når filterverdien filters[i] er satt i henhold til ideen din, eller ikke.

Tredje argument: String eventName

Navnet på hendelsen knyttet til filteret som valideringen vil bli lansert med (onkeyup | onclick | onblur | onchange, etc.) onchange - standardverdi

Selve funksjonen filtertabell har følgende signatur:

tabeller * @param Objektfiltre - filterkonfigurasjonsobjekt: ( N: FILTER[, N: FILTER] ) * * Hvor: * NUM er et naturlig tall - nummeret til tabellkolonnen servert av * filteret. Dette tallet kan ta verdier fra 0 til antall * av tabellkolonner - 1. Tallene kan spesifiseres ute av rekkefølge. * * FILTER er en lenke til et HTML-element som er et HTML-skjemaelement * og har et verdiattributt (velg inkludert), eller * et objekt av typen tableKit.Filter */ filterTable(HTMLTBodyRef, aFilters)

Det ser ganske forvirrende ut, men la oss se på det med et eksempel. Først trenger vi en HTML-tabellramme. Vær oppmerksom på at filtre bare er elementer i et html-skjema, forresten, de har unike id-attributter som vi velger dem for å overføre til filterTable.Filter-konstruktøren

Så vi har en ramme. Den har filtre. Det gjenstår bare å binde det hele sammen. Men la oss først se på det enkleste tilkoblingsalternativet, og vurdere bare filtrene for 2. og 3. kolonne, fordi de bruker et tekstfelt og en rullegardinliste med verdier som skriptfilteret forstår "native" uten å måtte skape filterTabell.Filter Jeg har bevisst kommentert elementene 0, 3, 4 og har foreløpig utpekt implementeringen av dem som "..." for ikke å skremme sarte sjeler for tidlig :)

Vær oppmerksom på at det andre argumentet til funksjonen filtertabell(..., (...) ) er et filterkonfigurasjonsobjekt hvis egenskaper har numeriske navn, starter fra 0 til NUMBER_COLUMN_TABLE-1 Verdien av hver slik egenskap bør være et filter:

tabeller */ document.getElementById("target"), /* Filterkonfigurasjonsobjekt: */ ( /* Filter for den første kolonnen avmerkingsbokser: 0: ..., */ /* Filter for den andre kolonnens tekstfelt - eksakt samsvar bare : */ 1: document.getElementById("tekst"), /* Filtrer for den tredje kolonnen i rullegardinlisten: */ 2: document.getElementById("siffer"), /* Filter for den fjerde kolonnen av alternativknappen: 3: ... , /* Filter for den femte kolonnen Gradvis ordinntasting: 4: ... */ ));

Hvis noen trenger all funksjonaliteten, som vist i demoeksemplet, for eksempel filtre med radioknapper, eller filtre med avkrysningsbokser, så blir forbindelsen litt mer komplisert fordi disse i hovedsak er filtre som består av et sett med html-elementer , og under valideringen må du sjekke verdiene for hele settet med et slikt filter. Det er her tilbakeringingsfunksjoner kommer inn i bildet. Nedenfor i oppføringen prøvde jeg å kommentere dette punktet i detalj.

Igjen, merk at for tekstfeltet og rullegardinlisten er det tilstrekkelig å sende en lenke til html-elementet. Og vær også oppmerksom på tilkoblingen til det siste filteret. Du kan spørre hvorfor - for i siste kolonne er filteret et tekstfelt! Ja, dette er sant, men hvis du jobbet nøye med demoeksemplet, la du merke til at det første filteret - testfeltet utløses først etter at du har skrevet inn hele verdien og trykket på "Enter"-knappen, eller klikket et annet sted på side, dvs. filteret utløses av standard "onchange"-hendelse! Men filtertekstfeltet i den siste kolonnen fungerer umiddelbart så snart du skriver inn et tegn. For å implementere denne oppførselen, måtte jeg lage et filter i henhold til alle reglene med filterTabell.Filter Det var også nødvendig å angi en tilbakeringingsfunksjon, og i tillegg til dette var det nødvendig å sende navnet på "onkeyup"-hendelsen som filtreringsprosessen ville bli initiert med. Som dette. Jeg håper jeg ikke har forvirret deg fullstendig.

FilterTable(/* Elementreferanse tabeller */ document.getElementById("target"), /* Filterkonfigurasjonsobjekt: */ ( /* Filter for den første kolonnen avmerkingsbokser: */ 0: new filterTable.Filter([ /* Filterelementer */ document.getElementById( "charA"), document.getElementById("charB"), document.getElementById("charC") ], /* Validering tilbakeringingsfunksjon */ funksjon (verdi, filtre, i) ( /* Hvis avmerkingsboksen ikke er merket, vil den verdien deltar ikke i valideringen, så vi må returnere true */ if (false === filters[i].checked) return true; /* Deretter, når vi sjekker, må vi samtidig sjekke verdiene til alle elementene i settet, forutsatt at avmerkingsboksen er merket */ return filters.checked && filters.value === verdi || filters.checked && filters.value === verdi || filters.checked && filters.value === verdi; ) ), /* Filtrer for tekstfeltet i den andre kolonnen - kun nøyaktig samsvar: */ 1: document.getElementById("text"), /* Filtrer for den tredje kolonnen i rullegardinlisten: */ 2: document.getElementById(" siffer"), /* Filter for den fjerde kolonnen i alternativknappen: */ 3: new filterTable.Filter(, /* Va*/ funksjon (verdi, filtre, i) ( /* I filtre - vi har en radioknapp “Ikke valgt”, hvis det er installert, deltar ikke filteret i valideringen og vi må returnere true */ if (true === filters.checked) return true; /* Hvis en alternativknapp er merket og innholdet i cellen som kontrolleres samsvarer, returner true */ return filters.checked && filters.value === verdi || filters.checked && filters.value === verdi || filters.checked && filters.value === verdi; )), /* Filter for den femte kolonnen Gradvis ordinntasting: */ 4: new filterTable.Filter(document.getElementById("regexp"), /* Va*/ funksjon (verdi, filtre, i) (returverdi .indexOf(filters[i].value) === 0; ), /* Vi vil kalle validering på filterets onkeyup-hendelse */ “onkeyup”) ));

Det er alt, jeg venter på tilbakemeldinger og forslag, og jeg håper du finner arbeidet mitt nyttig. Vel, og til slutt, her er den fullstendige listen over manuset.

/** * Bind filtre til tabellen. * @param HTMLTableSectionElement HTMLTBodyRef - referanse til elementet tabeller * @param Objektfiltre - filterkonfigurasjonsobjekt: ( N: FILTER[, N: FILTER] ) * * Hvor: * NUM er et naturlig tall - nummeret til tabellkolonnen servert av * filteret. Dette tallet kan ta verdier fra 0 til antall * av tabellkolonner - 1. Tallene kan spesifiseres ute av rekkefølge. * * FILTER er en lenke til et HTML-element som er et element i et * HTML-skjema og har et verdiattributt (velg inkludert), eller * et objekt av typen tableKit.Filter */ var filterTable = function (HTMLTBodyRef, aFilters) ( var rows = HTMLTBodyRef.getElementsByTagName("TR"), filtre = (), n, walkThrough = funksjon (rader) ( 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; } } };

Filtrer rekkevidden av verdier "FROM" og "TO"

På forespørsel fra arbeiderne viser jeg hvordan du kan implementere et filter som lar deg velge verdiområder for tallene "fra" og "til". I overskriften på kolonnen som krever dette filteret, vil vi skrive koden, som er to nedtrekkslister. Følgelig: den første er verdien "fra", og den andre er verdien "til":

Og i skriptkallet skriver vi et filter (for den tredje kolonnen). For korthets skyld forkortet jeg oppføringen, og la bare definisjonen av filteret "fra" og "til":

FilterTable(/* Elementreferanse tabeller */ document.getElementById("target"), /* Filterkonfigurasjonsobjekt: */ ( /* Filter for den første kolonnen avmerkingsbokser: */ 0: ... , /* Filter for den andre kolonnens tekstfelt - eksakt samsvar bare : */ 1: ... , /* FILTER verdiområde FROM og TIL */ 2: new filterTable.Filter([ document.getElementById("digits-from"), document.getElementById("digits-to ") ], funksjon (verdi, filtre, i) ( var aksept = sann; verdi = parseInt(verdi,10) if (filters.verdi) (aksepter = (verdi >= parseInt(filters.verdi,10)) ; ) if (godta && filters.value) ( ​​akseptere = (verdi<= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

Eksempler på tabellfiltre som ikke skiller mellom store og små bokstaver

Filter ufølsom for store og små bokstaver for en eksakt match (du kan erstatte standarden med den)

Ny filterTable.Filter(document.getElementById("tekst"), funksjon (verdi, filtre, i) ( var empty_filter = filters[i].value == "", match_value = value.toLowerCase() == filtre[i] .value.toLowerCase(); returner tomt_filter || match_value; ))

Filter ufølsom for store og små bokstaver for å skrive inn et ord gradvis

Ny filterTable.Filter(document.getElementById("regexp"), /* Validering tilbakeringingsfunksjon */ funksjon (verdi, filtre, i) ( var c_value = value.toLowerCase(), f_value = filters[i].value. toLowerCase( ); return c_value.indexOf(f_value) === 0; ), /* Vi vil kalle validering på filterets onkeyup-hendelse */ “onkeyup”)

I prinsippet kan sensitivitet for store og små bokstaver bygges inn i selve filterskriptet, men jeg har ikke tid ennå, jeg tror i fremtiden at jeg vil skrive om dette skriptet med hensyn til alle dine ønsker, så lager vi denne funksjonen der. Som de sier: bli hos oss;)

Men HTML støtter også arbeid med filtre. Ved å bruke ulike filtre på tekst, kan du oppnå interessante effekter. Men Vær forsiktig, ikke alle nettlesere viser de samme effektene som filtre skal gi, noen nettlesere ignorerer direkte filtre. Test derfor nettsidene dine i forskjellige nettlesere. Alle filtre fungerer korrekt i Internet Exhlorer. Så la oss se på hvordan filtre fungerer.

For eksempel vil vi fremheve uttrykket: "God dag!!!"La oss prøve å vri denne setningen :-) ved å bruke forskjellige filtre på den.

Filtermaske.

Velger tekst, eller rettere sagt bakgrunnen teksten er skrevet på, som om du hadde valgt teksten med musen.

Filtersyntaks: STYLE="filter:Mask(Color="Color")

Farge - utvalgsfargen i heksadesimal (for eksempel #000FFF) eller navnet på fargen på engelsk, for eksempel rød, blå, grønn. Denne fargedefinisjonen brukes i alle filtre, så dette vil ikke bli gjentatt videre.

Notering 19.1.

DropShadow-filter.

Legger til en skygge til teksten.

Filtersyntaks:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Farge - Skyggefarge
OffX - Skyggeforskyvning i X
OffY - Shadow Y offset
Positiv - Skygge venstre eller høyre (henholdsvis 0 eller 1)

Notering 19.3.

Slik ser det ut på nettsiden:

FlipV-filter.

Vend tekst vertikalt.

Filtersyntaks: STYLE="filter:FlipV"

Notering 19.5.

Slik ser det ut på nettsiden:

Bølgefilter.

Gjør teksten bølgende.

Filtersyntaks:STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Frekv - antall bølger
Legg til - vis/skjul kantlinje (henholdsvis 1 eller 0)
LightStrength - bølgestyrke
Fase - bølgevinkel
Styrke - bølgeintensitet

Notering 19.7.

Slik ser det ut på nettsiden:

Uskarphet filter.

Gjør tekst uskarp i en bestemt retning.

Filtersyntaks:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Legg til - moderat eller sterk uskarphet (henholdsvis 1 eller 0)
Retning - i hvilken retning uskarpheten vil oppstå (fra 0 til 315)
Styrke - uskarphet offset