×
Vytvárame riešenia

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