Opened by tonewheel at 2007-05-01 13:11
User since
2003-08-14
2022 Artikel
BenutzerIn
![[default_avatar]](/battie/theme/default/default_avatar.gif)
2003-08-14
2022 Artikel
BenutzerIn
Hier nochmal ein komplettes Beispiel mit 
CGI::Ajax:
Template:
So sieht es aus:
http://www.ronnie-neumann.de/trashbin/ajax.png
CGI::Ajax:Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw/warningsToBrowser fatalsToBrowser/;
use CGI::Ajax;
use HTML::Template::Compiled;
package HTML::Widget::NavEntry;
use Moose;
has 'title' => ( is => 'rw' );
has 'link' => ( is => 'rw' );
sub to_html {
my $self = shift;
return "\t" . '<a href="' . $self->link . '">' . $self->title . '</a>' . "\n";
}
package HTML::Widget::SubNavigation;
use Moose;
has 'title' => ( is => 'rw', required => 1 );
has 'entries' => (
isa => 'ArrayRef',
is => 'rw',
default => sub { return [] }
);
sub to_html {
my $self = shift;
my $o = '<div class="subnav" id="nav_' . $self->title . '">' . "\n";
$o .= '<span class="sub_level">' . $self->title . '</span>' . "\n";
$o .= $_->to_html for @{$self->entries};
$o .= '</div>' . "\n";
return $o;
}
sub add_entry {
my $self = shift;
my $entry = shift;
return unless blessed $entry eq 'HTML::Widget::NavEntry';
push @{$self->entries}, $entry;
}
package HTML::Widget::Navigation;
use Moose;
has 'entries' => (
isa => 'ArrayRef',
is => 'rw',
default => sub { return [] }
);
sub to_html {
my $self = shift;
my $o = '<div id="navigation">' . "\n";
$o .= $_->to_html for @{$self->entries};
$o .= '</div>' . "\n" x 2;
return $o;
}
sub selected_to_html {
my $self = shift;
my $selection = shift;
my $o = '<div id="navigation">' . "\n";
$o .= $_->to_html for (grep { $_->title =~ /$selection/ } @{$self->entries});
$o .= '</div>' . "\n" x 2;
return $o;
}
sub add_entry {
my $self = shift;
my $entry = shift;
return unless (
blessed $entry eq 'HTML::Widget::NavEntry'
or blessed $entry eq 'HTML::Widget::SubNavigation'
);
push @{$self->entries}, $entry;
}
package main;
my $s_nav1 = HTML::Widget::SubNavigation->new( title => 'foo' );
$s_nav1->add_entry(
HTML::Widget::NavEntry->new( title => 'foo', link => 'foo.pl' )
);
$s_nav1->add_entry(
HTML::Widget::NavEntry->new(
title => 'bar',
link => 'foo.pl?content=bar'
)
);
$s_nav1->add_entry(
HTML::Widget::NavEntry->new( title => 'buz', link => 'buz.pl' )
);
my $s_nav2 = HTML::Widget::SubNavigation->new( title => 'ooperl' );
$s_nav2->add_entry(
HTML::Widget::NavEntry->new( title => 'yankee', link => 'yankee.pl' )
);
$s_nav2->add_entry(
HTML::Widget::NavEntry->new( title => 'zulu', link => 'zulu.pl' )
);
my $nav = HTML::Widget::Navigation->new;
$nav->add_entry( $s_nav1 );
$nav->add_entry( $s_nav2 );
my $q = CGI->new;
my $selection = $q->param('sel_nav');
my $pjx = new CGI::Ajax( 'filter' => sub {
my $selection = shift || '';
return $nav->selected_to_html($selection);
} );
my $tmpl = HTML::Template::Compiled->new(filename => 'nav.tmpl');
$tmpl->param(
nav => $selection ? $nav->selected_to_html($selection) : $nav->to_html
);
print $pjx->build_html($q,$tmpl->output);
Template:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>foobar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
/* <![CDATA[ */
body { font-family: Arial, Helvetica; }
#navigation {
background-color: #fca;
}
.subnav {
margin: 2px;
padding: 8px;
color: #f00;
border-style: solid;
border-width: 0px;
border-bottom-width: 1px;
border-color: �
}
/* ]]> */
</style>
</head>
<body>
<h3>Navigation</h3>
<%= nav %>
<hr />
<form>
<input type="text" name="sel_nav" id="sel_nav" onkeyup="filter( ['sel_nav'], ['navigation'] );" />
<input type="submit" name=".submit" />
</form>
</body>
</html>
So sieht es aus:
http://www.ronnie-neumann.de/trashbin/ajax.png
