A táblák oszlopainak kiemelése a jquery használatával
columnHover egy jQuery plugin, amely az asztal oszlopainak kiemelését szervezi, amikor a kurzor fölé mutat. A plugin akár olyan táblákkal is működhet, amelyekben a colspan paraméterekkel rendelkező cellák vannak.
A bővítmény beállításaiban négy változó módosítható. Itt vannak a nevük és a lehetséges értékek típusa:
- hoverClass - string - A CSS osztály, amelyet hozzárendelünk a cellákhoz, amikor kiemeljük őket. Az alapértelmezett érték a lebegés.
- eachCell - boolean - kiemeli az asztal oszlopait, amikor a kurzor a táblázat testén vagy lábléjén van. Ha az opció le van tiltva, az oszlopok csak akkor jelennek meg, amikor a kurzort az asztal fejlécére állítja. Az alapértelmezett érték hamis.
- includeSpans - boolean - a paraméter határozza meg, hogy a colspan paraméterrel jelezzék-e a cellákat. Az alapértelmezett érték igaz.
- ignoreCols - array - egy sor számsor. Jelzi, hogy a táblázat mely oszlopai nem kell kiemelni. Az indexelés 1-től kezdődik! Az alapértelmezett érték [].
Egyszerű háttérvilágítás
A legegyszerűbb kiemelés érdekében a függvény columnHover ()
Az eredmény bemutatja az oszlopok kiemelését, amikor az asztalfejléc fölé mutat. Mivel nem adtunk meg semmilyen paramétert, a szkript az alapértelmezett beállításokkal fog működni. A legfontosabb beállítások közül érdemes megfordulnia a kijelölt cellákhoz rendelt lebegtető osztályhoz. Így a kiemelt cellákhoz be kell állítani a tulajdonságokat a td.hover választóba (megjegyzés, a ponton keresztül, nem pedig a vastagbél).
Első beállítás
Most egyszerűen szabjuk meg a szkriptet. Minden paramétert JSON formátumban továbbítanak.
Mindegyik cell értékét megváltoztattuk igaznak, ezáltal lehetővé tettük a kiemelést, amikor lebegettünk a cellák fölött. Nos, a HoverClass megváltozott. Most a kiemelt cellák stílusait le kell írni a td.betterhover választó segítségével.
A collspan használatával
Most módosítjuk az asztal struktúráját úgy, hogy a colspan paraméterrel rendelkező cellák megjelenjenek benne.
Most nézzük meg, mi történik, ha kikapcsoljuk az includeSpans paramétert.
A megadott oszlopok háttérvilágításának kikapcsolása
Végül ellenőrizzük az ignoreCols tulajdonság működését. Próbáljuk kikapcsolni a C +, C-, D +, D- oszlopok háttérvilágítását. Ezek a sorozatszámok 5, 6, 7, 8 alatt vannak. Így írja be a kódot:
By the way, ha egy másik kiemelést és cellákat adsz a sorban a szokásos css-el, akkor érdekes crosshair effektet kapsz.
Jelenleg a kóddal kapcsolatos stílusaink vannak:
Ezenkívül még egy választót adunk hozzá ezekhez a stílusokhoz:
Ez az, a lecke vége.