Ako zmeniť dijitu DateTextBox ikonu

Permalink: http://how-to.mldgroup.com/index.php?article=ako-zmenit-dijitu-datetextbox-ikonu

7.8.2013, Matej LednárKategória: Dojo

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;
}
.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">
<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.

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

Ako zmeniť dijitu DateTextBox ikonu

Záver

Komentáre

Pridať komentár