将HTML数据属性添加到Joomla模块

Question

Sometimes it is necessary to add a data attribute to a joomla module, for instance if you want to use wow.js and want a delayed event you have to add data-wow-delay='2s' to the module div. At present there is no way to do this within the joomla framework

Answer 1

I have a solution which is a bit of a fudge, but gets the job done. It uses the 'header class' field under the advanced tab of the module manager.

in your template override directory templates/yourtemplate/html you should find a file called modules.php I have a module style called block which I use in my index.php file.

I edited it to look at the hederclass variable and see whether it contains the characters data-. If so I'm assuming that the header class is actually a data attribute. here is the code.

function modChrome_block($module, &$params, &$attribs)
{

    // Temporarily store header class in variable
    $headerClass    = $params->get('header_class');
    $headerAttribute = '';  //define the variable for the attribute
    if ($headerClass !=''){
        if (stripos($headerClass,'data-') !== false) {  //check to see if the header class contains the characters 'data-'
            $headerAttribute = htmlspecialchars($headerClass);
            $headerClass = '';
        }else{
            $headerClass    =  ' class="' . htmlspecialchars($headerClass) . '"';
        }
    }

    if (!empty ($module->content)) : ?>
           <div class="block <?php if ($params->get('moduleclass_sfx')!='') : ?><?php echo $params->get('moduleclass_sfx'); ?><?php endif; ?>" <?PHP echo $headerAttribute; ?>>
            <div class="moduletable">               
                <?php if ($module->showtitle != 0) : ?>
            <div class="module-title">
                            <h3 <?PHP echo $headerClass; ?>><?php echo $module->title; ?></h3>
            </div>
                        <?php endif; ?>
                        <div class="module-content">
                            <?php echo $module->content; ?>
                        </div>
              </div>                
           </div>
    <?php endif;
}

To make it work, in joomla module manager, open the module you want to apply the data attribute to, click on the 'advanced' tab and in the Header Class field add your data attribute using SINGLE QUOTES as follows

data-wow-delay='2s'

Hope this helps someone