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

PHP
php 多线程上下文中安全写文件实现代码
PHP类的使用 实例代码讲解
用php实现让页面只能被百度gogole蜘蛛访问的方法
php 学习笔记
PHP编程过程中需要了解的this,self,parent的区别
php 操作excel文件的方法小结
使用PHP获取网络文件的实现代码
PHP 巧用数组降低程序的时间复杂度
php下将XML转换为数组
php 文件上传代码(限制jpg文件)
php 无极分类(递归)实现代码
PHP 采集获取指定网址的内容
PHP 将图片按创建时间进行分类存储的实现代码
PHP 存储文本换行实现方法
PHP 批量更新网页内容实现代码
用PHP查询搜索引擎排名位置的代码
用php实现的获取网页中的图片并保存到本地的代码
php实现首页链接查询 友情链接检查的代码
处理php自动反斜杠的函数代码
php实现的遍历文件夹下所有文件,编辑删除

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 29 ::
收藏到网摘: 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