我创建了一个有很多设置的小部件,因此我尝试在管理页面的小部件设置中创建一个选项卡式菜单(使用jQuery UI)。
问题基本上是选项卡不会出现(即,a标记只出现在顶部,相关div位于其下方)。
这是小部件的缩写版本:
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
}
}
这是我的js:
jQuery(document).ready(function($) {
$( "#tabs" ).tabs();
});
有人能看出哪里出了问题吗?
最合适的回答,由SO网友:DimC 整理而成
好吧,由于某种原因我无法理解,答案是包含制表符的div元素应该有一个class 而不是id 要使jQuery UI正常工作,例如:
<div class="mytabs">
以及
jQuery(document).ready(function($) {
$(".mytabs").tabs();
});
为了记录在案,我赋予脚本的方式是:
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\');
}
也许问题是以上两点的结合。。不管怎样,它现在起作用了