编辑:我找到了问题的解决方案。回答如下
我正试图在我的wordpress安装上实现一个ComboBox,但由于某种原因,我无法使其工作。
这就是我迄今为止所做的:
- 从下载dhtmlx(整个套件)dhtmlx.com/docs/download.shtml
- -将代码库、皮肤和源文件复制到我的服务器(example.com)
在上添加了一个函数function.php文件的我的孩子主题(主题X)(写了绝对链接供参考)
add_action('wp_head','add_combobox_header');
function add_combobox_header() {
echo'
<script src="http://example.com/dhtmlx/codebase/dhtmlx.js"></script>
<link rel="stylesheet" type="text/css" href="http://example.com/dhtmlx/skins/web/dhtmlx.css"/>
<script async>
var myCombo, myCombo2;
function doOnLoad() {
myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
myCombo.load("http://example.com/dhtmlx/combo_group.php?mode=state");
myCombo.enableFilteringMode(true);
//
myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
myCombo2.enableFilteringMode(true);
myCombo2.disable();
//
myCombo.attachEvent("onChange", function(value){
myCombo2.clearAll();
myCombo2.setComboValue(null);
myCombo2.setComboText("");
if (value == null) {
myCombo2.disable();
} else {
myCombo2.enable();
myCombo2.load("http://example.com/dhtmlx/region/region_country.xml");
}
});
}
</script>
';
}
4) 在原始内容模块上复制了以下代码(有成千上万的插件。如果你觉得更合适,你也可以直接在你的孩子主题上添加它):
<div onload="doOnLoad();">
<h3>Select state</h3>
<div id="combo_zone" style="width:230px;"></div>
<br>
<h3>Select city</h3>
<div id="combo_zone2" style="width:230px;"></div>
</div>
但我得到了这样的结果:屏幕截图
除了combobox,我可以看到所有东西,我不知道我做错了什么(我在error_log上或在firefox或chrome中检查元素时没有得到任何错误)。
我试过所有的方法,但我总是得到同样的结果,所以在这一点上,我只能希望你们中的一些人给我指明正确的方向,或者至少告诉我我做错了什么,因为我已经没有主意了。
附言:我也试着为它构建一个短代码,得到了同样的结果。这只是我尝试的最后一个代码,它实际上是官方网站上显示的示例的复制粘贴:Grouping Combo-dhtmlXCombo
<div onload="doOnLoad();">
div没有onload事件,在dhtmlx演示中,它附加到了body元素。您可以尝试以下代码:
dhtmlxEvent(window, function(){
var myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
...
})
经过大量的阅读和尝试,我终于解决了这个问题!我想与社区分享我的解决方案。
在我开始讨论我的解决方案之前,我想告诉你,我使用的第一个代码是如何分组combo的示例代码,你可以在官方图书馆网站中找到它
让我们开始:
1) 我把标题添加到了主题的标签中。为此,我转到:root/wp-content/themes/your主题(使用ftp),然后编辑functions.php文件,添加此函数:
//-----ADD HEADERS FOR COMBOBOX ---------------
add_action('wp_head','add_combobox_header');
function add_combobox_header() {
wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlxcombo_dhx_web.css');
wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.css');
wp_enqueue_script( 'dhtmlxjs', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.js','', '', true );
}
注意:dhtmlxcombo_dhx_web.css只是组合框的皮肤,因此您可以将dhtmlx.css作为默认皮肤,也可以将dhtmlxcombo_dhx_web.css作为更好的web应用(我在此处添加这两个仅用于参考您不需要同时拥有这两个)
2) 然后我在标签之前添加了原始代码的脚本(见上面的链接),这样它就不会干扰网站的加载。
//-----SCRIPT FOR COMBOBOX-----------------
add_action('wp_footer', 'combobox_js_code_after_body');
function combobox_js_code_after_body() {
?>
<script>
var myCombo, myCombo2;
function doOnLoad() {
myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
myCombo.load("http://your-site.com/dhtmlx/options.xml");
myCombo.enableFilteringMode(true);
//
myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
myCombo2.enableFilteringMode(true);
myCombo2.disable();
//
myCombo.attachEvent("onChange", function(value){
myCombo2.clearAll();
myCombo2.setComboValue(null);
myCombo2.setComboText("");
if (value == null) {
myCombo2.disable();
} else {
myCombo2.enable();
myCombo2.load("http://your-site.com/dhtmlx/options2.xml");
}
});
}
</script>
<?php
}
3) 我现在想把"onload"属性添加到主题的body标记中,所以我转到主题的目录,编辑了header.php(在我的例子中),并更改了以下代码:
<body <?php body_class(); ?>>
进入这个:
<body <?php body_class(); ?> onload="doOnLoad();">
然后在我的主题的原始内容模块上添加了剩余的代码:
<h3>Select state</h3>
<div class="combo_info">California for example</div>
<div id="combo_zone" style="width:230px;"></div>
<br>
<h3>Select city</h3>
<div id="combo_zone2" style="width:230px;"></div>
和VOILA!现在我的网站上有一个不错的组合框=D
注意:我要感谢themeco的员工,他们给了我有用的信息,帮助我找到了解决问题的正确方法!