web-dev-qa-db-fra.com

Ajout de <select> avec javascript à la barre d'administration. Fonctionne dans Chrome/Safari, pas Firefox

J'essaie d'ajouter un nouvel élément de menu à la barre d'administration WordPress. L'élément de sous-menu contient un menu déroulant de sélection permettant de changer de thème. Dans Firefox avec href => false, il générait <a href=""> et lorsque je cliquais sur l'icône de sélection, il rechargeait la page. Je l'ai changé en <a href="#">. Cela a corrigé le rechargement de la page en cliquant sur le bouton select ...

Le code lui-même fonctionne très bien dans Chrome et Safari sur Mac. Je n'ai pas encore testé IE ni aucun navigateur sous Windows. Dans Firefox sur Mac, cela ne fait rien.

Voici le code généré par le plugin:

<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>

Rien d'extraordinaire dans le code pour générer les éléments de la barre d'administration ...

$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' => '#' ) );
pluginsjavascriptadmin-bar
2
Ryan Duff

De toute évidence, vous ne pouvez pas placer une balise select dans une ancre A. Ce qui se passe est lié à la propagation d'événements: Firefox prend en compte le clic d'ancrage A, pas le contrôle de sélection.

Changez votre html en:

 <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>

et cela devrait fonctionner multi-plateforme.

2
pixeline

Si vous souhaitez ajouter du contenu à l'élément de menu en dehors de la balise <a>, vous pouvez l'ajouter dans l'argument ['meta']['html']. Donc, votre code ressemblerait à ceci:

$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
) );

Cela générera un bloc <a> vide et moche au-dessus de votre liste déroulante, mais vous pouvez le masquer avec le style correct.

Avez-vous envisagé de ne pas utiliser un menu déroulant mais juste un sous-menu pour répertorier les différents thèmes? Ce serait plus conforme au style actuel de la barre de menu.

2
Jan Fabry

Étant donné que je ne pouvais pas modifier les balises ajoutées mais que je pouvais modifier ce qui se trouvait à l'intérieur, j'ai ajouté une balise de fermeture et rouvert une nouvelle balise à la fin de ce que j'étais en train d'insérer. Ensuite, j'ai simplement utilisé CSS pour masquer la ligne vide qu'ils ajoutaient autour de mon contenu. Définissez également le href sur les deux balises sur # ....

Correction du problème de Firefox qui semblait être la seule chose assez pointilleux ... même le validateur W3 a déclaré que le code était correct.

Voici le code résultant:

<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>
0
Ryan Duff