web-dev-qa-db-fra.com

interface utilisateur jQuery in the widget of the page d'administration

J'ai créé un widget qui comporte pas mal de paramètres. J'essaie donc de créer un menu à onglets (à l'aide de l'interface utilisateur jQuery) à l'intérieur des paramètres de widget de la page d'administration.

Le problème est fondamentalement que les onglets ne se produisent pas (c'est-à-dire que les balises a apparaissent simplement en haut et les div associés en dessous).

Ceci est une version abrégée du widget:

add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook)
{
$my_plugin_url = trailingslashit( get_bloginfo('wpurl') ).PLUGINDIR.'/'. dirname( plugin_basename(__FILE__) );
if( 'widgets.php' != $hook )
        return;
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ) ); 
wp_register_script( 'jqui', 'http://code.jquery.com/ui/1.10.0/jquery-ui.js',false,'' ); 
wp_register_style( 'jquistyle', 'http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css',false,'' );    

wp_enqueue_script('my_adminjs_script');
wp_enqueue_script('jqui');
wp_enqueue_style('jquistyle');
}

class my_widget extend WP_Widget {

//constructor
//front end stuff

//admin page:
function form($instance) {  
?>
 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringieuismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lt nec, luctus a, lacus.</p>
   </div>
</div>

<?PHP
}


}

Et voici mon js:

jQuery(document).ready(function($)    {

$( "#tabs" ).tabs();

});

Quelqu'un peut-il voir où cela ne va pas?

widgetsjquerywp-adminjavascriptjquery-ui
1
DimC

Ok, donc, pour une raison que je ne comprends pas, la réponse est que l’élément div contenant les onglets doit avoir une classe et non un id pour que l'interface utilisateur de jQuery fonctionne correctement, en tant que telle:

<div class="mytabs">

et

jQuery(document).ready(function($) {
    $(".mytabs").tabs();
});

Pour mémoire, voici comment j'ai enquêté les scripts:

add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook){
if( 'widgets.php' != $hook )
        return;         
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ), array('jquery','jquery-effects-core','jquery-ui-tabs'));
wp_enqueue_script('my_adminjs_script');
}

Peut-être que le problème était une combinaison des deux points ci-dessus .. Quoi qu'il en soit, cela fonctionne maintenant

2
DimC

Je n'ai pas assez de réputation pour répondre pour commenter votre réponse, je vais donc la poster ici: j'ai eu un problème similaire, et je vous explique pourquoi le sélecteur de classe fonctionne (et mon id n'est pas) parce que sur la page des widgets, cet élément apparaît deux fois. (sur le côté gauche pour le sélectionner et le faire glisser vers la droite), et sur le côté droit, dans la zone de la barre latérale appropriée. Donc, cet élément et tout ce qu'il contient sont dupliqués. Le même identifiant ne doit jamais apparaître deux fois sur la même page (il est censé être unique). jQuery était "confus" parce qu'il considérait que l'identifiant était unique, donc apparemment, il n'a sélectionné aucun élément.

0
DzoniT

Il semble que vous puissiez inclure votre js avant le chargement de la bibliothèque de l'interface utilisateur jQuery. Pour résoudre le problème, je voudrais utiliser le paramètre dependencies:

// ...
wp_enqueue_script('jqui');
wp_enqueue_script('my_adminjs_script', false, array('jqui'));
// ...
0
Khior