Question

我尝试在drupal中应用我的新模板，但我无法使用animate内容部分执行此操作。

首先，我在功能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模式中，我们可以使用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建立正常的爱/恨关系。

在drupal上应用我的新主题的问题

1 个答案: