使用WordPress插件的选项卡

时间:2012-12-15 作者:Jes

我做了研究,发现这是如何调用内置ui tabs jquery script 在wp中用于管理领域,但我一直致力于实现我认为内置在wp中的其他jquery脚本。我知道如何添加css,只是添加了html,我只是不想给其他现有插件带来任何问题,所以我想在下面正确添加这些脚本。

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

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

下面是我将用于javascript的内容(同样,如何添加上面的脚本?):

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\' );
以下是迄今为止我对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 --> 

2 个回复
最合适的回答,由SO网友:Maciej Płusa 整理而成

如果只有html标记有问题,您应该在这里查看官方jQuery UI站点的示例:http://jqueryui.com/tabs/

它看起来像是您的,但对于工作,您必须检查您的站点是否包含jquery和jquery ui脚本之类的内容,jquery css也很重要。之后,您应该使用以下脚本:

$( "#tabs" ).tabs();
一切都应该很好。如果您认为安装程序一切正常,但没有看到任何结果,那么应该检查浏览器控制台,以了解有关javascript引擎错误的更多信息。

SO网友:Bhumi Patel

function load_my_plugin_scripts( $hook ) {
// Load only on ?page=ticket-dashboard
if( $hook != \'toplevel_page_ticket-dashboard\' ) {
 return;
}
// Load style & scripts.
wp_enqueue_script( \'tickets_script\', get_template_directory_uri().\'/js/tickets.js\', array(\'jquery-ui-tabs\'), \'1.1\' ); // Need to add dependency on Array so your custom js will load once jquery-ui-tabs loads, here I have added js in theme file you can use plugin path if you have added js in plugin file
wp_enqueue_script( \'tickets_script\' );
wp_enqueue_script(\'jquery-ui-tabs\'); } add_action( \'admin_enqueue_scripts\', \'load_my_plugin_scripts\' );
希望这有帮助!

谢谢

结束