programing

jQuery UI 대화 상자 버튼 아이콘

copyandpastes 2021. 1. 17. 12:31
반응형

jQuery UI 대화 상자 버튼 아이콘

jQuery UI 대화 상자의 버튼에 아이콘을 추가 할 수 있습니까? 이 방법으로 시도했습니다.

$("#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');
    }
});

열기 기능의 선택기가 제대로 작동하는 것 같습니다. "열기"에 다음을 추가하면 :

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

빨간색 텍스트가있는 삭제 버튼이 나타납니다. 나쁘지는 않지만 삭제 버튼에도 작은 쓰레기가 뿌려지기를 바랍니다.

편집하다:

나는 받아 들여지는 대답에 대해 한 쌍의 조정을했습니다.

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);

상단 여백을 추가하면 아이콘이 아래로 밀려서 세로 중앙에있는 것처럼 보입니다. 버튼의 너비에 25px를 추가하면 버튼 텍스트가 두 번째 줄에 배치되지 않습니다.

이 줄을 사용하여 휴지통 아이콘을 삭제 버튼에 추가하십시오. 스프라이트는 별도의 요소에 있어야합니다.

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

버튼 상단에 아이콘이 나타나지 않도록하려면 :

$('.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>');

나는 이것을 시도했고 작동합니다 :)

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

jQuery UI 1.10부터 기본적으로 지원됨

jQuery UI 버전 1.10.0부터 open이벤트 핸들러에 의존하지 않고 버튼 아이콘을 명확하게 지정할 수 있습니다 . 구문은 다음과 같습니다.

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

secondary아이콘 을 지정할 수도 있습니다 .

실제로 확인하십시오 .

또한 다음과 같이 버튼에 id 또는 기타 속성을 추가 할 수 있습니다.

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

이 버전은 버튼의 텍스트에 대해 걱정할 필요없이 작동합니다.

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' }
    });
}

여기 내가 사용하는 것이 있습니다. 초기 대화 상자 정의 중에 관심있는 버튼에 ID를 할당합니다.

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

그런 다음 다음과 같이 텍스트 / 아이콘을 변경할 수 있습니다.

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

내가 직접해야 할 필요성을 알게 된 이후로 업데이트되었습니다.

둘 다 동일한 닫기 버튼이있는 여러 대화 상자가 있으므로 영향을 미치려는 대화 상자에 아이콘을 직접 배치하는 방법에 대해 이야기하는 것이 유용합니다. 같은 텍스트.

또한 선택한 솔루션에는 위치 문제를 해결할 수있는 이미 정의 된 몇 가지 CSS 클래스가 실제로 누락되어 있습니다.

다음 코드는 원래 질문에서 원하는 것을 조금 더 정확하게 수행해야합니다. 삭제 버튼이있는 모든 대화 상자에 동일한 휴지통 아이콘을 적용하려는 경우 $ ( '# DeleteDialog'). parent () 선택기를 $ ( '. ui-dialog-buttonpane')로 변경하면 해당 목표를 달성 할 수 있습니다.

$('#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>');

또는 다른 대화 상자에 영향을주지 않으려면

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' }
    });
}

다음과 같이 ".ui-dialog .ui-button"에 높이를 할당합니다.

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

나는 같은 문제에서 달렸다. jquery는 버튼 내부의 텍스트가 아니라 버튼 자체의 "text"라는 속성에 텍스트를 저장하는 것 같습니다.

다음과 같이 해결했습니다.

    $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"
            }
        ]
    });

클래스 기반 접근 방식은 어떻습니까?

_layout.cshtml파일에 다음과 같이 넣으 십시오 .

<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>

Then, in the file where you are creating the dialog, do something like this:

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

Then you never have to rely on searching for text, and it requires a minimal amount of code in your dialog. I use this throughout my applications to apply jquery UI styling/icons to buttons just by giving them a class.

According to Dialog > buttons option documentation you can pass an object or an array of options; the latter allows you to customize the buttons:

buttons

Type: Object or Array
Default: []

Multiple types supported:

  • Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
  • Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In addition, a key of icons can be used to control button's icons option, and a key of showText can be used to control button's text option.

$(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>

ReferenceURL : https://stackoverflow.com/questions/2525524/jquery-ui-dialog-button-icons

반응형

'programing' 카테고리의 다른 글

파이썬에서 숫자 비교를 위해“is”또는“==”를 사용하는 것이 더 낫습니까?  (0) 2021.01.17
document.all 대 document.getElementById  (0) 2021.01.17
문자열에는 몇 바이트가 있습니까?  (0) 2021.01.17
Xcode에 구성을 추가하는 방법은 무엇입니까?  (0) 2021.01.17
'\ r'이스케이프 시퀀스의 사용은 무엇입니까?  (0) 2021.01.17

'programing'의 다른글

  • 현재글jQuery UI 대화 상자 버튼 아이콘

관련글

댓글

티스토리툴바