Anyway to programmatically hide a jQuery UI button?_问答_开发者

Anyway to programmatically hide a jQuery UI button?

开发者 https://www.devze.com 2023-03-04 16:19 出处：网络

I\'d like to do something like this, with jQuery UI Button: $button.button(); // ... $button.button(\'hide\');

I'd like to do something like this, with jQuery UI Button:

$button.button();
// ...
$button.button('hide');
// ...
$button.button('show');

Similar to how enable/disable works. Hiding and showing the button manually ($button.hide(); $button.show();) is resulting in some really screwy formatting with the jQuery UI CSS...

Am I missing somethin开发者_Python百科g simple here?

Just doing the standard $button.hide() should do the job fine, what exactly is it screwing up?

You could do $button.css('display', 'none') but this is all that $button.hide() does anyway.

I'm pretty sure there isn't a way to do what you ask, and even if there would it only set display: none like the methods I just mentioned. You might be better of figuring out why setting display none is screwing up your CSS elsewhere on the page.

If you use the style visibility instead of display the button should be able to create properly. The visibility: hidden style just makes the element invisible; the display: none style which $.hide() uses actually removes the element from the rendered DOM.

So in short try:

var newButton = $('a#some-button.hidden');

// Hide element, but allow it to use render space
newButton.attr('visibility', 'hidden');
newButton.attr('display', 'block');

// Create button
newButton.button();

// Revert element to the "normal" means of hiding (may be unnecessary)
newButton.attr('display', 'none');
newButton.attr('visibility', 'visible');

// Show button
newButton.show();

I've had to do this a few time before.

Old one this, I know, but... Instead of defining the button to be hidden in the CSS initially, define it with a class of ui-helper-hidden. That way it will be hidden until you instantiate it. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. This is different to making the button hidden, as that way it should still take up screen space.

If you need it to initially stay hidden after instantiation you can hide it

$elem.button().hide();

The resulting jQuery UI button will have display:inline-block, overriding the ui-helper-hidden's display:none.

I've never had a problem with it rendering strangely, so your problem may have had an underlying issue.

**This might be easy for you:
Try this code:**
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p><button id="demo"/>Hide me</button></p>
</body>
</html>

This is workaround solution for me. What if jquery ui changes implementation then there is no guarantee.

$('#button-el').next().hide();

What worked for me was this:

onclick="$(this).parent().css('display', 'none');"