管理页面上的小部件中的jQuery UI

时间:2013-02-28 作者:DimC

我创建了一个有很多设置的小部件,因此我尝试在管理页面的小部件设置中创建一个选项卡式菜单(使用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();

});
有人能看出哪里出了问题吗?

3 个回复
最合适的回答,由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\');
}
也许问题是以上两点的结合。。不管怎样,它现在起作用了

SO网友:Khior

看起来您可能在加载jQuery UI库之前包含了js。要解决此问题,我将使用dependencies参数:

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

SO网友:DzoniT

我没有足够的声誉来回复您对答案的评论,所以我将在这里发布:我有类似的问题,而类选择器工作(id不工作)的原因是,在widgets页面上,该元素出现两次(在左侧选择它并向右拖动),然后在右侧相应的侧边栏区域。因此,该元素和其中的所有内容都是重复的。同一id不应在同一页上出现两次(其目的是唯一的)。jQuery之所以“困惑”,是因为它认为id是唯一的,所以显然它并没有选择任何元素。

结束

相关推荐

选择的jQuery库未加载-不是函数错误

我正在尝试加载所选库:http://harvesthq.github.com/chosen/我正在排队。js文件如下:wp_register_script( \'js_custom\', plugin_dir_url( __FILE__ ) . \'js/jquery.js\', false ); wp_enqueue_script ( \'js_custom\' ); 内部。我加载的js文件如下所示:jQuery(document).ready(function($){ $