×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest