JQuery диалоговое окно сохранить отменить стиль кнопки - PullRequest
47 голосов
/ 16 июля 2009

Я использую диалоги jquery ui в своем приложении. Как по-разному стилизовать кнопки «Сохранить» и «Отмена» в диалоговом окне jquery? Таким образом, «Сохранить» является более привлекательным, чем «Отмена». Я мог бы использовать гиперссылку для «Отмена», но как мне разместить ее на той же панели кнопок?

Ответы [ 12 ]

0 голосов
/ 17 сентября 2010

проверьте jquery ui 1.8.5, он доступен здесь http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js и он имеет новую кнопку для реализации диалогового интерфейса

0 голосов
/ 16 июля 2009

Я посмотрел на HTML, сгенерированный диалогом пользовательского интерфейса. Он отображает панель кнопок следующим образом:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

Добавление класса в кнопку Отмена должно быть простым.

$ ('. Ui-dialog-buttonpane: last-child'). Css ('background-color', '#ccc');

Это сделает кнопку Отмена немного серой. Вы можете оформить эту кнопку так, как вам нравится.

Над кодом подразумевается, что кнопка Отмена является последней кнопкой. Безошибочный способ сделать это будет

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );
...