×
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 vytvoriť zaujímavý dialog (Dojo)

Pri tvorbe dialógového okna prostredníctvom frameworku Dojo som nechtiac cez CSS vytvoril modálne okno, ktoré som nakoniec nechal aj v aplikácii. Pôvodným cieľom bolo upraviť hlavičku dijitu a v dolnej časti vycentrovať vertikálne text. Výsledkom jednoduchých úprav bolo modálne okno, ktorého vytvorenie je demonštrované v tomto článku.
Prvým krokom bolo vytvorenie dialogu s upravenou hlavičkou a centrovaným textom.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
#infoDialog .dijitDialogTitleBar {
font-size: 12px;
font-weight: bold;
text-align: left;
}
#infoDialog {
width: 400px;
height : 100px;
text-align: center;
}
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
12
require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog) {
ready(function() {
var infoDialog = new Dialog({
title: "Information",
content: "Loading data from server, please try again later.",
id: "infoDialog"
});
infoDialog.show();
});
});
Obrázok: Dialog vyžadujúci vertikálne centrovanie hlavného textu.
Dialog vyžadujúci vertikálne centrovanie hlavného textu.
Pôvodným cieľom bolo vytvoriť nasledujúce modálne okno (dialog).
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
11
12
13
#infoDialog .dijitDialogTitleBar {
font-size: 12px;
font-weight: bold;
text-align: left;
}
#infoDialog {
width: 400px;
height : 100px;
text-align: center;
}
#infoDialog .dijitDialogPaneContent {
line-height : 50px;
}
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
12
require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog) {
ready(function() {
var infoDialog = new Dialog({
title: "Information",
content: "Loading data from server, please try again later.",
id: "infoDialog"
});
infoDialog.show();
});
});
Obrázok: Finálná podoba pôvodného dialogu.
Finálná podoba pôvodného dialogu.
Malými zmenami CSS je možné vytvoriť nasledujúce modálne okno.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
#infoDialog .dijitDialogTitleBar {
font-size: 12px;
font-weight: bold;
}
#infoDialog {
width: 400px;
height : 100px;
text-align: center;
line-height : 90px;
}
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog) {
ready(function() {
var infoDialog = new Dialog({
title: "Loading data from server, please try again later.",
id: "infoDialog"
});
infoDialog.show();
});
});
Obrázok: Upravená podoba dijitu Dialog.
Upravená podoba dijitu Dialog.
Prípadne je možné upraviť modálne okno do nasledujúcej podoby.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
#infoDialog .dijitDialogTitleBar {
font-size: 14px;
}
#infoDialog {
width: 400px;
height : 100px;
text-align: center;
line-height : 90px;
}
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog) {
ready(function() {
var infoDialog = new Dialog({
title: "Loading data from server, please try again later.",
id: "infoDialog"
});
infoDialog.show();
});
});
Obrázok: Upravená podoba pôvodného dijitu Dialog.
Upravená podoba pôvodného dijitu Dialog.

Záver

Máte aj vy vytvorenú dáku zaujímavú úpravu dijitu Dialog? Podeľte sa o ňu prostredníctvom komentára.
Dojo,tipy a triky,programovanie,dialog,dijit/Dialog,CSS,modálne okno
Ž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