开发者

jQuery-UI : Dialog remove class

开发者 https://www.devze.com 2022-12-22 20:13 出处:网络
I have a dialog box, created with the code javascript and HTML generated below. I\'d like remove the class \"ui-button-text-only\" for the buttons and for the container add \"style=font-size: 0.9em;\"

I have a dialog box, created with the code javascript and HTML generated below. I'd like remove the class "ui-button-text-only" for the buttons and for the container add "style=font-size: 0.9em;"

Could you help me ?

Thanks,

HTML :

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Save</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-butto开发者_如何学Gon-text">Cancel</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Delete</span>
    </button>
</div>

Javascript :

<div id="dialogProduct" title="MyTitle"></div>
<script type="text/javascript">
function CreateDialogProduct() {
    $("#dialogProduct").dialog({
        bgiframe: true, autoOpen: false, minHeight: 350, maxHeight: 450, height: 350,
        minWidth: 450, maxWidth: 550, width: 450,
        modal: true,
        buttons: {
            Save: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/SaveOrUpdate",
                    data: {...},
                    success: function(data) {...},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            },
            Cancel: function() {...},
            Delete: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/Delete",
                    data: {...},
                    success: function(data) {},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            }
        },
        beforeclose: function(event, ui) {
        }
    });
}    
jQuery(document).ready(function() {
    CreateDialogProduct();
});
</script>


$('button').removeClass("ui-button-text-only");
$('button:parent').css('font-size', '0.9em');

//or if you want to do it in a single line:
$('button').removeClass("ui-button-text-only").parent().css('font-size', '0.9em');

Reply to comment: If you have a CSS class like:

.small{
  font-size:0.9em;
}

in an included CSS file, you can do the following instead:

$('button').removeClass("ui-button-text-only").parent().addClass('small');
0

精彩评论

暂无评论...
验证码 换一张
取 消