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

HTML hlavička obsahuje nasledovné riadky, ktoré ťahaju jQuery a ostatné potrebné záležitosti.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

Ďalej obsahuje funkciu, ktorá rieši udalosť so select elementom a dodatočnú validáciu.

<script type="text/javascript">
//<![CDATA[
jQuery("#selectList").change(onSelectChange);
function onSelectChange() {
var selectedAttrib = jQuery("#selectList option:selected").text();
// Ak Iné, tak zobraz formular s validaciou
if(selectedAttrib == 'Iné') {
var attribForm = "";
attribForm = '<form id="formular" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']) ?>" method="post"><input type="hidden" name="action" value="send_mail" /><table cellspacing="2" cellpadding="0"><tr><td><label for="cname">Meno</label></td><td><input id="cname" name="cname" size="25" class="required" /></td></tr><tr><td><label for="cemail">E-mail</label></td><td><input id="cemail" name="email" size="25" class="required email" /></td></tr><tr><td><label for="desc">Popis požiadavky</label></td><td><textarea id="desc" name="desc" class="required"></textarea></td></tr><tr><td></td><td><input class="button" type="submit" value="Poslať" /></td></tr></table></form>';
jQuery("#output").html(attribForm);
jQuery("#formular").validate({
messages: {
email: "Prosím zadajte platnú e-mailovu adresu (meno@domena.sk)."
}
});
};
};
//]]>
</script>

Potom nasleduje PHP kód s funkciou, ktorá má za úlohu odoslanie mailu.

<?php
if ($_POST['action'] == 'send_mail') {
$fromemail = 'neville@neville.sk';
$toemail = preg_replace('/[\r\n]/', '', strip_tags($_POST['email']));
$subject = 'jQuery onchange select formulár s odoslaním';
$content = '';
// send mail
function smail($fromaddress, $toaddress, $subject, $message) {
$charset='utf-8';
// Zalomenie textu po 70 znakoch, vyzaduje mail()
$message = wordwrap($message, 70);
$headers = 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-Type: text/html; charset=utf-8' . "\n";
$headers .= "From: ".$fromaddress."\n";
$headers .= "Reply-To: ".$fromaddress."\n";
//echo "from adress: $fromaddress<br> to address: $toaddress,<br> $subject <br>$message <br>$headers";
if(mail($toaddress, $subject, $message, $headers)) {
return true;
} else {
return false;
}
};
$res = smail($fromemail, $toemail, $subject, $content);
// $res=true;
// Check if there is a send mail error, otherwise say successful
if(!$res) {
echo '<p class="marker">Nepodarilo sa poslať mail.</p>';
} else {
echo '<p class="marker">Mail úspešne odoslaný.</p><br />';
};
};
?>

Element body obsahuje samotný select element s jeho opciami a div element, kam sa samotný formulár zobrazí.

<p>Typ služby <select name="selectList" id="selectList" onchange="onSelectChange();">
<option selected="selected" value="opt1">Webdesign</option>
<option value="opt2">Redesign</option>
<option value="opt3">Iné</option>
</select>
</p>
<div id="output"></div>

lightbox

Ako spraviť Lightbox

Najprv si stiahnime samotný plugin pre jQuery z adresy http://leandrovieira.com/download/7/. ZIP súbor obsahuje css štýl, obrázky a samotný JavaScript plugin a jQuery. Náš projekt by mal obsahovať adresáre css, images a js.
HTML stránka by mala obsahovať nasledujúce riadky v hlavičke:

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.lightbox-0.5.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(function() {
$(‘a.lightbox’).lightBox();
});

</script>

Pomocou selektora a.lightbox sa nájdu všetky odkazy s class atribútom lightbox, na ktorých sa použije samotná funkcia. Samotný obrázok, ktorý chceme zobraziť pomocou Lightboxu by v HTML stránke mal vyzerať:

<a class=”lightbox” href=”cesta/obrazok.jpg”>
<img src=”cesta/miniatura_obrazka.jpg” alt=”obrazok” />
</a>