一聚教程网:一个值得你收藏的教程网站

热门教程

Drupal 7 扩展Overlay的方法详解?

时间:2022-06-24 23:01:39 编辑:袖梨 来源:一聚教程网

Drupal overlay examples
扩展 Overlay 模块头部显示用户头像实例
在你的自定义模块中加入overlay脚本JS文件,通过overlay的钩子:

 代码如下 复制代码

function mymodule_overlay_child_initialize() {
  // Add our custom JavaScript.
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/overlay-child.js');
}然后通过Add JS 头像路径到header中。

/**
 * @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);
  } www.111com.net
  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['settings']['data'][]['user_picture'] = $filepath;
  }
}

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

 代码如下 复制代码

(function ($) {
    Drupal.behaviors.yourmodule = {
        attach: function (context) {
            $('#overlay:not(.your-module-adjusted)', context).each(function() {
                if (Drupal.settings.user_picture) {
                    $('#overlay-titlebar', this).css('padding-left', 0);
                    $('#overlay-title-wrapper', this).find('h1#overlay-title').prepend('');
                }
            }).addClass('your-module-adjusted');
            $('.overlay .footer').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) {
      $('#overlay:not(.mymodule-adjusted)', context).each(function() {
        var $test = $(this).find('.node-type-test');
        if ($test.length){
          // adjust the overlay
          $(this).css({
            'width'     : '450px',
            'min-width' : '450px'
          });www.111com.net
          $('.add-or-remove-shortcuts', this).hide();  // hide "add short-cut" button
          $('#branding', this).hide();  // hide branding container
        }
      }).addClass('mymodule-adjusted');
    }
  };
})(jQuery);


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

 

热门栏目