web-dev-qa-db-fra.com

Utilisation des onglets dans les widgets admin

Mise à jour: je dois signaler que j'ai testé la méthode ci-dessous sur la page des options de plugin/thème et que cela a fonctionné parfaitement. En fait, j'ai également pu inclure le plug-in de cookies jQuery afin de préserver la sélection d'onglets actuelle entre les chargements de pages (Nice!).

Vous avez essayé d'ajouter des onglets à un widget administrateur pour réduire l'encombrement du formulaire lorsque vous disposez de plusieurs options de widget. J'utilise les onglets de l'interface utilisateur jQuery inclus avec WordPress. Voici ce que j'ai jusqu'ici codé dans un plugin.

http://Pastebin.com/fe4wdBcp

Lorsque le widget est déplacé dans une zone de widget, les onglets semblent rendre correctement, mais vous ne pouvez pas cliquer pour afficher le deuxième onglet. Pire encore, si vous actualisez la page des widgets, la mise en forme des onglets est complètement perdue, et les onglets ne répondent toujours pas aux événements de clic.

Je ne sais pas quel est le problème ici. Toute aide appréciée.

widgetsadmintabs
2
dgwyer

Le problème est que vous n'utilisez pas d'ID uniques (#tabs, # tabs-1 ...), car les widgets ont plusieurs instances (les mêmes ID sont utilisés par l'instance dans la zone "Widgets disponibles").

Donc, ajoutez ou ajoutez simplement l'ID d'instance de widget à vos identifiants pour les rendre uniques:

...
<div id="tabs-<?php echo $this->id; ?>">
    <ul>
        <li><a href="#tabs-<?php echo $this->id; ?>-1">Tab One</a></li>
        <li><a href="#tabs-<?php echo $this->id; ?>-2">Tab Two</a></li>
    </ul>
    <div id="tabs-<?php echo $this->id; ?>-1">
        <p><?php _e('Textbox 1') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text1'); ?>" type="text" value="<?php echo esc_attr($text1); ?>" /></p>
        <p><?php _e('Textarea 1') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea1'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea1); ?></textarea></p>
    </div>
    <div id="tabs-<?php echo $this->id; ?>-2">
        <p><?php _e('Textbox 2') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text2'); ?>" type="text" value="<?php echo esc_attr($text2); ?>" /></p>
        <p><?php _e('Textarea 2') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea2'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea2); ?></textarea></p>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#tabs-<?php echo $this->id; ?>").tabs();
    });
</script>
...

Aussi, pas sûr si WP 3.3 résolu ce problème , mais après le premier glissement dans la barre latérale, l'action de sauvegarde du widget doit être déclenché manuellement pour que la propriété id soit disponible dans la fonction form ().

1
onetrickpony