dhtmlxCombo有关wordpress的帮助



编辑:我找到了问题的解决方案。回答如下


我正试图在我的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的员工,他们给了我有用的信息,帮助我找到了解决问题的正确方法!

相关内容

  • 没有找到相关文章

最新更新