NAME
HTML::JQuery - JQuery for Perl programmers
DESCRIPTION
HTML::JQuery acts as a bridge between Perl and JQuery/Javascript. It
enables Perl programmers to do as much Javascript as they can using
Perl. You can create modals, key sequences and even build javascript
functions using Perl subroutines. The aim is simple: More Perl, less
Javascript.
SYNOPSIS
Inject Javascript/JQuery into your web apps using Perl.
my $j = HTML::JQuery->new;
# build a javascript function that injects pure javascript,
# HTML::JQuery generated javascript, or both.
$j->function(init => sub {
$j->alert('Your document has loaded!');
});
In the above example, when myFuncName() is called an alert box will
open, then the modal We can call it using an event handler.. yeah, we
can do this with Perl, too.
$j->onClick({ class => 'button', event => $j->callFunc('myFuncName') });
So if we add a link, like Click Me to
activate myFuncName It will run our newly created function.
METHODS
html
Returns the complete JQuery/Javascript code that the module generates
for you. It also includes the .ready() feature so you don't need to
worry about that either. It checks to see if init() is a function, and
if so, runs it.
css
Change the CSS for a particular element.
$j->css({ class => 'backgroundDiv', color => 'red' });
As of 0.14, the css method now supports multiple attributes. No need to
do anything special, HTML::JQuery will create the JS object for you.
$j->css({
id => 'someDiv',
'font-weight' => 'bold',
color => '#0000FF',
width => '+=200',
});
fadeOut
Make an element hide, but with a nice fade effect.
$j->fadeOut({id => 'hideThisDiv'});
slideToggle
Easily create a slide out panel with this method. It's similar to show
with speed set to slow, but will automatically retract if you click on
it when it's already unhidden and vice-versa.
$j->onClick({
class => 'thisDiv',
event => $j->slideToggle($j->this),
});
hover
Make stuff happen when hovering over an element.
$j->hover({ class => 'MyElement', event => $j->alert('Annoying hover box!') });
Or you can make stuff happen when you hover over the element, then leave
it.
$j->hover({
id => 'button',
event => $j->css({ id => 'button-text', 'font-weight' => 'bold' }),
},
event => $j->css({ id => 'button-text', 'font-weight' => 'normal' }),
});
redirect
Uses basic JavaScript to redirect a user to a different page. You can
assign a timeout (delay) by passing a second argument.
$j->redirect('http://www.google.co.uk');
$j->redirect('users/login', 1000); # 1000ms (1 sec)
dialog
Generates a simple modal dialog. The returned string is
$('#modal_name').dialog('open'); This method needs to be fixed as it's a
bit picky with the title. The title is used as the modals id.
$j->modal({
title => 'My Modal Title',
message => 'The content of my modal',
slide => 1, # gives it a cool "slide" effect when it opens
});
If you omit the buttons options, a default button of "OK" will be
present which will simply close the current modal dialog. We can define
them quite easy in Perl using a single string, or in an anonymous sub.
$j->dialog({
autoOpen => 1,
title => 'My Modal Title',
message => 'This modal pops up when the page is loaded',
buttons => {
OK => sub {
my $data = $j->alert('You pressed OK');
$data .= $j->this('modal', 'close');
return $data;
},
Cancel => $j->this('modal', 'close'),
},
});
alert
A basic Javascript alert box.
$j->function(init => sub {
$j->alert('Your document has loaded!');
});
this
JQuery's $(this) syntax. It refers to the current element.
$j->this('modal', 'open'); # returns $(this).dialog('open'); in jQuery
$j->this('height'); # returns $(this).height(); in jQuery
keystrokes
This method uses the jquery.keystrokes plugin. The syntax is extremely
easy to use and works exactly as expected. Easily create events based on
key presses.
$j->keystrokes({
keys => [qw/ctrl+alt c/],
success => $j->callFunc('callme'),
});
The above code will run whatever is set in success once ctrl+alt then m
is pressed. If you need to use arrow keys, try this.
$j->keystrokes({
keys => ['arrow left', 'arrow down', 'arrow right', 'a', 'c'],
success => 'alert("Ryu says: Hadouken!");',
});
ajax
Sends a GET/POST request to a page via AJAX and adds the data to the
specified element.
$j->onClick({
class => 'button',
event => $j->ajax('ajax/search', { id => 'ajaxDiv', method => 'get', search => 'content' })
});
callFunc
Calls a Javascript function so you can use it in other events, ie:
onClick It also checks to make sure it's a valid function, and if not
returns false
$j->callFunc(funcName);
onClick
Create an onClick event. You decide what element the event is for by
setting id => or class => For example, if you use class => 'button' then
the event handler will be $('.button') or $('#button') for id =>
'button'. The other argument is event. Once the onClick is triggered,
the value in event will be run.
$j->function(clickMe => sub {
qq { alert("I have been clicked.. arghhhh"); }
});
$j->onClick({ id => 'button', event => $j->callFunc('clickMe') });
innerHtml
Adds the value of html to the specified class or id element. Similar to
jQuery's $('element').html(); I really need to add an append also.
# an empty div in the HTML

# then from Perl
$j->innerHtml({ id => 'mydiv', html => 'Oh wow! There is text in here now'});
show
Show a hidden element. ie: a div with display set to 'none'
# HTML
#

This is my hidden text

# Perl
$j->show({ id => 'myDiv', speed => 'slow' });
# This causes the content of myDiv to scroll down slowly, making it visible
hide
The exact opposite of 'show'.
$j->hide({ class => 'someBlock', speed => 'slow' });
showHide
This method incorporates the show and hide methods. If the given element
is hidden, it will show it, and if it is visible (display:none), it will
hide it. You can give it a speed too if you like.
$j->onClick({
class => 'button',
event => $j->showHide({
id => 'myDiv',
speed => 'fast',
}),
});
function
Builds a standard Javascript function. If you call it 'init' then that
function will be run automatically once the document has loaded.
$j->function(init => sub {
qq{ alert('Your document has loaded'); }
});
Javascript functions can be called with $j->callFunc(funcName)
tooltip
Sets an element with the tooltip attribute. Once this is done the
tooltip will be whatever is in the tags "title".
# HTML
My Link
# Perl
$j->tooltip({id => 'mylink'});
animate
Animate an element by resizing it for example
$j->animate({id => 'clickHere', width => '50%', height => '30px'});
BUGS
Please e-mail bradh@cpan.org
AUTHOR
Brad Haywood
COPYRIGHT & LICENSE
Copyright 2011 the above author(s).
This sofware is free software, and is licensed under the same terms as
perl itself.