×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako zmeniť dijitu DateTextBox ikonu

Pri tvorbe formulárov je veľmi dôležité dbať na to, aby aj jeho layout predpovedal, aké typy údajov sa budú do formulára zadávať. Žiaľ dijit DateTextBox neponúka žiadne odlíšenie od polí typu select a preto je vhodné zmeniť jeho východiskovú ikonu.
Pre zmenu ikony stačí vytvoriť novú triedu, skombinovať ju s triedou dijitDownArrowButton a vytvoriť z nich nasledujúce pravidlo.
Príklad: Pravidlo pre zobrazenie novej ikony v jazyku CSS s triedou calendar-field.
1
2
3
4
5
.calendar-field .dijitDownArrowButton {
background-image: url("datepicker.jpg") !important;
background-repeat: no-repeat;
background-position: center;
}
V tomto prípade bola vytvorená trieda s názvom calendar-field. Samozrejmosťou musí byť obrázok, ktorý bude reprezentovať, že ide o date picker. Ten je v tomto prípade pod názvom datepicker.jpg. Pre jeho zobrazenie musí byť použitá dôležitosť cez kľúčové slovo !important.
Príklad: Deklaratívny zápis dijitu DateTextBox.
1
2
<input class="calendar-field" data-dojo-type="dijit/form/DateTextBox"
value="2013-02-18">
Na nasledujúcom obrázku je vidieť pôvodný vzhľad poľa a upravený vzhľad poľa formulára.
Obrázok: Neupravený a upravený dijit DateTextBox.
Neupravený a upravený dijit DateTextBox.
Okrem zmeny ikony je možné upraviť aj šírku dijitu. Zmena šírky dijitu je demonštrovaná na nasledujúcom príklade. Opäť ide o zápis v jazyku CSS.
Príklad: Zmena šírky na 150px.
1
2
3
.calendar-field {
width : 150px;
}

Záver

Týmto príspevkom je ukončená séria článkov venovaná dijitu DateTextBox, ktorého cieľom bolo predstaviť nastavenie, získavanie a formátovanie výstupných hodnôt daného widgetu, ako aj ďalšie zaujímavé úpravy.
Dojo,dijit/form/DateTextBox,zmena ikony,background-image,background-repeat,background-position,!important
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších