Using The ‘HTML’ Type Module

So we’ve seen when creating new modules there’s a number of arguments and one of these are HTML.

So what can you do with this HTML field? Answer is pretty much anything you want! It doesn’t need to just be a link. Check out the video for a few examples and click into the article for the simple steps to reproduce these!

So in the video you see two customisations. The first is the grey highlighting behind every module and the second is a confirmation box on each click of a module (neither of which are the most ground breaking of examples but just demos how to use the HTML field).

So, how were they done?
Create a new module and select link type as HTML.
In the arguments field, enter the following code:

<style>
  a.menu:hover {
    background-color:lightgrey;
  }
</style>

For the confirmation link, you can do something similar but this time add a <script> tag. In the arguments enter:

<script>
  addLoadEvent( function() {
    $$('a.menu').each( function(e) {
      e.observe('click', doConfirmation);
    });
  });
  function doConfirmation(event) {
    var t = event.element().text;
    var x = confirm('Are you sure you want to click on ' + t + '?');
    if (!x) {
      event.stop();
    }
  }
</script>

And that’s all there is to it. You can play around with this how you like. Maybe add different roles to different modules so only show particular highlighting or do a particular action if you have the necesary role.

Or maybe create a popup so you can add a link that popups a window on top of the form instead of navigating elsewhere.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s