JQuery::Accordion - produce an accordion effect

JQuery documentation Contained in the JQuery distribution.

Index

Code Index:

NAME

Top

JQuery::Accordion - produce an accordion effect

SYNOPSIS

Top

    my @headers = ("header 1","header 2","header 3","header4") ; 
    my @texts = ("line 1","line 2","line 3","line4") ; 
    my $accordion = JQuery::Accordion->new(id => 'myAccordion',
				       headers => \@headers,
				       texts => \@texts,
				       panelHeight => 200,
				       panelWidth => '400px'
                                       addToJQuery => $jquery,
				      ) ;

    # Change css defaults - add at the bottom
    $jquery->add_css_last(new JQuery::CSS( hash => {'#myAccordion' => {width => '600px'}})) ; 

    my $html = $accordion->HTML ;

DESCRIPTION

Top

Add an accordion effect. For an example of how it looks, see http://interface.eyecon.ro/demos/accordion.html.

You will also be wondering how to change colours etc. There are a number of CSS items that are defined, and taht can be changed. Each accordion needs an id. So the CSS paragraphs that are created are:

#id

#id dt

#id dd

#id dt.idHover

and

#id dt.idActive

FUNCTIONS

Top

HTML

Get the HTML for the object

new

Instantiate the object

AUTHOR

Top

Peter Gordon, <peter at pg-consultants.com>

BUGS

Top

Please report any bugs or feature requests to bug-jquery-taconite at rt.cpan.org, or through the web interface at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=JQuery. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.

SUPPORT

Top

You can find documentation for this module with the perldoc command.

    perldoc JQuery

You can also look for information at:

* AnnoCPAN: Annotated CPAN documentation

http://annocpan.org/dist/JQuery

* CPAN Ratings

http://cpanratings.perl.org/d/JQuery

* RT: CPAN's request tracker

http://rt.cpan.org/NoAuth/Bugs.html?Dist=JQuery

* Search CPAN

http://search.cpan.org/dist/JQuery

ACKNOWLEDGEMENTS

Top

COPYRIGHT & LICENSE

Top

Copyright 2007 Peter Gordon, all rights reserved.

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

JQuery documentation Contained in the JQuery distribution. 
package JQuery::Accordion ; 

our $VERSION = '1.00';

use warnings;
use strict;

sub new { 
    my $this = shift;
    my $class = ref($this) || $this;
    my $my ;
    $my->{param}{headers} = [] ;  
    $my->{param}{texts} = [] ;  
    %{$my->{param}} = @_ ; 
    die "No id defined for Accordion" unless $my->{param}{id} =~ /\S/ ; 

    bless $my, $class;
    if ($my->{param}{css}) { 
	push @{$my->{css}},$my->{param}{css} ; 
    } 
    $my->add_to_jquery ; 
    return $my ;
}

sub add_to_jquery { 
    my $my = shift ; 
    my $jquery = $my->{param}{addToJQuery} ; 
    if (defined $jquery) { 
	$jquery->add($my) ; 
    } 
} 

sub id {
    my $my = shift ;
    return $my->{param}{id} ; 
}


sub packages_needed { 
    my $my = shift ;
    return ('interface/interface.js') ; 
} 

sub get_css { 
    my $my = shift ;

    my $id = $my->id ; 
    my $panelWidth = $my->{param}{panelWidth} || '400px' ;
    my $panelHeight = $my->{param}{panelHeight} || '200px' ;
# The position was absolute
    my $css=<<EOD;
#$id {
	width: $panelWidth ;
	border: 1px solid #6CAF00;
	position: relative;
	left: 10px;
	top: 10px;
}
#$id dt{
	line-height: 20px;
	background-color: #80df20;
	border-top: 2px solid #DAFF9F;
	border-bottom: 2px solid #6CAF00;
	padding: 0 10px;
	font-weight: bold;
	color: #fff;
}
#$id dd{
	overflow: auto;
}

#$id dt.${id}Hover
{
	background-color: #90ef30;
}
#$id dt.${id}Active
{
	background-color: #6CAF00;
	border-top: 2px solid #80df20;
	border-bottom: 2px solid #000;
}
EOD
    return $css ; 
} 



sub HTML {
    my $my = shift ; 
    my $id = $my->id ; 
    my $html = qq[<dl id="$id">\n] ; 
    my @headers = @{$my->{param}{headers}} ;
    my @texts = @{$my->{param}{texts}} ;
    my $n = -1 ; 
    for my $h (@headers) { 
	$n ++ ; 
	my $t = $texts[$n] ;
	$html .= qq[ <dt>$h</dt>\n] ; 
	$html .= qq[ <dd>$t</dd>\n] ; 
    } 
    $html .= qq[</dl>] ;
}


sub get_jquery_code { 
    my $my = shift ; 
    my $id = $my->id ; 
    my $remoteProgram = $my->{param}{remoteProgram} ; 
    return '' unless $id =~ /\S/ ; 
    
    my $function =<<'EOD';

    $('#ID').Accordion({headerSelector	: 'dt',
			panelSelector	: 'dd',
			activeClass		: 'IDActive',
			hoverClass		: 'IDHover',
			panelHeight		: PANEL_HEIGHT,
			speed			: 300
			}
			);
EOD
    my $panelHeight = $my->{param}{panelHeight} || 200 ;
    $function =~ s/PANEL_HEIGHT/$panelHeight/ ; 
    $function =~ s/ID/$id/g ; 
    return $function ; 
}



1; # End of JQuery::Accordion