Book Image

MooTools 1.2 Beginner's Guide

Book Image

MooTools 1.2 Beginner's Guide

Overview of this book

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.
Table of Contents (14 chapters)
MooTools 1.2 Beginner's Guide
Credits
About the Authors
About the Reviewer
Preface

Time for action—multiple instances of the ImageCaption plugin


We are going to create two instances of our ImageCaption class on the same web page to outline just how powerful creating plugins can be.

  1. We're still going to use the same HTML markup and just build on top of the code we already have from the preceding example. We create a new instance called captionNormal, and then use this instance for all other images that don't have the ID of #caption-on-top.

    var captionOnTop = new ImageCaption($$('#caption-on-top'), {
    captionPosition: 'before'
    });
    var captionNormal = new ImageCaption($$('img[id!=caption-on-top]'), {
    captionPosition: 'after'
    });
    
  2. Test your work in a web browser. You should see that the other images will have their caption text after the img element.

What just happened?

In the previous two examples, we learned how to create a more complex instance of our ImageCaption plugin, as well as how to create multiple instances of it in the same web page. By doing so, we can see the advantages...