php - Probleme 在 drupal 上应用我的新主题

Question

我尝试在 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;}})})

它与静态内容完美配合，但我的问题是如何在 page.tpl.php 中使用 drupal 动态内容，使用:

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

和

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

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

非常感谢!

注意:在 bootstrap popup modal 中，我们可以使用 data-target 来做到这一点，例如:

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

Answer 1

这没什么可继续的，但基本上，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 建立正常的爱/恨关系。