Manipulera WP Admin Bar Styles med Events

Jag har blandade känslor om WordPress admin bar, men det har att göra med hur tredjepartslösningar lägger till sina alternativ till den (pluss att den kan inaktiveras om du inte är ett stort fan av det).

Nyligen publicerade jag ett litet plugin – främst avsett för utvecklare – som låter användare växla adminmeddelanden när de arbetar med WordPress (helst i sin lokala miljö, även om det kan installeras var som helst WordPress är installerat).

Insticksprogrammet är enkelt:

• Det introducerar ett objekt i WP admin bar,
• När du klickar på ett objekt växlar det alla meddelanden eller meddelanden som visas,
• När du klickar på den igen kommer den att växla deras synlighet.

Men det finns en liten nyans som jag tycker är värd att täcka och som har att göra med att manipulera WP-administratörsfältstilarna med kod på klientsidan.

Allt detta tas upp i det första inlägget, men en aspekt av koden som jag tycker är värd att dela för de som arbetar med admin-fältet och de som arbetar med JavaScript.

WP Admin Bar Styles

Om du tittar på källkoden för JavaScript som ingår i plugin-programmet, ser du följande :

(function( $) {
    'use strict';

    /**
     * Hide all of the messages when the option is include and restore the menu items'
     * default hover state style.
     */
    var hide_menu_notices = function() {

        // Setup references to the plugin menu item and all admin notices.
        var $admin_button = $( '#wp-admin-bar-toggle-admin-notices a' ),
            $messages     = $( '.notice, .warning, .error' );

        $admin_button.on( 'click', function( evt) {
            evt.preventDefault();

            $messages.toggle( 'medium' );
            $( this ).trigger( 'blur' );
        });
    };

    $(function() {
    hide_admin_notices();
    });
})( jQuery );

Generellt sett, när en användare klickar på ett objekt i WP Admin Bar, kommer den att omdirigera dem till en annan [server]-sida eller visar ett undermenyobjekt som gör detsamma. I fallet med detta plugin fungerar det dock på klientsidan, så allt är JavaScript.

Detta innebär att vi måste vara medvetna om de händelser som är bundna till föremålet så att vi kan manipulera dem. Och det är det jag kommer fram till i det här inlägget.

Kortfattat:

Menyalternativ har en oskärpa händelse kopplad till dem som gör att vi kan trigga så att vi kan manipulera WP admin bar stilar.

Visst, detta behöver inte vara isolerat till klientsidans funktionalitet, men om du vill manipulera menyobjektets stilar när du håller musen över objektet innan du laddar en annan sida, är detta händelsen du vill använda (på åtminstone när jag skriver detta inlägg).

Om du arbetar med ett plugin som integreras med menyraden och du vill manipulera WP admin bar stilar med JavaScript, är oskärpa händelsen den du vill använda när ditt särskilda menyradsobjekt utlöser händelsen.