it-swarm.com.de

jQuery-Benutzeroberfläche im Widget auf der Admin-Seite

Ich habe ein Widget mit einigen Einstellungen erstellt. Daher versuche ich, ein Menü mit Registerkarten (mithilfe der jQuery-Benutzeroberfläche) in den Widget-Einstellungen der Administrationsseite zu erstellen.

Das Problem ist im Grunde, dass Tabs nicht vorkommen (d. H. Die a-Tags werden nur oben und die zugehörigen Divs darunter angezeigt).

Dies ist eine verkürzte Version des Widgets:

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
}


}

Und das ist mein js:

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

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

});

Kann jemand sehen, wo das schief geht?

1
DimC

Ok, also, aus irgendeinem Grund kann ich nicht verstehen, die Antwort ist, dass das div-Element, das die Tabulatoren enthält, eine Klasse und keine ID haben sollte damit die jQuery-Benutzeroberfläche ordnungsgemäß funktioniert:

<div class="mytabs">

und

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

Nur zur Veranschaulichung: Ich habe die Skripte folgendermaßen eingegeben:

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');
}

Vielleicht war das Problem eine Kombination der beiden obigen Punkte. Wie auch immer, es funktioniert jetzt

2
DimC

Ich habe nicht genug Reputation, um auf Ihre Antwort zu antworten. Deshalb werde ich es hier posten: Ich hatte ein ähnliches Problem und antworte, warum die Klassenauswahl funktioniert (und die ID nicht), weil dieses Element auf der Widgetseite zweimal erscheint (Wählen Sie es auf der linken Seite aus und ziehen Sie es nach rechts) und auf der rechten Seite in den entsprechenden Seitenleistenbereich. Dieses Element und alles darin ist also dupliziert. Dieselbe ID sollte niemals zweimal auf derselben Seite erscheinen (sie soll eindeutig sein). jQuery war "verwirrt", weil es IDs als eindeutig ansieht, so dass anscheinend kein Element ausgewählt wurde.

0
DzoniT

Es sieht so aus, als würden Sie möglicherweise Ihre js einfügen, bevor die jQuery-UI-Bibliothek geladen wird. Um das Problem zu beheben, würde ich den Parameter "dependencies" verwenden:

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