web-dev-qa-db-ja.com

管理ページのウィジェット内のjQuery UI

私はかなりの数の設定を持つウィジェットを作成したので、管理ページのウィジェット設定の中にタブ付きメニューを（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();

});

これがどこで問題になっているのか、誰にでもわかりますか？

widgetsjquerywp-adminjavascriptjquery-ui
1
DimC

わかりにくいので、タブを含むdiv要素にはクラスを使用し、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');
}

おそらく問題は上記の2つの点の組み合わせでした..とにかく、それは今うまくいく

2
DimC

私はあなたの答えをコメントするのに十分な評判を持っていないので、私はそれをここに投稿します。私は同様の問題を抱えています。 （左側を選択して右にドラッグ）、右側の適切なサイドバー領域。それで、その要素とその中のすべてが複製されます。同じIDが同じページに2回現れることはありません（一意になるように意図されています）。 jQueryはidが一意であると見なすので「混乱」していたので、どうやら要素を選択していないようです。

0
DzoniT

JQuery UIライブラリがロードされる前に、jsが含まれている可能性があります。この問題を解決するために、dependenciesパラメータを使用します。

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