无论如何要以编程方式隐藏jQuery UI按钮？

我想要做这样的事情，与jQuery UI Button：无论如何要以编程方式隐藏jQuery UI按钮？

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

方式类似，enable/disable作品。隐藏和手动显示按钮（$button.hide();$button.show();）导致一些真正棘手的格式与jQuery UI CSS ...

我在这里错过了一些简单的东西吗？

来源

2011-05-06 neezer

只要做标准$button.hide()应该做的很好，究竟是什么搞砸了？

你可以做$button.css('display', 'none')但这就是所有$button.hide()无论如何。

我很确定没有办法来做你所问的，即使它只会设置显示：没有像我刚刚提到的方法。你可能会更好地弄清楚为什么设置显示没有将你的CSS搞砸在页面的其他地方。

来源

2011-05-06 16:09:28 jcvandan

这个问题（我最好说的是）我需要实例化隐藏元素上的按钮，jQuery UI似乎并不喜欢。我不认为它可以计算出适当的尺寸或其他东西。我已经检查过了，没有其他与之相关的冲突CSS（只是股票UI CSS）。我想我可以制作按钮，然后隐藏它，但是然后我得到那个“闪光”，我宁愿避免... – neezer 2011-05-06 16:16:53

我明白，这是烦人的 - 你是如何创建按钮？ – jcvandan 2011-05-06 16:18:58

按钮隐藏着一个CSS类'hidden'。当DOM被加载时，我用'$（'a＃some-button.hidden'）。button（）;'创建按钮。然后，当我用'$（'a＃some-button.hidden'）。show（）;'在代码中显示它们时，它们看起来都是重击（它们看起来像全宽度块元素，没有顶部/底部边框和没有背景）。如果我在按钮上执行完全相同的过程，而这些过程最初并不是通过'.hidden'隐藏的，它们渲染得很好。 – neezer 2011-05-06 16:54:24

如果使用visibility而不是display，则该按钮应该能够正确创建。 visibility: hidden风格只是使元素不可见; $ .hide（）使用的display: none样式实际上会从渲染的DOM中移除元素。

因此，在短期试：

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

我已经收到此做一些时间。

来源

2011-05-06 20:08:16 JoshNaro

这是一个旧的，我知道，但是...不是定义最初隐藏在CSS中的按钮，而是使用一类ui-helper-hidden来定义它。这样它将被隐藏，直到你实例化它。 display：none隐藏一个元素，它不会占用任何空间。该元素将被隐藏，并且该页面将显示为该元素不存在。这与隐藏按钮不同，因为它应该仍占用屏幕空间。

如果你需要它最初留下隐患实例化后，可以将其隐藏

$elem.button().hide();

所得的jQuery UI按钮将显示：inline-block的，重写UI辅助隐藏的显示：无。

我从来没有遇到与渲染奇怪的问题，所以你的问题可能有一个潜在的问题。

来源

2012-05-25 12:22:45

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

来源

2012-11-26 09:47:40 Lucky