当前位置: 首页 > 图文教程 > 网络编程 > PHP > 结合AJAX进行PHP开发之入门(2)

PHP
PHP 柱状图实现代码
PHP 用数组降低程序的时间复杂度
PHP 读取文件内容代码(txt,js等)
Php 构造函数construct的前下划线是双的_
PHP 采集程序中常用的函数
一个比较简单的PHP 分页分组类
php下图片文字混合水印与缩略图实现代码
php5 图片验证码实现代码
phpmyadmin导入(import)文件限制的解决办法
php smarty模版引擎中变量操作符及使用方法
Php Mssql操作简单封装支持存储过程
php实现的仿阿里巴巴实现同类产品翻页
php入门教程 精简版
将文件夹压缩成zip文件的php代码
PHP开发过程中常用函数收藏
php csv操作类代码
php遍历目录viewDir函数
PHP 基本语法格式
php生成xml简单实例代码
PHP下编码转换函数mb_convert_encoding与iconv的使用说明

结合AJAX进行PHP开发之入门(2)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 33 ::
收藏到网摘: n/a

  导航的实现

  虽然表格列出了目录中的一些图像,但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行,则需要一套标准的链接:首页、上一页、下一页和尾页。

  清单 3. 分页器导航

// Append navigation
$output = '<h4>Showing items ' . $limit_start . '-' .
min($limit_start + $limit_step - 1, count($images)) .
' of ' . count($images) . '<br />';

$prev_start = max(0, $limit_start - $limit_step);
if ( $limit_start > 0 ) {
 $output .= get_table_link('<<', 0, $limit_step);
 $output .= ' | ' . get_table_link('Prev',
 $prev_start, $limit_step);
} else {
 $output .= '<< | Prev';
}

// Append next button
$next_start = min($limit_start + $limit_step, count($images));
if ( $limit_start + $limit_step < count($images) ) {
 $output .= ' | ' . get_table_link('Next',$next_start, $limit_step);
 $output .= ' | ' . get_table_link('>>',(count($images) - $limit_step), $limit_step);
} else {
 $output .= ' | Next | >>';
}

$output .= '</h4>';

  最后还要编写 get_image_link() 和 get_table_link() 函数,让用户将缩略图展开成完整的图像(参见清单4)。注意,脚本 index.php(以及后面要创建的 expand.php)只在这两个函数中调用。这样就很容易改变链接的功能。事实上在下面与Sajax 进行集成时,只有这两个函数需要修改。

  清单 4. get_image_link、get_table_link 实现

function get_table_link ( $title, $start, $step ) {
 $link = "index.php?start=$start&step=$step";
 return '<a href="' . $link . '">' . $title .'</a>';
}

function get_image_link ( $title, $index ) {
 $link = "expand.php?index=$index";
 return '<a href="' . $link . '">' . $title . '</a>';
}

  放大图片

  现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link() 函数调用了expand.php脚本,我们现在就来编写它。该脚本传递用户希望展开的文件的索引,因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了,只需创建病输出image 标记即可。

  清单 5. get_image 函数

function get_image ( $index ) {
 $images = get_image_list ( 'images' );

 // Generate navigation

 $output .= '<img src="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 }
tabl