0

新しいテンプレートを drupal に適用しようとしましたが、アニメーション コンテンツ パーツでこれを行うことができません。

まず、テンプレートを関数型index.htmlおよび css で作成しました...完全に機能します。

メニュー例：

<ul id="menu">
<li><a href="#page_2">about us</a></li>
<li><a href="#page_3">Products</a></li>
</ul>

これら 2 つのリンクのいずれかをクリックすると、article 要素間のコンテンツが表示されます。

<article id="page_X">

<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, ad<p>

</article>

この Jquery アニメーションを通じて:

    $(function(){$('#content').find('article').hide().css({width:'0',marginLeft:'0%',left:'50%'});

var act='#page_1';$('#page_1').show();$('a').click(function(){page=$(this).attr('href');

if(page.substr(page.indexOf('#'),6)=='#page_'){

$('#menu a, footer a').parent().removeClass('active');

$(this).parent().addClass('active');

$(act).animate({width:'0',marginLeft:'0%',left:'50%'},600,'easeInCirc',function(){

$('#content').find('article').css({display:'none'})

$(page).css({display:'block'}).animate({width:'100%',marginLeft:'0%',left:'0%'},600,'easeOutCirc',function(){act=page;});});return false;}})})

静的コンテンツでは完全に機能しますが、私の問題は、以下を使用して、drupal 動的コンテンツでこれを行う方法ですpage.tpl.php。

<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'menu'), 'heading' => t(''))); ?>

と

 <?php print render($page['content']); ?>

詳細が必要な場合は教えてください。

本当にありがとうございました！

注: ブートストラップ ポップアップ モーダルでは、data-target を使用してこれを行うことができます。例:

<li><a class="" data-toggle="modal" **href="exemple."** **data-target="#page_2"**>Contact</a>
4

1 に答える 1

0

たいしたことではありませんが、基本的に、Drupal は「ビヘイビア」システムを使用して jquery アクションをコンテンツに追加します。これにより、 $(document).ready が通常起動した後 (最初のページの読み込み後) にコンテンツが追加されたときにスクリプトを実行できるようにするフレームワークが提供されます。

これは、オブジェクト (AJAX など) をページに追加するソースやタイミングに関係なく、一貫した方法でスクリプトを適用できるようにするためです。

次の 2 つのことを調べる必要があります。

1 つ目は JavaScript クロージャーで、2 つ目は Drupal ビヘイビアーのアタッチです。これらの概要は、https://drupal.org/node/171213にあります。

最初に「hello world」の Drupal ビヘイビアーを作成し、それを機能させてから、メニュー ロジックに取り組むことをお勧めします。「drupal の方法」で物事を行うにはかなりの学習曲線があるためです。

手始めに、次のようなものを実行する js ファイルを作成できます。

(function ($, Drupal, window, document, undefined) {

    Drupal.behaviors.helloWorldHandlers = {

        attach: function( context, settings ) {
            $("ul#menu").once("hello-world-handler", function() {
                $(this).click( function () { alert("hello world"); } )
            }
        }
    }

})(jQuery, Drupal, this, this.document);

（私はそれを正しく理解したと思います）

このファイルをテーマの .info ファイルに追加すると、簡単に実行できます。このようなものを実行するテーマの情報ファイルへの行は、それを行う必要があります:

scripts[] = js/helloworld_behavior.js

テーマの .info ファイルは、テーマのフォルダー構造のルートにあり、mythemename.info のような名前です。

それが機能するようになったら、残りのことを心配することができます。きっとあなたは新しいcmsとの通常の愛憎関係を築くでしょう.

于 2013-06-26T14:14:50.973 に答える