Drupal 7 扩展Overlay的方法详解?
发布时间：2022-07-05 09:53:07 所属栏目：PHP教程 来源：互联网
导读：在Drupal 7 以后我们可以轻松使用类似模态框的overlay模块来实现一个弹出层,下面我介绍2个实例,如何自定义扩展Overlay. 扩展 Overlay 模块头部显示用户头像实例,在你的自定义模块中加入overlay脚本JS文件,通过overlay的钩子,代码如下: function mymodule_ove
|
在Drupal 7 以后我们可以轻松使用类似模态框的overlay模块来实现一个弹出层,下面我介绍2个实例,如何自定义扩展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.phpfensi.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代码: (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 代码: (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.phpfensi.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然后修改它 （编辑：许昌站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
