columnHover este un plugin jQuery care organizează evidențierea coloanelor din tabel când treceți peste cursor. Pluginul poate funcționa chiar și cu tabele care au celule cu parametri colspan.
În setările pluginului, pot fi modificate patru variabile. Iată numele lor și tipul de valori posibile:
- hoverClass - șir - clasa CSS pe care o atribuim celulelor atunci când le evidențiază. Valoarea implicită este hover.
- eachCell - boolean - evidențiază coloanele mesei atunci când cursorul este deasupra corpului sau subsolului mesei. Dacă opțiunea este dezactivată, coloanele sunt evidențiate numai când mutați cursorul peste antetul tabelului. Valoarea implicită este falsă.
- include Spans - boolean - parametrul specifică dacă să evidențieze celulele cu parametrul colspan. Valoarea implicită este adevărată.
- ignoreCols - matrice - o serie de numere. Indică care coloane din tabel nu trebuie evidențiate. Indexarea începe de la 1! Valoarea implicită este [].
Lumină de fundal simplă
Pentru a face cele mai simple evidențiere, trebuie să utilizați funcția columnHover ()
Rezultatul demonstrează evidențierea coloanelor când treceți peste rubricile tabelului. Deoarece nu am specificat parametrii, scriptul va funcționa cu setările implicite. Dintre toate setările cheie, merită să ne întoarcem la clasa de hover atribuită celulelor evidențiate. Astfel, pentru celulele evidențiate, trebuie să vă setați proprietățile pe selectorul td.hover (notați, este prin punct, nu prin colon).
Prima setare
Acum să facem o personalizare simplă a scenariului. Toți parametrii sunt transferați în format JSON.
Am schimbat valoarea fiecăruiCell la adevărat, permițând astfel evidențierea când treceți peste orice celulă. Ei bine, hoverClass sa schimbat pentru a îmbunătăți situația. Acum, stilurile celulelor evidențiate ar trebui descrise cu ajutorul selectorului td.betterhover.
Lucrul cu collspan
Acum schimbăm structura tabelului astfel încât celulele cu parametrul colspan să apară în el.
Acum, să vedem ce se întâmplă dacă oprim parametrul includeSpans.
Se stinge lumina de fundal pentru coloanele specificate
În cele din urmă, verificăm funcționarea proprietății ignoreCols. Să încercăm să oprim lumina de fundal pentru coloanele C +, C-, D +, D-. Ele sunt sub numerele noastre de serie 5, 6, 7, 8. Așa că scrieți în cod:
Apropo, dacă adăugați un alt punct culminant și celulă în linie cu css-ul obișnuit, veți obține un efect interesant de cruce.
Acum avem în stilurile noastre despre acest cod:
Adăugăm încă un selector la aceste stiluri:
Asta este, lecția sa terminat.
Fiți atenți, de asemenea
Trimiteți-le prietenilor: