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;
}
#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();
 
    });
});
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.

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;
}
#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();
 
    });
});
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.

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;
}
#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();
 
    });
});
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.

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;
}
#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();
 
    });
});
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.

Záver

Máte aj vy vytvorenú dáku zaujímavú úpravu dijitu Dialog? Podeľte sa o ňu prostredníctvom komentára.

Ako vytvoriť zaujímavý dialog (Dojo)

Záver

Komentáre

Pridať komentár