web-dev-qa-db-ja.com

template.phpを介してjQueryタブを追加する

「template.php」ファイルにjQueryタブをどのように追加しますか？
drupal_add_library('system', 'jQuery.tabs')またはdrupal_add_js('/misc/ui/jquery.ui.tabs.min.js')を使用して追加しようとしていますが、うまくいきません。

これが私の完全なスニペットです：

function custom_theme(&$existing, $type, $theme, $path) {
  $hooks = array(); 
  drupal_add_library('system', 'ui.tabs');
  // custom.js will call jQuery.tabs!
  drupal_add_js( path_to_theme() .'/js/custom.js', array('weight' => 9));

  return $hooks;
}
7javascript
2
chrisjlee

hook_theme（） は、モジュールまたはテーマによって実装されたテーマ関数のリストを返す必要があるフックです。

drupal_add_library()内でdrupal_add_js()またはhook_theme()を呼び出すことは、JavaScriptファイルをページに追加する方法ではありません。

。infoファイルの構造 で報告されているように、テーマはscriptsディレクティブを使用して、使用するJavaScriptファイルを宣言できます。

_scripts[] = js/custom.js
_

または、テーマはテーマ関数内でdrupal_add_js()を使用するか、page.tpl.php内で次の省略されたページを使用できます。または、代替のページテンプレートDrupalが使用します。

_drupal_add_js($path_to_script);
$scripts = drupal_get_js();
_
2
kiamlaluno

具体的な質問は、jQuery UIタブの追加に関するものだと思います。別の答えは、カスタムJavaScriptファイルを追加することです。

多くのページに多くのタブがある場合、私はこれを hook_init（） を使用したカスタムモジュールで達成しています

function mymodule_init(){
    drupal_add_library('system','ui.tabs');
}

コメントで、この質問は特定のページ（またはノード）でこれを達成する方法を尋ねます。

これは、template.phpのテーマで template_preprocess_page（） を使用して実行できます。

function mytheme_preprocess_page(&$variables) {
    echo "<pre>"; print_r($variables['node']); echo "</pre>";   // great for debugging
    if ($variables['node']->nid == 3) drupal_add_library('system', 'ui.tabs');
}

上記のコードは、ノード3がjQuery UIタブを持つターゲットページであることを前提としています。

これらを追加した後は、キャッシュをフラッシュすることを忘れないでください。

これでライブラリをロードしました。次のステップは、javascriptファイルをモジュール/テーマに追加することです。これは、mytheme/mymodule。infoファイルで行われます。追加

scripts[] = js/script.js

「js」フォルダーを作成し、script.jsを作成し、次のパターンに従ってDrupalプラクティスに従います。

(function($, Drupal, window, document, undefined) {
    Drupal.behaviors.my_custom_behavior = {
        attach : function(context, settings) {
            // assuming your div is "tabs"
            jQuery("#tabs").tabs();
        }
    };
})(jQuery, Drupal, this, this.document);

したがって、簡単にするために、ノード3のコンテンツをフルHTML（またはPHP））に設定し、本文を次のようにすると、異なるタブに2つのビューが表示されます。

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Stack Overflow</a></li>
  <li><a href="#tabs-2">Drupal StackExchange</a></li>
</ul>
  <div id="tabs-1">
    Let's show our View for Stack Overflow
    <?php echo views_embed_view('stackoverflow', 'machine_name_foo'); ?>
  </div>
  <div id="tabs-2">
    And for Drupal
    <?php echo views_embed_view('drupal_se', 'machine_name_bar'); ?>
  </div>
</div>
1
mikeDOTexe