结合AJAX进行PHP开发之入门3
点击次数：18 次 发布日期：2008-11-26 11:40:30 作者：源代码网
|
源代码网推荐 源代码网推荐 现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link() 函数调用了 expand.php 脚本，我们现在就来编写它。该脚本传递用户希望展开的文件的索引，因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了，只需创建病输出 image 标记即可。 源代码网推荐 源代码网推荐 清单 5. get_image 函数 源代码网推荐 源代码网推荐 function get_image ( $index ) { 源代码网推荐 $images = get_image_list ( "images" ); 源代码网推荐 源代码网推荐 // Generate navigation 源代码网推荐 源代码网推荐 $output .= "＜img src="http://www.zzchn.com/edu/20080727/images/" . $images[$index] . "" /＞"; 源代码网推荐 return $output; 源代码网推荐 } 源代码网推荐 源代码网推荐 接下来还要提供与分页器类似的导航机制。“上一张” 导航到编号为 $index-1 的图像，“下一张” 导航到编号为 $index+1 的图像，“返回” 则回到分页器。 源代码网推荐 源代码网推荐 清单 6. get_image 导航 源代码网推荐 源代码网推荐 $output .= "＜h4＞Viewing image " . $index ." of " . count($images) . "＜br /＞"; 源代码网推荐 源代码网推荐 if ( $index ＞ 0 ) { 源代码网推荐 $output .= get_image_link("＜＜", 0); 源代码网推荐 $output .= " | " . get_image_link("Prev", $index-1); 源代码网推荐 } else { 源代码网推荐 $output .= "＜＜ | Prev"; 源代码网推荐 } 源代码网推荐 源代码网推荐 $output .= " | " . get_table_link("Up", $index, 5); 源代码网推荐 源代码网推荐 if ( $index ＜ count($images) ) { 源代码网推荐 $output .= " | " . get_image_link("Next", $index+1); 源代码网推荐 $output .= " | " . get_image_link("＞＞", count($images)); 源代码网推荐 } else { 源代码网推荐 $output .= " | Next | ＞＞"; 源代码网推荐 } 源代码网推荐 源代码网推荐 $output .= "＜/h4＞"; 源代码网推荐 源代码网推荐 最后创建一个简单的 HTML 容器，将其命名为 expand.php。 源代码网推荐 源代码网推荐 清单 7. get_image 导航 源代码网推荐 源代码网推荐 ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 源代码网推荐 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞ 源代码网推荐 ＜html xmlns="http://www.w3.org/1999/xhtml"＞ 源代码网推荐 ＜head＞ 源代码网推荐 ＜title＞Creating a simple picture album viewer＜/title＞ 源代码网推荐 源代码网推荐 ＜style type="text/CSS"＞ 源代码网推荐 body { text-align: center } 源代码网推荐 table.image_table { margin: 0 auto 0 auto; width: 700px; 源代码网推荐 padding:10px; border: 1px solid #ccc; background: #eee; } 源代码网推荐 table.image_table td { padding: 5px } 源代码网推荐 table.image_table a { display: block; } 源代码网推荐 table.image_table img { display: block; width: 120px; 源代码网推荐 padding: 2px; border: 1px solid #ccc; } 源代码网推荐 ＜/style＞ 源代码网推荐 源代码网推荐 ＜/head＞ 源代码网推荐 ＜body＞ 源代码网推荐 源代码网推荐 ＜h1＞Creating a simple picture album viewer＜/h1＞ 源代码网推荐 ＜?php 源代码网推荐 源代码网推荐 $index = isset($_REQUEST["index"]) ? $_REQUEST["index"] : 0; 源代码网推荐 echo get_image($index); 源代码网推荐 源代码网推荐 ?＞ 源代码网推荐 ＜/body＞ 源代码网推荐 ＜/html＞ 源代码网推荐 源代码网推荐 这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。 源代码网推荐 
源代码网推荐 图 2. 完成的相册 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
