如何使jQueryUI图标显示为禁用状态?

kx1ctssn  于 2023-01-12  发布在  jQuery
关注(0)|答案(6)|浏览(160)

有什么方法可以禁用jquery中的图标吗?例如,我使用ui-icon-circle-triangle-w和ui-icon-circle-triangle-e表示“上一个/下一个”,我想在列表开始时禁用“上一个”,在列表结束时禁用“下一个”等等。

esyap4oy

esyap4oy1#

我想这应该是显而易见的,但是在主文档中没有关于如何使用图标的说明。你只需要在元素中添加类ui-state-disabled。例如,通过JavaScript可以做到这一点:

$('<selector>').addClass('ui-state-disabled');
mgdq6dx1

mgdq6dx12#

您可以将.ui-icon设置为不显示,这也会隐藏图标。您可能需要也可能不需要“!important”部分。

.ui-icon { display: none !important; }
monwx1rj

monwx1rj3#

这是旧的,但我今天遇到了,所以我想我会清理它。.addClass('ui-state-disabled')将应用css给予它禁用的外观。但如果你有事件绑定到图标,它仍然会激发。你还必须确保你的js知道什么时候它被禁用。也许使用if hasClass('ui-state-disabled')。但只是添加css类并没有“禁用”图标。

r1zk6ea1

r1zk6ea14#

如果你想保留对角线的“se”句柄而不使用图标,最好的方法是:

.ui-icon { background-image:none     !important; }
p5fdfcr1

p5fdfcr15#

你可以在你的元素上添加css opacity:0.7,我认为这不仅对文本有用,而且对你元素中的图标或其他元素也有用。
我写了一个DEMO
关键组成部分是:

.disable{
    opacity:0.7;
}

...以及带有图标的DEMO

kknvjkwl

kknvjkwl6#

你不能禁用它们,因为它们不是'html'元素,所以最好的方法是使用'unbind()'方法,如:$('#图标加符号').unbind('单击');

相关问题