/ 
HTML-JQuery-0.005
River stage zero No dependents
/ HTML::JQuery

NAME

HTML::JQuery - Generate jQuery/Javascript code in Perl

DESCRIPTION

This module is used to generate jQuery/Javascript code in Perl. What you do with it is up to you. I designed it for a work project where I needed to display certain Perl variables to the page using Javascript, so, instead of ajax calls I designed HTML::JQuery, which obviously took longer. Go figure. You can quite easily use it in a Perl Web Framework of your choice and display the Javascript it generates into a template, meaning you don't have to code any Javascript (Unless you need something extra).

SYNOPSIS

An example from a Catalyst point of view.

## Inside the Controller

my $j = jquery sub {
    function 'testfunc' => sub {
        my $name = shift;
        alert "Test func called: $name";
    };

    function 'init' => sub {
        my $name = shift;
        alert "Document Loaded. Inside $name";
    };

    onclick '#heading' => sub { fadeout shift; };

    dialog '#test' => (
        title => 'Click Box!',
        body  => 'Thanks for clicking :-)',
        modal => 1,
        autoOpen => 0,
        buttons => {
            "OK" => function(sub {
                dialog '#test', 'close';
                alert 'closed!';
            }),
            "Nah" => function(sub {
                alert "Fine. I won't close";
            }),
            q{'Test Func'} => function(sub {
                func 'testfunc';
            }),
        },
    );

    onclick '.button' => sub {
        dialog '#test', 'open';
    };

    onclick '.slidey' => sub {
        fadein ('#slide_text', 1000,
            function(sub {
                fadeout '#slide_text', 1000;
            })
        );
    };

    keystrokes '*' => ( keys => [qw( alt+ctrl+a )], event => function(sub { alert 'ALT+CTRL+A pressed' }) );
};

$c->stash->{jquery} = $j;

## Inside the template (.tt)
[% jquery %]

jquery

All your HTML::JQuery must be wrapped between the jquery subroutine, like so

my $j = jquery sub {
    ...
};

Then you can pass the $j variable to whatever output you need. For example, in Catalyst you might do:

my $j = jquery sub {
    function 'init' => sub { alert 'Loaded!'; };
};

$c->stash->{jquery} = $j;

# then in the template
[% jquery %]

jquery_inline

This is emulates an anonymous Javascript function. Like, function() { ... } Normally you would use these in callbacks.

onclick '#test' => sub {
    my $this = shift;
    hide $this, 2000, jquery_inline(sub { alert '#test is now hidden'; });
};

onclick

As the name states, this event will be triggered when a given element is clicked. The name of the element is passed in the first argument, if you need it.

onclick '.myclass' => sub {
    my $this = shift;
    alert "$this was called";
};

alert

A very basic Javascript alert box.

alert 'Huzzah!';

function

Creates a standard Javascript function. Currently arguments are not supported, but will be in the future. The first argument in the subroutine is the name of the function.

function 'boo' => sub {
    my $name = shift;
    alert "$name was called!";
};

Also, if we create a function called init, then HTML::JQuery will run it once the document has loaded.

function 'init' => sub {
    alert "The page has successfully loaded";
    alert "We can now do stuff";
};

As of 0.005, calling function with no name and just a code reference results in a Javascript callback (like jquery_inline, but with a more relevant name).

func

Simply calls a Javascript function.

function 'myfunc' => sub { alert "Help! I've been ran!"; };
onclick '#runIt' => sub { func 'myfunc'; };

fadeout

Hides the specified element with a "fade" effect. You can set the speed and even provide a callback for when the command has completed. The last two options are completely optional, though.

function 'fadeText' => sub {
    fadeout '#text';
    fadeout '#text2', 1000;
    fadeout '#text3', 'slow';
    fadeout '#text4', 2000, function(sub { alert '#text4 is now hidden' });
};

fadein

fadein is the exact same as fadeout, except it makes an element "re-appear". I won't repeat myself with example code.

slidetoggle

Binds itself to an element so when you click said element it appears by sliding out, then, when clicked again will disappear by sliding in.

onclick '#paragraph' => sub {  
    slidetoggle '.text', 1000;
};

slidetoggle also has a duration and callback feature, much the same as fadein and fadeout.

keystrokes

JQuery keybindings - a truly fun extension to JQuery. This requires a Javascript file that is included with this module. An example event to make an alert box appear after typing the word alert into your browser..

keystrokes '*' => ( keys => [qw( a l e r t )], event => function(sub { alert 'You typed a l e r t' }) );

Not only can it be triggered by keys pressed one after another, but you can make it work with multiple keys pressed at the same time.

keystrokes '*' => ( keys => [ 'alt+m' ], event => function(sub { alert 'Alt+M was pressed' }) );

It's also possible to mix multiple key presses with single ones if you wish.

dialog

Runs a jQuery dialog box. Let's take a look.

dialog '#test' => (
    title    => 'My dialog title',
    autoOpen => 1, # run when the document has loaded?
    modal    => 1, # focuses on the window and blocks out everything else until its closed
    body     => '<p>This is the content within the dialog</p>',
    buttons  => {
        OK   => function(sub {
            dialog '#test', 'close';
        }),
        Fade => function(sub {
            fadeout 'p', 1000;
            alert 'Text faded';
        }),
    },
);

rel

Just retrieves the rel attribute from an element.

rel '.somelink';

hide

Similar to fadeout, but without the actual "fade" effect. It simply hides an element, but doesn't permanently remove it. It will do a CSS equivalent to display:none. Like most of these types of functions the second argument is the duration and the third is a callback. Both are optional.

hide '#test', 1000, function(sub{ alert 'Hidden #test' });

show

The same as hide, only shows the element instead if it's hidden

dom_remove

Completely removes the given element from the DOM. This means it won't be able to be used again once it has been removed, unless you reload the page, of course.

onclick 'div' => sub {
    hide 'this', 2000, function(sub {
        dom_remove 'this'
    });
};

datepicker

Binds a fancy calendar to a specific element (Usually an input field). If you pass <auto =>> 1 in the hash then it will append dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true to the datepicker options plus anything you specify.

datepicker '.datefield' => ( dateFormat => 'mm-dd-yy', currentText => 'Now' );

You can see a list of options on jQuery UI's website for datepicker.

appendhtml

Dynamically appends html to a div.

innerhtml '#mydiv', 'Hello, World!';

BUGS

Please e-mail brad@geeksware.net

AUTHOR

Brad Haywood <brad@geeksware.net>

COPYRIGHT & LICENSE

Copyright 2011 the above author(s).

This sofware is free software, and is licensed under the same terms as perl itself.