Drupal 7 扩展Overlay的方法详解?
在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然后修改它.
查看更多关于Drupal 7 扩展Overlay的方法详解? - php高级应用的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did30382