Symbole im jQuery UI-Dialogfeldtitel

Ich bin mit dem folgenden code erstellen Sie einen jQuery-dialog-box. Standardmäßig gibt es einen "schließen" - Symbol auf der Titelleiste, aber ich möchte hinzufügen, dass einige der anderen Symbole in der Titelleiste als auch für verschiedene Funktionen.

Den code für das Dialogfeld:

$("document").ready(function () {
    $("#dialog").dialog({
        title: "Dialog Title",
        height: 400,
        width: 500
    });
});

Bin ich mit folgenden .css-und .js-Dateien:

<link type="text/css" href="jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>

InformationsquelleAutor der Frage solipps | 2010-11-05

  1. 38

    Können Sie definieren in HTML die title option beim erzeugen der dialog-box. Daher, mit den vorhandenen jQuery-UI-icon-sprites, wir können mit diesem Javascript:

    Für jQuery UI 1.10.0

    Müssen Sie das überschreiben der undokumentierten _title Funktion, nach Bug #6016um sicherzustellen, dass die title - Attribut wird nicht entgangen. 

    var dialog = $("#dialog").dialog();

dialog.data( "uiDialog" )._title = function(title) {
    title.html( this.options.title );
};

dialog.dialog('option', 'title', '<span class="ui-icon ui-icon-home"></span> Example Dialog');

    Für ältere Versionen

    $("#dialog").dialog({
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});

    Und diese CSS -

    .ui-dialog .ui-dialog-title .ui-icon {
    float: left;
    margin-right: 4px;
}

    Fügen Sie ein Symbol, um die überschrift des dialogs. Sehen Sie den kompletten Satz an jQuery-UI-icons hier: http://jqueryui.com/themeroller/

    Sehen diese arbeiten, Leben, um zu sehen: http://jsfiddle.net/XkSu9/ (jQuery UI 1.10+) oder http://www.jsfiddle.net/yijiang/UYMJH/ (alte version)

    InformationsquelleAutor der Antwort Yi Jiang

  2. 3

    Können Sie tun, dass durch das hinzufügen einiger HTML-code für die Titelzeile bei dialog geöffnet.

    $("document").ready(function () {
        $("#dialog").dialog({
            title: "Dialog Title",
            height: 400,
            width: 500,
            open: function(event, ui){
                $(this).parent().find('.ui-dialog-titlebar').append('Some HTML');
            }
        });
    });

    InformationsquelleAutor der Antwort Minh Nguyen

  3. 3

    Hier ist, wie lösen Sie die jQuery UI-1.10.0 dialog-Titel Thema Global statt ein Objekt zu einem Zeitpunkt:

    jQuery.widget('ui.dialog', jQuery.extend({}, jQuery.ui.dialog.prototype, {
    _title: function(titleBar) {
        titleBar.html(this.options.title || '&#160;');
    }
}));

    Verwenden Sie nun das dialog-widget als üblich, und Ihre Titel nicht Holen entkommen mehr.

    InformationsquelleAutor der Antwort Zectbumo

  4. 2

    Habe ich es auf diese Weise:

    <script type="text/javascript" language="javascript">
    function MsgBox() {
        var arg = arguments;
        /*
        [arg]
        0 = message
        1 = title
        2 = width
        3 = height
        4 = command to evaluete if Ok is clicked (optional)
        */
        $("body").append("<div id=\"dlgMsg\" title=\"" + arg[1] + "\">" + arg[0] + "</div>");
        $("#dlgMsg").dialog({
            autoOpen: false,
            modal: true,
            bgiframe: true,
            width: arg[2],
            height: arg[3],
            close: function (event, ui) { $(this).dialog("destroy").remove(); },
            buttons:{ 
                    'OK': function () { if (arg[4]) eval(arg[4]); $(this).dialog("close"); }
                    }
        });

        $("#dlgMsg").dialog('open');
        return false;
    }
</script>

    Verwendung:
    MsgBox("Hello, I'm a MessageBox!", "Title Here", 400, 200);

    Oder

    MsgBox("Hello, I'm a MessageBox!", "Title Here", 400, 200, "alert('hey, you clicked Ok!')");

    Können Sie verbessern es mit ui-icons sowie...

    InformationsquelleAutor der Antwort Youkko

  5. 2

    Eine viel einfachere Methode. Im stylesheet:

    .ui-dialog .ui-dialog-title {
  background-image: url('/icons/info.png');
  background-repeat: no-repeat;
  padding-left: 20px;
}

    Dies ist für ein 16x16 Bild.

    InformationsquelleAutor der Antwort Rob

Schreibe einen Kommentar