Drupal 7 扩展Overlay的方法详解?

WBOY

发布： 2016-05-25 16:47:35

原创

1850 人浏览过

在Drupal 7 以后我们可以轻松使用类似模态框的overlay模块来实现一个弹出层。下面我介绍2个实例，如何自定义扩展Overlay。

Drupal overlay examples

扩展 Overlay 模块头部显示用户头像实例

在你的自定义模块中加入overlay脚本JS文件，通过overlay的钩子：

function mymodule_overlay_child_initialize() {
  // Add our custom JavaScript.
  drupal_add_js(drupal_get_path(&#39;module&#39;, &#39;mymodule&#39;) . &#39;/overlay-child.js&#39;);
}

登录后复制

然后通过Add JS 头像路径到header中。

<?php
/**
 * @see hook_js_alter().
 */
function yourtheme_js_alter(&$javascript) {
    global $theme, $user;
    if (isset($user->picture) && is_string($user->picture)) {
        $picture = file_load($user->picture);
    } elseif (isset($user->picture) && is_object($user->picture)) {
        $picture = $user->picture;
    }
    if (isset($picture) && $picture && isset($picture->uri)) {
        $filepath = file_create_url($picture->uri);
        $javascript[&#39;settings&#39;][&#39;data&#39;][][&#39;user_picture&#39;] = $filepath;
    }
}
?>

登录后复制

在overlay - child.js文件中加入以下Javascript 代码：

(function ($) {
    Drupal.behaviors.yourmodule = {
        attach : function (context) {
            $(&#39;#overlay:not(.your-module-adjusted)&#39;, context).each(function () {
                if (Drupal.settings.user_picture) {
                    $(&#39;#overlay-titlebar&#39;, this).css(&#39;padding-left&#39;, 0);
                    $(&#39;#overlay-title-wrapper&#39;, this).find(&#39;h1#overlay-title&#39;).prepend(&#39;<img  src="&#39; + Drupal.settings.user_picture + &#39;" / alt="Drupal 7 扩展Overlay的方法详解? " >&#39;);
                }
            }).addClass(&#39;your-module-adjusted&#39;);
            $(&#39;.overlay .footer&#39;).hide();
        }
    };
})(jQuery);

登录后复制

完成后，你就可以看到如上面的图片的效果。

修改overlay覆盖层的宽度和隐藏元素实例

下面这个例子向你展示如何修改overlay (覆盖层) 内的内容，当一个指定的节点类型（test）被展示在overlay 覆盖层。这个脚本向你展示修改overlay层的宽度为450px 和隐藏一些不想见到的元素。

在你的模块中同样需要想上面的例子那样加入overlay-child.js脚本。

在overlay-child.js文件中加入以下Javascript 代码：

(function ($) {
    // Adjust the overlay dimensions.
    Drupal.behaviors.myModule = {
        attach : function (context) {
            $(&#39;#overlay:not(.mymodule-adjusted)&#39;, context).each(function () {
                var $test = $(this).find(&#39;.node-type-test&#39;);
                if ($test.length) {
                    // adjust the overlay
                    $(this).css({
                        &#39;width&#39; : &#39;450px&#39;,
                        &#39;min-width&#39; : &#39;450px&#39;
                    });
                    www.phprm.com
                    $(&#39;.add-or-remove-shortcuts&#39;, this).hide(); // hide "add short-cut" button
                    $(&#39;#branding&#39;, this).hide(); // hide branding container
                }
            }).addClass(&#39;mymodule-adjusted&#39;);
        }
    };
})(jQuery);

登录后复制

如果你想修改所有overlay层里的布局，请找到overlay.tpl.php然后修改它。