view release on metacpan or  search on metacpan

lib/CGI/Widget/Tabs/Style.pm  view on Meta::CPAN

=cut

sub css_styles {

    my @styles = (
                  { descr  => "Google look-a-like",
                    author => "" ,
                    style  => <<EOT
table.my_tab     { border-spacing: 0; border-bottom: solid thin #C0D4E6; text-align: center }
td.my_tab        { no-wrap; padding: 2 12 2 12; width: 80; background-color: #FAFAD2 }
td.my_tab_actv   { padding: 2 12 2 12; width: 80; background-color: #C0D4E6; font-weight: bold }
td.my_tab_spc    { width: 5 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Dark green-light green, heavy rule",
                    author => "" ,
                    style  => <<EOT
a  { color: #aa00ff }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: medium solid #6FA579; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #6FA579; text-align: center; font-weight: bold }
td.my_tab        { padding: 2 15 2 15; background-color: #8CCF98; text-align: center; font-weight: bold }
td.my_tab_spc    { width: 10 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Light purple-dark purple, heavy rule",
                    author => "" ,
                    style  => <<EOT
a  { color: White }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: medium solid #8b0a50; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #ee1289; text-align: center; font-weight: bold }
td.my_tab        { padding: 2 15 2 15; background-color: #8b0a50; text-align: center; font-weight: bold }
td.my_tab_spc    { width: 10 }
td.my_tab_ind   { width: 15 }
EOT
                  },


                  { descr  => "Light purple-grey, heavy rule",
                    author => "" ,
                    style  => <<EOT
a  { color: White }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: medium solid #cf0f76; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #cf0f76; text-align: center; font-weight: bold }
td.my_tab        { padding: 2 15 2 15; background-color: DarkGrey; text-align: center; font-weight: bold }
td.my_tab_spc    { width: 10 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Brown-blue, heavy rule",
                    author => "" ,
                    style  => <<EOT
a  { color: White }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: medium solid #00688b; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #cd8162; text-align: center; font-weight: bold }
td.my_tab        { padding: 2 15 2 15; background-color: #00688b; text-align: center; font-weight: bold }
td.my_tab_spc    { width: 10 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Bold font-light font, dark blue, heavy rule",
                    author => "" ,
                    style  => <<EOT
a  { color: Yellow }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: medium solid #000080; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #000080; text-align: center; font-weight: bold }
td.my_tab        { padding: 2 15 2 15; background-color: #000080; text-align: center; font-weight: normal }
td.my_tab_spc    { width: 10 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Red frame, grey, thin rule",
                    author => "" ,
                    style  => <<EOT
a  { color: Black }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: thin solid Grey; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: Grey; text-align: center; font-weight: bold ; border: thin solid red }
td.my_tab        { padding: 2 15 2 15; background-color: Grey; text-align: center; font-weight: bold }
td.my_tab_spc    { width: 10 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Red top line,  grey, thin rule",
                    author => "" ,
                    style  => <<EOT
a  { color: Black }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: thin solid #bebebe; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #bebebe; text-align: center; font-weight: bold ; border-top: medium solid red }
                    td.my_tab        { padding: 2 15 2 15; background-color: #bebebe; text-align: center; font-weight: bold ; border-top: medium solid #bebebe }
td.my_tab_spc    { width: 1 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Yellow/black top line, grey, thin rule",
                    author => "" ,
                    style  => <<EOT
a  { color: Black }
table.my_tab     { no-wrap; border-spacing: 0; border-bottom: thin solid #bebebe; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 15; background-color: #bebebe; text-align: center; font-weight: bold ; border-top: medium solid Yellow }
td.my_tab        { padding: 2 15 2 15; background-color: #bebebe; text-align: center; font-weight: bold ; border-top: medium solid black }
td.my_tab_spc    { width: 1 }
td.my_tab_ind    { width: 15 }
EOT
                  },


                  { descr  => "Blue underline, grey underline",
                    author => "" ,
                    style  => <<EOT
a  { color: Black }
table.my_tab     { no-wrap; border-spacing: 0; margin-bottom: 6px }
td.my_tab_actv   { padding: 2 15 2 20; text-align: center; font-weight: bold ; border-bottom: medium solid MediumBlue }
td.my_tab        { padding: 2 15 2 20; text-align: center; font-weight: bold ; border-bottom: medium solid Grey }
td.my_tab_spc    { width: 1 }
td.my_tab_ind    { width: 15 }
EOT
                  }
                 );
}

1;

tabs-demo.pl  view on Meta::CPAN

my $current_style = $cgi->param("style") || 1;  # the currently selected style sheet
print <<EOT;
Content-Type: text/html;

<head>
<title>CGI::Widget::Tabs - Demo</title>
<style type="text/css">
EOT
print $styles[ $current_style - 1 ]->{style}; # humans start with 1, lists at 0
print <<EOT;
.ferrari {font-weight: bold; background-color:#F21E1E}
</style>
</head>
<body>
<h1>F1 - Team Simulation - 2002</h1>
EOT

my $main_tab = CGI::Widget::Tabs->new;  # first set up the main tab
$main_tab->cgi_object($cgi);            # access to the outside world
$main_tab->cgi_param("t");              # |comment this line out to see it will
                                        # |use the default value "tab"

tabs-demo.pl  view on Meta::CPAN

    };


    # --- "Style sheets" tab
    ( $main_tab->active eq "Style sheets" ) && do {
        print <<EOT;
<p>Are you graphically enabled?
<a style="color:blue" href="mailto:koos_pol\@raketnet.nl?Subject=CGI::Widget::Tabs style sheet">
Send me</a> your own styles. I will gladly add them to this list!</p>
<table>
<tr style="font-weight: bold">
<td>Description</td>
</tr>
EOT
        # -- We want to stay on this tab, while selecting different
        # -- style sheets. So we reproduce the URL and only change
        # -- the style sheet number.
        my $query_string = "";
        foreach ( $cgi->param() ) {
            next if ( $_ eq "style" );
            $query_string .= "$_=".$cgi->param($_)."&";
        };
        chop $query_string;  # remove the last added '&'
        my $style_num = 1 ;
        foreach my $style ( @styles ) {
            print "<tr>\n";
            print "<td>$style_num <a style=\"color:#000000";
            print  ";font-weight:bold" if ( $style_num == $current_style );
            print "\" href=\"?$query_string&style=$style_num\">".$style->{descr}."</a></td>\n";
            print "</tr>\n";
            $style_num++;
        }
        print "</table>\n";
    };
}