wake-up-neo.com

Schaltflächensymbole für das Dialogfeld "jQuery-Benutzeroberfläche"

Ist es möglich, den Schaltflächen eines jQuery-Dialogfelds Symbole hinzuzufügen? Ich habe es so versucht:

$("#DeleteDialog").dialog({
    resizable: false,
    height:150,
    modal: true,
    buttons: {
        'Delete': function() {
            /* Do stuff */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
    }
});

Die Selektoren in der offenen Funktion scheinen einwandfrei zu funktionieren. Wenn ich zum "Öffnen" folgendes hinzufüge:

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

dann bekomme ich eine Löschen-Schaltfläche mit rotem Text. Das ist nicht schlecht, aber ich möchte wirklich, dass der kleine Mülleimer Sprite auch auf die Schaltfläche Löschen.

Bearbeiten:

Ich habe ein paar Änderungen an der akzeptierten Antwort vorgenommen:

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

Durch Hinzufügen eines oberen Rands wird das Symbol nach unten gedrückt, sodass es vertikal zentriert aussieht. Durch Hinzufügen von 25 px zur Breite der Schaltfläche wird verhindert, dass der Schaltflächentext in eine zweite Zeile umgebrochen wird.

53
Cory Grimster

Verwenden Sie diese Zeile, um das Papierkorbsymbol zur Schaltfläche "Löschen" hinzuzufügen. Das Sprite muss sich in einem separaten Element befinden.

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

So verhindern Sie, dass das Symbol oben auf der Schaltfläche angezeigt wird:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');
18
enduro

ich habe es versucht und es funktioniert :)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]
52
David K

Nativ unterstützt seit jQuery UI 1.10

Ab jQuery UI Version 1.10.0 ist es möglich, Schaltflächensymbole sauber anzugeben, ohne auf open -Ereignishandler zurückzugreifen. Die Syntax lautet:

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

Es ist auch möglich, ein secondary -Symbol anzugeben.

In Aktion sehen.

35
Jon

sie können der Schaltfläche auch eine ID oder ein anderes Attribut hinzufügen, wie folgt:

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }
8
d1Mm

Diese Version funktioniert, ohne sich um den Text in den Schaltflächen kümmern zu müssen

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
6
Fabrizio

Hier ist was ich benutze. Weisen Sie der gewünschten Schaltfläche während der Definition des ersten Dialogfelds eine ID zu:

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

Dann können Sie den Text/das Symbol wie folgt ändern:

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });
2
hoyt1969

weisen Sie ".ui-dialog .ui-button" die folgende Höhe zu:

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}
1
jkl

Nur ein Update, da ich auf die Notwendigkeit gestoßen bin, dies selbst zu tun.

Ich habe mehrere Dialogfelder, die beide die gleiche Schaltfläche zum Schließen haben. Daher ist es hilfreich, darüber zu sprechen, wie Symbole direkt in dem Dialogfeld platziert werden, auf das Sie sich auswirken möchten, nur für den Fall, dass Sie ein Symbol auf einem Feld in einem anderen Dialogfeld wünschen, das enthält der gleiche Text.

Außerdem fehlen in der ausgewählten Lösung einige bereits definierte CSS-Klassen, mit denen das Positionsproblem behoben werden könnte.

Der folgende Code sollte genau das erreichen, was in der ursprünglichen Frage gewünscht wurde, mit etwas mehr Präzision. Wenn Sie dasselbe Papierkorbsymbol auf alle Dialogfelder mit der Schaltfläche "Löschen" anwenden möchten, erreichen Sie dieses Ziel, indem Sie den übergeordneten Auswahlbereich "$" ("# DeleteDialog") in "$" (". Ui-dialog-buttonpane") ändern:

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
1
lsuarez

Oder wenn Sie keine anderen Dialoge beeinflussen möchten,

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
1
Petah

Ich bin in der gleichen Ausgabe gelaufen. Es scheint, dass jquery den Text in einem Attribut namens "text" in der Schaltfläche selbst speichert und nicht als Text innerhalb der Schaltfläche.

Ich habe es so gelöst:

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });
1
Jareish

Wie wäre es mit einem klassenbasierten Ansatz?

In deiner _layout.cshtml Datei legte so etwas wie das folgende:

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

Führen Sie dann in der Datei, in der Sie das Dialogfeld erstellen, Folgendes aus:

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

Dann müssen Sie sich nie auf die Suche nach Text verlassen, und der Code in Ihrem Dialogfeld ist minimal. Ich verwende dies in allen meinen Anwendungen, um Schaltflächen mit JQuery-UI-Stilen/-Symbolen zu versehen, indem ich ihnen eine Klasse gebe.

1
Pandincus

Laut Dialog> Buttons Option Dokumentation können Sie ein Objekt oder ein Array von Optionen übergeben; Mit letzterem können Sie die Schaltflächen anpassen:

tasten

Typ: Objekt oder Array
Standard: []

Mehrere Typen unterstützt:

  • Objekt : Die Tasten sind die Schaltflächenbeschriftungen und die Werte sind die Rückrufe, wenn auf die zugehörige Schaltfläche geklickt wird.
  • Array : Jedes Element des Arrays muss ein Objekt sein, das die Attribute, Eigenschaften und Ereignishandler definiert, die für die Schaltfläche festgelegt werden sollen. Außerdem können Sie mit der Taste icons die Symboloption der Schaltfläche und mit der Taste showText die Textoption der Schaltfläche steuern.
$(function() {
  var buttons = [];
  buttons.Push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.Push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.Push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.Push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>
1
Salman A