web-dev-qa-db-fra.com

Cliquez sur masquer le groupe de metabox, comme dans la case à cocher des options d'écran?

J'ai plusieurs métaboxes dans l'écran d'édition.

Je créerais également une autre métabox dans laquelle l'utilisateur peut cliquer sur une case à cocher, puis masquer un ensemble de métaboxes, similaire à la fonctionnalité Options d'écran, uniquement lorsque la case à cocher est activée, un groupe de métaboxes est masqué.

Est-ce que quelqu'un sait comment aborder cela? Si ce n'est pas le cas, quel est le code utilisé par le menu Options d'écran qui dicte le clic, masquez metabox. ?

Merci.

metabox
1
John

La partie boîtes de basculement est assez simple, que je peux gérer, mais enregistrer l’état des boîtes est plus délicat. JS n'est malheureusement pas l'un de mes points forts et je ne parviens pas à récupérer les boîtes aux lettres pour sauver leur état. Cela dit, je peux vous montrer comment faire basculer des groupes de boîtes et ajuster les cases en conséquence, je la posterai dans l’espoir que quelqu'un d'autre puisse remplir les liens manquants pour obtenir la mise à jour des états des boîtes aux lettres (sinon, lors de l'actualisation). ou revenez à l’écran, les groupes de cases pour lesquelles vous avez basculé en visibilité ne se souviendront plus de leur état).

HTML pour les liens à bascule

<p>
    <a class="metabox-group" id="group-1" href="#">Group 1</a> | 
    <a class="metabox-group" id="group-2" href="#">Group 2</a>
    <span class="hidden" id="meta-group-1">commentstatusdiv,commentsdiv</span>
    <span class="hidden" id="meta-group-2">categorydiv,tagsdiv-post_tag</span>
</p>

Les étendues n'ont pas besoin d'être étendues, vous pouvez bien sûr utiliser des entrées ou ce que vous souhaitez pour tenir une liste séparée par des virgules des cases à basculer (une liste de leurs identifiants).

jQuery/JS pour basculer

<script type="text/javascript">
    jQuery(document).ready(function($){

        // Attach a click function to links with the metabox-group class
        $('a.metabox-group').click(function(){

            // Find the element containing a list of elements to hide and split into array
            var box_group = $('#meta-'+this.id).text().split(',');

            // Ensure there's at least two items to toggle
            if( 2 > box_group.length )
                return false;

            // Loop over the pieces(the array of element IDs)
            $(box_group).each(function(){

                // Find and store the associated checkbox
                var toggle_checkbox = $('input#' + this + '-hide');

                // If the checkbox is currently unchecked
                if( !toggle_checkbox.is(':checked') ) {

                    // Show the metabox
                    $('#'+this).show();

                    //if ( $.isFunction( postboxes.pbshow ) )
                        //postboxes.pbshow( this );
                }
                // Else
                else {

                    // Hide the metabox
                    $('#'+this).hide();

                    //if ( $.isFunction( postboxes.pbhide ) )
                        //postboxes.pbhide( this );
                }
                // Toggle the checkbox 
                $(toggle_checkbox).attr('checked',!toggle_checkbox.is(':checked'));

            });

            //postboxes.save_state(page);

            return false;
        });
    });
</script>

Le code de boîte postale que vous voyez ici est commenté car il ne fonctionne pas (je l'espérais), je ne suis tout simplement pas assez au courant de JS pour savoir ce qui me manque sur ce front, mais je l'ai laissé là pour les autres en mesure d'aider peuvent voir ce que j'ai essayé ..;)

Désolé je ne pourrais pas donner une réponse complète, mais j'espère que ça aide quand même .. :)

1
t31os