我正在tinyMCE中为WordPress创建一个自定义弹出窗口,以插入视频短代码,因此我在列表框中有一个网站列表(YouTube、Vimeo、Vine和其他网站),还有一个复选框,让用户决定添加粒子;“自动播放”;。
这是脚本的简化版本(视频部分):
{
text: \'Vídeos\',
onclick: function() {
editor.windowManager.open({
title: \'Vídeo Incorporado\',
body: [
{type: \'checkbox\',
name: \'video_autoplay\',
label: \'Executar automaticamente?\',
text: \'Sim\',
classes: \'checkclass\'
},
{type: \'listbox\',
name: \'video_site\',
label: \'Escolha o site de origem\',
\'values\': [
{text: \'YouTube\', value: \'youtube\'},
{text: \'Vimeo\', value: \'vimeo\'},
{text: \'Vine\', value: \'vine\'},
],
},
{type: \'textbox\',
name: \'video_id\',
label: \'ID do vídeo\',
value: \'\'
},
],
onsubmit: function( e ) {
editor.insertContent(\'[video origem="\' + e.data.video_site + \'" id="\' + e.data.video_id +\'" autoplay="\'+ e.data.video_autoplay +\'"]\');
}
});
}
},
。。。这是它生成的窗口(唯一的区别是复选框的位置,我在打印后将其放在第一位:
所以我可以得到一个短代码[video origem=youtube id=XXXXXX autoplay=true]
但并非所有视频网站都能使用自动播放参数,我需要在选中Vine(例如)时禁用该复选框。当我的列表框打开时,我如何禁用或隐藏复选框;藤蔓“;或“或”;Vimeo“;选项,并在该选项返回YouTube时重新激活它?
What have you tried?
也许我走错了路,但现在,我知道一个函数可以与listbox参数一起使用,所以这个。。。
{
type: \'listbox\',
name: \'video_site\',
onselect: function( ) {
if (this.value() == \'vine\') {
alert("Value is "+this.value());
}
},
label: \'Escolha o site de origem\',
\'values\': [
{text: \'YouTube\', value: \'youtube\'},
{text: \'Vimeo\', value: \'vimeo\'},
{text: \'Vine\', value: \'vine\'},
],
},
。。。将使用onselect获取我的列表框的值。但我无法使用它来定位和禁用前面的复选框,同时使用以下两种方法:
$(\'input.mce-checkclass\').prop(\'disabled\',true);
以及
$(\'input.mce-checkclass\').attr(\'disabled\',true);
“相同”;aria禁用”;并以“input[name=video\\u autoplay]”为目标。有什么想法吗?
编辑:脚本工作
正如bonger所建议的,可以从var加载窗口,因此很容易针对任何元素。我添加了一些setStyle,以减少复选框和标签在禁用时的不透明度,因为它在默认情况下不会发生,至少在Chrome中不会发生。
最后的脚本,按我的需要工作:
{
text: \'Videos\',
onclick: function() {
var win = editor.windowManager.open({
title: \'Embed Video\',
body: [
{type: \'checkbox\',
name: \'video_autoplay\',
label: \'Autoplay?\',
text: \'Yes\',
id: \'check-autoplay\',
},
{type: \'listbox\',
name: \'video_site\',
onselect: function( ) {
var autoplay = win.find(\'#video_autoplay\');
if (this.value() == \'vine\') {
autoplay.disabled(true);
autoplay.value(\'\');
tinyMCE.DOM.setStyle( \'check-autoplay-l\',\'opacity\', \'.5\');
tinyMCE.DOM.setStyle( \'check-autoplay\',\'opacity\', \'.5\');
}
else {
autoplay.disabled(false);
tinyMCE.DOM.setStyle( \'check-autoplay\',\'opacity\', \'1\');
tinyMCE.DOM.setStyle( \'check-autoplay-l\',\'opacity\', \'1\');
}
},
label: \'Choose source\',
\'values\': [
{text: \'YouTube\', value: \'youtube\'},
{text: \'Vimeo\', value: \'vimeo\'},
{text: \'Vine\', value: \'vine\'},
],
},
{type: \'textbox\',
name: \'video_id\',
label: \'Video ID\',
value: \'\'
},
],
onsubmit: function( e ) {
editor.insertContent(\'[video source="\' + e.data.video_site + \'" id="\' + e.data.video_id +\'" autoplay="\'+ e.data.video_autoplay +\'"]\');
}
});
}
},