編輯“Php-ajax簡單示例”（章節(jié)）

== 導(dǎo)航的實現(xiàn) ==


　　雖然表格列出了目錄中的一些圖像，但用戶還需要一種查看表格中未出現(xiàn)的圖片的方法。要真正實現(xiàn)分頁器的導(dǎo)行，則需要一套標準的鏈接：首頁、上一頁、下一頁和尾頁。<br>

分頁器導(dǎo)航<br>

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

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

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

$output .= '＜/h4＞'; <br>

　　最后還要編寫 get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開成完整的圖像（參見清單 4）。注意，腳本 index.php（以及后面要創(chuàng)建的 expand.php）只在這兩個函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實上在下面與 Sajax 進行集成時，只有這兩個函數(shù)需要修改。  <br>

get_image_link、get_table_link 實現(xiàn)<br>

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

function get_image_link ( $title, $index ) {<br>
　$link = "expand.php?index=$index";<br>
　return '＜a href="' . $link . '"＞' . $title . '＜/a＞'; <br>
}  <br>
　放大圖片  <br>

　　現(xiàn)在有了一個可用的分頁器為用戶提供一些縮略圖。相冊的第二項功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當?shù)奈募?。隨后的操作就很簡單了，只需創(chuàng)建病輸出 image 標記即可。 <br>

get_image 函數(shù) <br>

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

　// Generate navigation   <br>
　$output .= '＜img src="images/' . $images[$index] . '" /＞'; <br>
　return $output; <br>
}  <br>

　　接下來還要提供與分頁器類似的導(dǎo)航機制?！吧弦粡垺?導(dǎo)航到編號為 $index-1 的圖像，“下一張” 導(dǎo)航到編號為 $index+1 的圖像，“返回” 則回到分頁器。  <br>

get_image 導(dǎo)航<br>

$output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞';<br>

if ( $index ＞ 0 ) {<br>
　$output .= get_image_link('＜＜', 0);<br>
　$output .= ' | ' . get_image_link('Prev', $index-1);<br>
} else {<br>
　$output .= '＜＜ | Prev';<br>
}<br>

$output .= ' | ' . get_table_link('Up', $index, 5);<br>

if ( $index ＜ count($images) ) {<br>
　$output .= ' | ' . get_image_link('Next', $index+1);<br>
　$output .= ' | ' . get_image_link('＞＞', count($images));<br>
} else {<br>
　$output .= ' | Next | ＞＞';<br>
}<br>

$output .= '＜/h4＞';  <br>

　　最后創(chuàng)建一個簡單的 HTML 容器，將其命名為 expand.php。  <br>

get_image 導(dǎo)航<br>


＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞<br>

＜html xmlns="http://www.w3.org/1999/xhtml"＞<br>

＜head＞<br>

＜title＞Creating a simple picture album viewer＜/title＞<br>


＜style type="text/css"＞<br>

body { text-align: center }<br>

table.image_table { margin: 0 auto 0 auto; width: 700px;<br>

padding:10px; border: 1px solid #ccc; background: #eee; }<br>

table.image_table td { padding: 5px }<br>

table.image_table a { display: block; }<br>

table.image_table img { display: block; width: 120px;<br>

padding: 2px; border: 1px solid #ccc; }<br>

＜/style＞<br>


＜/head＞<br>

＜body＞<br>


＜h1＞Creating a simple picture album viewer＜/h1＞<br>

＜?php<br>


$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;<br>

echo get_image($index);<br>


?＞<br>

＜/body＞<br>

＜/html＞  
<br> 
　　這樣我們就完成了相冊。用戶可以看到所有的圖片，而且很容易導(dǎo)航。自然，用戶可以來回切換，甚至能通過書簽功能返回喜歡的圖片  <br>



----