添加<SELECT>WITH JAVASSCRIPT到管理栏。适用于Chrome/Safari,而不是Firefox

时间:2011-05-16 作者:Ryan Duff

我正在尝试向WordPress管理栏添加一个新菜单项。子菜单项包含用于切换主题的选择下拉列表。在Firefox中,使用href => false 它生成<a href=""> 当我点击select时,它重新加载了页面。我把它改成<a href="#">. 修复了单击“选择”时页面重新加载的问题。。。但是javascript不起作用。

代码本身在Mac上的Chrome和Safari中运行良好。我还没有在Windows上测试IE或任何浏览器。在Mac上的Firefox中,它什么都不做。

以下是插件生成的代码:

<li id="wp-admin-bar-switch_themes" class="menupop">
    <a href="#"><span>Switch Themes</span></a>
    <ul>
            <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">
                    <a href="#">
                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>
                    </a>
            </li>
    </ul>
</li>
生成管理栏项目的代码没有什么特别之处。。。

$wp_admin_bar->add_menu( array( \'id\' => \'switch_themes\', \'title\' => __( \'Switch Themes\', \'textdomain\' ), \'href\' => \'#\' ) );
$wp_admin_bar->add_menu( array( \'parent\' => \'switch_themes\', \'title\' => $theme_switcher->theme_switcher_markup(\'dropdown\'), \'href\' => \'#\' ) );

3 个回复
SO网友:pixeline

显然,您不能将select标记放在锚点内。发生的事情与事件冒泡有关:Firefox考虑的是锚定点击,而不是选择控件。

将html更改为:

 <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">

                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>

            </li>
它应该跨平台工作。

SO网友:Jan Fabry

如果要将内容添加到<a> 标签,您可以在[\'meta\'][\'html\'] 论点因此,您的代码如下所示:

$wp_admin_bar->add_menu( array(
    \'parent\' => \'switch_themes\',
    \'meta\' => array(
        \'html\' => $theme_switcher->theme_switcher_markup( \'dropdown\' ),
    ),
    \'href\' => \'#\',
    \'title\' => \' \', // An empty title will not be accepted
    \'id\' => \'wpse17434_child\', // If the title is empty, you need to specify the ID yourself
) );
这将生成一个丑陋的空<a> 在下拉列表上方阻止,但可以使用正确的样式隐藏此内容。

您是否考虑过不使用下拉菜单,而只使用子菜单来列出不同的主题?这将更符合当前的菜单栏样式。

SO网友:Ryan Duff

由于我无法编辑正在添加的标记,但我可以编辑其中的内容,因此我添加了一个结束标记,并在插入内容的末尾重新打开了一个新标记。然后用CSS隐藏他们在我的内容周围添加的空行。同时将两个标记上的href设置为#。。。。

修复了Firefox问题,这似乎是唯一一个足够挑剔的问题。。。甚至W3验证器也表示代码还可以。

下面是生成的代码:

<li id="wp-admin-bar-switch_themes" class="menupop">
<a href="#"><span>Switch Themes</span></a>
    <ul>                                
        <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=" themeswitchermenu"> 
            <a href="#"></a>
            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none; margin: 10px;"> 
                <option>Blah</option>
            </select><a href="#"></a> 
        </li>
    </ul>
</li>

结束

相关推荐

使用WP3.x将JavaScript注入帖子

我有一个客户机,他试图使用web界面将一些JS直接注入到帖子中。该脚本将在现场剥离。我无法在本地安装上复制此行为。JS按预期添加。我的安装和客户端的主要区别在于,我的安装是新的WP3安装,而客户端的安装是从WP2升级的WP3。这是配置选项还是遗留问题?是否有其他原因导致这种情况发生?富有的