Sveiki,
Šiandien aš jums parodysiu kaip padaryti labai gražius patarimus ką rašyti į formos laukus, kad vartotojas jas bet kokių atvejų užpildytų teisingai. Tai ypač naudinga pamoka kas naudoja registracijai labai daug laukų, arba kokiam nors apiforminimui, ir skriptę parašyta pvz: laukelyję minimalus simbolių skaičius turi būti 4. Vartotojas užpildęs visus laukelius, bet suklydęs vienam - gauna klaidą, tada jam vėl iš pradžių reikia pildyti visus laukelius. Tai gan nepatogu, todėl šita pamoką daugeliui pravers, kas esate susidūrę su panašiais dalykais.
Kad šis plug'inas veiktu korektiškai mums reikės: Stilių lentelė (viena) JavaScript failai (2 failai) Viską jau esu paruošęs, ir jūsų tokiais dalykais neužkrausiu, nes noriu, kad pamoka būtų maksimaliai aiški netgi žmonėms tolimiems nuo kuompiuterio ir programavimo.
Reikalingą archyvą aš galite gauti šio adresu: http://www.failai.lt/ita18cxl5y53/example.zip.htm
Pradedam darbą!
Pajungiame šį kodą puslapio banner'io faile.
- Kodas: Pasirinkti visus
<link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
Toliau užpildome mūsų laukus kaip parodyta kode.
- Kodas: Pasirinkti visus
<table>
<tr>
<td><label for="firstname">Vartotojo vardas:</label></td>
<td><input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"></td>
</tr>
<tr>
<td><label for="lastname">Slaptažodis:</label></td>
<td><input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box"></td>
</tr>
....
</table>
Šitame pavyzdyje aš naudoju lentelę skirta apiforminti formos laukus. Svarbus ir būtinas parametras yra *tooltipText* kuris randasi viduje tag'o <input> Šitame pavyzdyje užduodame tekstas kuris bus patarimo lauke.
Po viso šito prieš uždarymą tag'o </body> būtina paleisti štai tokią funkciją su parametrais
- Kodas: Pasirinkti visus
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
Būtent šitame plugin'ę daugybė galimų parametrų. Galima keisti tekstą, spalvą, vietą, ir pan. Visi parametrai guli form-field-tooltip.js. faile.
Štai pavyzdys kokius nustatymus padariau aš:
- Kodas: Pasirinkti visus
this.closeMessage = 'Uždaryti';
this.disableTooltipMessage = 'Nerodyti daugiau patarimo';
Šiandienai viskas! Visiems sėkmės!
