wake-up-neo.net

Verwenden von Registerkarten für das WordPress-Plugin

Ich habe nachgeforscht und festgestellt, dass das eingebaute ui tabs jquery script in wp für den Admin-Bereich aufgerufen werden kann, aber ich bin nicht sicher, ob ich die anderen in wp eingebauten jquery-Skripte implementieren kann. Ich weiß, wie man das CSS hinzufügt und habe gerade HTML hinzugefügt. Ich möchte einfach keine Probleme mit anderen vorhandenen Plugins verursachen, also möchte ich diese Skripte unten richtig hinzufügen, die erforderlich sind.

http://code.jquery.com/jquery-1.8.3.js

http://code.jquery.com/ui/1.9.2/jquery-ui.js

Hier ist, was ich für Javascript verwenden werde (wieder, wie man die Skripte oben hinzufügt?):

function my_plugin_load_js() {
wp_enqueue_script('jquery-ui-tabs');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

function mypluginjs() {
echo '<script>
jQuery(function() {
    jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_enqueue_scripts', 'mypluginjs' );

Folgendes habe ich bisher für HTML bekommen:

<div class="wrap">
  <h2>My plugin</h2>
  <form method="post" action="options.php">
  <?php settings_fields('my_plugin_options'); ?>
  <?php $options = get_option('my-plugin'); ?>

  <div id="tabs">
  <ul>
  <li><a href="#tabs-1">First</a></li>
  <li><a href="#tabs-2">Second</a></li>
  <li><a href="#tabs-3">Third</a></li>
  </ul>

  <table class="form-table">

  <div id="tabs-1"> options tr/td go here </div>
  <div id="tabs-2"> options tr/td go here </div>
  <div id="tabs-3"> options tr/td go here </div>

  <p class="submit">
   <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
  </p>
  </table>
  </form>
   </div> <!--- wrap end --> 
3
Jes

Wenn es nur Probleme mit HTML-Markups gibt, sollten Sie das Beispiel von der offiziellen jQuery-UI-Site hier überprüfen: http://jqueryui.com/tabs/

Es sieht aus wie deins, aber für die Arbeit müssen Sie prüfen, ob Ihre Site Dinge wie jquery und jquery ui script enthält. Jquery css ist auch wichtig. Danach solltest du ein Skript haben mit:

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

Und alles sollte gut funktionieren. Wenn Sie der Meinung sind, dass beim Setup alles in Ordnung ist und keine Ergebnisse angezeigt werden, sollten Sie in Ihrer Browserkonsole nach weiteren Informationen zu Fehlern von Javascript Engine suchen.

6
Maciej Płusa