问题1我正在根据另一个控件的值有条件地在控件上显示自定义程序通知。当通知可见时,我希望能够禁用(而不是停用)控件,以便用户仍然可以看到它,但不与它交互。
这可能吗?
// JavaScript that runs on the customizer panel
( function( $, api ) {
\'use strict\';
api.control( \'sidebar_width\', function(control) {
var showSidebarWidthNotification = function() {
var iFrameWidth = parseInt($(\'#customize-preview\').width());
var responsiveWidth = api( \'sidebar_width\' )._value);
var code = \'test_responsive_width\';
/* show notification under the primary sidebar width slider if the site is in responsive mode as changing the sliders won\'t have any effect */
if( iFrameWidth <= responsiveWidth ) {
control.setting.notifications.add( code, new wp.customize.Notification(
code,
{
type: \'info\',
message: \'Sidebar sliders won\\\'t have any visual effect when responsive layout is active.\'
}
));
} else {
control.setting.notifications.remove( code );
}
};
// events to listen for (and run on customizer load)
showSidebarWidthNotification();
api( \'responsive_width\' ).bind( function() {
showSidebarWidthNotification();
});
$(window).resize(function() {
showSidebarWidthNotification();
});
});
}( jQuery, wp.customize ) );
问题2停用控件时,是否仍可能显示控件的通知?e、 g.“[名称]控件被隐藏,因为它不适用于存档页。”
下面的代码显示了我是如何隐藏控件的,但我也希望能够显示隐藏控件的通知,以解释为什么它们不再可见。
( function( $, api ) {
\'use strict\';
// display sidebar width controls depending on current column layout
api( \'column_layout\', function( setting ) {
api.control( \'sidebar_width\', function(control) {
var displaySidebarWidth = function() {
var columnLayout = setting.get();
return columnLayout > 1 ? true : false;
}
var setActiveState = function() {
control.active.set( displaySidebarWidthr );
}
control.active.validate = displaySidebarWidth;
setActiveState();
setting.bind( setActiveState );
};
});
}( jQuery, wp.customize ) );
我知道我可以通过创建一个“虚拟”控件来绕过这个问题,该控件不直接呈现UI,只作为一个钩子来显示通知,但这有点麻烦。
问题3最后,是否可以更改通知的呈现位置?默认情况下,它直接渲染在控件标签下方。如果您可以选择在控件UI之前/之后呈现通知,则会更加灵活。
最合适的回答,由SO网友:Weston Ruter 整理而成
回复:问题1开始我以为你想使用active
state来管理禁用状态,但我发现情况并非如此。无论如何,既然您已经在切换通知,那么最好的建议就是只切换disabled
同时任何输入的状态:
control.container.find( \':input\' ).prop( \'disabled\', iFrameWidth <= responsiveWidth );
在大多数情况下,这应该是可行的。
简而言之,您可以覆盖onChangeActive
回调以管理通知的显示和输入是否被禁用:
wp.customize.control( \'sidebar_width\', function( control ) {
control.onChangeActive = function( active ) {
if ( ! displaySidebarWidth() ) {
control.notifications.add( new api.Notification( code /* ... */ ) );
} else {
control.notifications.remove( code );
}
control.container.find( \':input\' ).prop( \'disabled\', ! displaySidebarWidth() );
};
} );
回复:问题3:是。您可以通过覆盖
Control#getNotificationsContainerElement
方法,或者只是移动
.customize-control-notifications-container
元素放置在
control.container
.