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>

当我单击这两个链接之一时，文章元素之间的内容将显示：

<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']); ?>

如果您需要更多详细信息，请告诉我。

十分感谢！

注意：在引导弹出模式中，我们可以使用数据目标执行此操作，例如：

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

1 回答 1

0

这没什么可继续的，但基本上，Drupal 使用“行为”系统将 jquery 操作附加到内容。这提供了一个框架，允许脚本在 $(document).ready 通常触发后添加内容时运行（在初始页面加载之后）

这样一来，无论向页面添加对象的来源和时间（AJAX 等）如何，都可以以一致的方式应用脚本。

你需要研究两件事：

第一个是 JavaScript 闭包，第二个是附加 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 回答