Ako nastaviť ikonu widgetu dojox/mobile/ToolBarButton vpravo

V rámci widgetu dojox/mobile/Heading je veľmi často používaný widget dojox/mobile/ToolBarButton, ktorý renderuje tlačidlo s podporou textu a obrázka. Žiaľ obrázok v súčasnosti nie je možné zobraziť vpravo. Pre zobrazenie obrázka vpravo a textu vľavo je možné vykonať napríklad nasledujúcu úpravu.

Celý trik je založený na pridaní triedy icon-right s vlastnosťou float, ktorá zabezpečí prehodenie elementov <td>. Pre estetickejšie zobrazenie textu a obrázka som použil vlastnosť padding.

Obrázok: Zmena umiestnenia textu a obrázka.

Príklad: Zápis do elementu <style>.

1
2
3
4
5
6
7
8
9
10
11
.icon-right td {
  float : left;
  padding-right : 0;
  padding-left : 10px;
}
 
.icon-right td:first-child {
  float : right; 
  padding-left : 0;
  padding-right : 10px;
}
.icon-right td {
  float : left;
  padding-right : 0;
  padding-left : 10px;
}
 
.icon-right td:first-child {
  float : right; 
  padding-left : 0;
  padding-right : 10px;
}

Príklad: Zápis do elementu <body>.

1
2
3
<span class="icon-right" data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon : '../images/tab-icon-29w.png', label : 'Logout'">
</span>           
<span class="icon-right" data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon : '../images/tab-icon-29w.png', label : 'Logout'">
</span>           

Záver

V rámci vývoja mobilného enterprise riešenia som vytvoril viacero rozšírení pre existujúce widgety, ktoré by som chcel postupne prezentovať a umiestniť na GitHub. Aké zlepšenia by ste navrhli pre dojox/mobile/ToolBarButton vy?

Ako nastaviť ikonu widgetu dojox/mobile/ToolBarButton vpravo

Záver

Komentáre

Pridať komentár