Example of Creating the FontDialog Component

Add links to the following files in the HEAD tag to execute the example:

Add the following script to the SCRIPT tag to create the font settings dialog box and the button calling this dialog box:

        //create the FontDialog component
        var fontdialog = new PP.Ui.FontDialog();
        //current font settings
        fontdialog.setFont(new PP.Font({
            //name
            FontFamily: "Tahoma",
            //size
            Size: 12,
            //color
            Color: "#00BFFF",
            //do not use default color
            UseAutoColor: false,
            //bold font style
            IsBold: true,
            //italic
            IsItalic: true,
            //not strikethrough
            IsStriken: false,
            //underlined
            IsUnderline: true,
            //not superior
            IsSuperior: false,
            //not inferior
            IsInferior: false,
            //without lower case capitals
            IsLowerCapitalized: false,
            //without all capitals
            IsCapitalized: false
        }));
        //set example text
        fontdialog.setSampleTextString("Example");
        //button to open dialog
        var b = new PP.Ui.Button({
            ParentNode: document.getElementById("but1"),
            Content: "Font dialog",
            Width: 50,
            Height: 20
        });
        b.Click.add(function (sender, args) { fontdialog.show(100, 100) });

After executing the example, the HTML page contains the Font dialog button, clicking which opens the dialog box for selecting font:

See also:

FontDialog