Drupal 7 扩展Overlay的方法详解?
扩展 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.jiaochengji.com
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 代码：
<table style="background: #fb7" border="0" cellspacing="1" cellpadding="1" width="620" align="center"> <tbody> <tr> <td bgcolor="#ffe7ce" height="27" width="464"> 代码如下</td> <td style="cursor: pointer" bgcolor="#ffe7ce" width="109" align="center" onclick="doCopy('copy8517')">复制代码</td> </tr> <tr> <td style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px" id="copy8517" class="copyclass" bgcolor="#ffffff" valign="top" colspan="2">(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('<img src="' Drupal.settings.user_picture '" />');
}
}).addClass('your-module-adjusted');
$('.overlay .footer').hide();
}
};
})(jquery);
完成后，你就可以看到如上面的图片的效果。
修改overlay覆盖层的宽度和隐藏元素实例
下面这个例子向你展示如何修改overlay (覆盖层) 内的内容，当一个指定的节点类型（test）被展示在overlay 覆盖层。这个脚本向你展示修改overlay层的宽度为450px 和 隐藏一些不想见到的元素。
在你的模块中同样需要想上面的例子那样加入overlay-child.js脚本。
在overlay-child.js文件中加入以下Javascript 代码：
<table style="background: #fb7" border="0" cellspacing="1" cellpadding="1" width="620" align="center"> <tbody> <tr> <td bgcolor="#ffe7ce" height="27" width="464"> 代码如下</td> <td style="cursor: pointer" bgcolor="#ffe7ce" width="109" align="center" onclick="doCopy('copy5797')">复制代码</td> </tr> <tr> <td style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px" id="copy5797" class="copyclass" bgcolor="#ffffff" valign="top" colspan="2">(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.jiaochengji.com
$('.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然后修改它。
您可能感兴趣的文章：
Drupal 7 扩展Overlay的方法详解?
强大的Drupal有什么缺陷与不足？
专家教你如何有效的学习Drupal - Drupal问答
Drupal 7结合Apache Solr 4.7实现中文分词教程
Drupal的缓存技术应用-让你的网站飞起来
Drupal 通过cURL Post方式发送一个文件
Drupal配置迁移详细讨论
drupal7连接多个数据库问题解析
jquery tools系列 overlay 学习第1/2页
JQuery slideshow的一个小问题(如何发现及解决过程)