Highlight
Pri dlhších a zložitejších formulároch je dobré pridať zvýraznenie (highlight) riadkov, ktoré dodajú užívateľovy lepší prehľad.
Inputy možno dať do paragrafov, li tagov alebo ako kód obsahuje môžme použiť i tr tabuľky:
Nakoľko highlight ma fungovať hneď po načítaní stránky funkciu dáme za $(document).ready:
$(document).ready(function() {
$(‘.highlighted tr’).hover(function() {
$(this).addClass(“highlight”);
},
function() {
$(this).removeClass(“highlight”);
});
});
Ide len o pridávanie a odstraňovanie highlight CSS class, čiže v CSS-ku musíme mať špecifikovaný štýl, ktorému nastavíme background-color podľa uváženia:
.highlight {
background-color: yellow;
}
Read more
Niekedy z hľadiska prehľadnosti obsahu je dobré dynamicky skrátiť text a na jeho koniec pridať odkaz Čítať viac…
Pomocou jQuery existuje elegantné riešenie. Úkažka upravuje elementy
s class comment:
$(“p.comment”).each(function(){
// Text v paragrafe
var text = $(this).text();
// Text po ukončenie vety znakmi .!?
var teaser = /^([^.!?]+)/.exec(text)[1];
// Na koniec teaser (intro) textu pridáme odkaz Čítaj viac
$(this).html(
teaser+’… <a href=”#” class=”readmore”>Čítaj viac</a>’
).find(“a.readmore”).click(function(){
// Pre všetky odkazy s class readmore po kliknutí nájdeme rodiča z DOM a pridáme celý text
$(this).parent().text(text);return false;
});
});