Home‎ > ‎Programming‎ > ‎

Jquery Setup CGI Perl

Jquery UI provides a rich set of UI widgets. There are still a lot of features might come up in the future,but for as of now to get started you need to follow the below mentioned steps.

Steps:

  1. Download the jquery bundle under http://jqueryui.com/download after selecting a theme you want in the same page. Unzip the bundle file and copy over the js and css folder to you cgi executable directory.
  2. Download the jquery http://css-tricks.com/simple-jquery-dropdowns/ Copy the 2 files menu.css (style.css) and jquery.dropdownPlain.js to the css and js folders respectively.
  3. Create the Test.pl and Test.html files as shown.



Code is attached: Download



Code:

Test.pl

#!c:/perl/bin/perl.exe
use strict;
use warnings;
use Template;
use CGI;
   
my $co = CGI->new;
my $template = Template->new(INCLUDE_PATH => ["../"]);
my $output_html;
my $template_vars = {name => "arjun"};
$template->process( 'template/Test.html', $template_vars, \$output_html ) || die "Template process failed: ", $template->error(), "\n";
   
print $co->header;
print "$output_html";




Test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Test Page</title>
    </head>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
   
    <link type="text/css" href="../css/menu.css" rel="Stylesheet" />
   
    <script type="text/javascript" src="../js/jquery.dropdownPlain.js"></script>
   
   
    <script type="text/javascript">
   
    $(function() {
        $('#date').datepicker();

    });
   
    </script>
   
    <body>
        <br/>
        <br/>
        Name: [% name %]
        <br/>
        <br/>    
        Date: <input type="text" name="date" id="date" />
        <br/>
        <br/>
       

       <div id="page-wrap">
   
        <ul class="dropdown">
            <li><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Artificial Turf</a></li>
                     <li>
                        <a href="#">Batting Cages</a>
                        <ul>
                            <li><a href="#">Indoor</a></li>
                            <li><a href="#">Outdoor</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Benches &amp; Bleachers</a></li>
                </ul>
            </li>
            <li><a href="#">Field Maintenance</a>
                <ul class="sub_menu">
                    <li><a href="#">All-in-One Team Cart</a></li>
                    <li><a href="#">Air &amp; Electrical Reels</a></li>
                     <li><a href="#">Field Drags</a></li>
                     <li>
                        <a href="#">Field Marking Equipment</a>
                        <ul>
                            <li><a href="#">Batter's Box Templates</a></li>
                            <li><a href="#">Dryline Markers</a></li>
                            <li><a href="#">Field Paint</a></li>
                            <li><a href="#">Field Sprayers</a></li>
                            <li><a href="#">Stencils</a></li>
                        </ul>
                     </li>
                     
                </ul>
            </li>
           
        </ul>
       
    </div>
       
          
    </body>
</html>