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

发布于 2024-11-05 20:10:54 字数 374 浏览 1 评论 0原文

我想用 jQuery UI Button 做这样的事情：

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

类似于 enable /disable 有效。手动隐藏和显示按钮 ($button.hide(); $button.show();) 会导致 jQuery UI CSS 出现一些非常奇怪的格式。？

我在这里缺少一些简单的东西吗

原文

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 something simple here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

↙温凉少女 2024-11-12 20:10:54

只需执行标准的 $button.hide() 就可以很好地完成工作，它到底搞砸了什么？

您可以执行 $button.css('display', 'none') 但这就是 $button.hide() 所做的一切。

我很确定没有办法做到你所要求的，即使有它也只能设置显示：没有像我刚才提到的方法。您可能会更好地弄清楚为什么设置 display none 会搞乱页面其他地方的 CSS。

回复收藏 0 原文

执笏见 2024-11-12 20:10:54

如果您使用 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();

我之前已经做过几次了。

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.

回复收藏 0 原文

李白 2024-11-12 20:10:54

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

如果您需要它在实例化后最初保持隐藏状态，您可以将其隐藏。

$elem.button().hide();

生成的 jQuery UI 按钮将具有 display:inline-block，覆盖 ui-helper-hidden 的 display:none。

我从来没有遇到过它呈现奇怪的问题，所以你的问题可能有一个潜在的问题。

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.

回复收藏 0 原文

终止放荡 2024-11-12 20:10:54

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

回复收藏 0 原文