it-swarm-pt.com

Usando abas para o plugin wordpress

Feito minha pesquisa e achei isso é como chamar o built-in ui guias jquery script em wp para a área de administração, mas eu estou preso na implementação do outros scripts de jquery necessários que eu acredito que estão embutidos no wp. Eu sei como adicionar o css e apenas adicionado html, eu só não quero causar problemas com outros plugins existentes, então eu quero adicionar esses scripts abaixo corretamente que são necessários.

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

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

Aqui está o que eu vou usar para o javascript (novamente como adicionar os scripts acima?):

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

Aqui está o que eu tenho até agora para html:

<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

Se houver problema apenas com a marcação html, você deve verificar o exemplo do site oficial da jQuery UI aqui: http://jqueryui.com/tabs/

Parece o seu, mas para o trabalho você deve verificar se o seu site inclui coisas como jquery e jquery ui script, jquery css também é importante. Depois disso você deve ter script com:

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

E tudo deve funcionar bem. Se você acha que está tudo bem com a configuração e não vê nenhum resultado, verifique o console do seu navegador para obter mais informações sobre erros do mecanismo de JavaScript.

6
Maciej Płusa