Drupal 7 扩展Overlay的方法详解? -php手册-php.cn

Home

php教程

php手册

Drupal 7 扩展Overlay的方法详解?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 25, 2016 pm 04:47 PM

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

Copy after login

然后通过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;
    }
}
?>

Copy after login

在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="/static/imghw/default1.png"  data-src="&#39; + Drupal.settings.user_picture + &#39;"  class="lazy"   / alt="Drupal 7 扩展Overlay的方法详解? " >&#39;);
                }
            }).addClass(&#39;your-module-adjusted&#39;);
            $(&#39;.overlay .footer&#39;).hide();
        }
    };
})(jQuery);

Copy after login

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

修改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);

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn