次の jquery コードの [次へ] ボタンと [前へ] ボタンは正常に機能します。ユーザーが次のボタンをクリックすると、次のページのコンテンツが contentcolumn div にスライドし、前のボタンでも同じことが起こります。ただし、contentcolumn には、追加の次へ、前へのボタンとページネーション オブジェクトが表示されます。これで、次へのボタンが 2 つ、前へのボタンが 2 つ、ページネーション オブジェクトが 2 つになりました。
次のボタン、前のボタン、およびページネーション オブジェクトを 1 つだけ表示するにはどうすればよいですか?
参考までに、次のボタン、前のボタン、およびページネーション オブジェクトはすべて contentcolumn.My コードの外にあります。
$(document).ready(function(){
var pg=1;
$("#contentcolumn:first").show("slide",{'direction':"left"},1000);
$('#next').click(function () {
if(pg<10){
pg=pg+1;
page_str="page="+pg;
$.get('index2.php',page_str,function(data) {
$('#contentcolumn').html(data).show("slide
",{'direction':"left"},1000);
});
// event.preventDefault();
//return false;
};
});//end $('#next').click
$('#prev').click(function(){
if(pg>1){
pg=pg-1
page_str="page="+pg;
$.get('index2.php',page_str,function(data){
$('#contentcolumn').html(data).show("slide",{'direction':"right"},1000);
});
};
});
});//end document ready
スタイル.css
/* CSS Document */
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background-color: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
/*z-index:0;
*/}
#contentcolumn{
margin: 0 200px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
float:left;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-right:-200px;
background-color: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background-color: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.mycontent{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
div.pagination {
padding: 3px;
margin: 3px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}
phpコード:
<div id="maincontainer">
<div id="contentwrapper">
<div id="leftcolumn">
<div class="innertube">
<form type="post">
<input type="button" id="prev" value="<" />
</form>
</div>
</div>
<div id="contentcolumn">
<div class="innertube">
<?php
$pagination='';
if (function_exists("curl_init")){
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286");
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
$data=curl_exec($ch);
curl_close($ch);
//print_r($data);
$doc=new SimpleXmlElement($data);
//$doc=simpleXml_load_file("http://feeds.feedburner.com/rb286?format=xml");
//$doc=simpleXml_load_string($data);
$xml = simplexml_import_dom($doc);
if (!$xml) {
echo 'Error while parsing the document';
exit;
}
//print_r($doc);
}
function paginateFunc($xml){
global $pagination;
$disp_arr = array();
$image_array=array();
// How many adjacent pages should be shown on each side?
$adjacents =3;
$items=$xml->xPath('/rss/channel/item');
$count=count($items);
$total_pages = $count;
/* Setup vars for query. */
$targetpage = "index2.php"; //your file name (the name of this file)
$limit = 1; //how many items to show per page
$page = $_GET['page'];
echo("page:".$page);
if($page)
$start = ($page - 1) * $limit; //first item to display on this page
else
$start = 0; //if no page var is given, set start to 0
/* Setup page vars for display. */
if ($page == 0) $page = 1; //if no page var is given, default to 1.
$prev = $page - 1; //previous page is page - 1
$next = $page + 1; //next page is page + 1
$lastpage = ceil($total_pages/$limit); //lastpage is = total pages / items per page, rounded up.
$lpm1 = $lastpage - 1; //last page minus 1
//echo("HALLO");
foreach ($xml->xpath('//item/content:encoded') as $desc) {
preg_match_all('/(?<imgs><img[^>]+>)/m', $desc, $m);
/*foreach ($m['imgs'] as $img) {
echo("<img src='".$img."'/>");
//array_push(image_array,$img);
} */
}
// $image_array=$m['imgs'];
// print_r($image_array);
//
foreach($items as $key => $item){
//if( ( $key >= $start) && ($key < $start + $limit) ){
$disp_array[$key]['link']=$item[0]->link;
$disp_array[$key]['title']=$item[0]->title;
$disp_array[$key]['desc']=$item[0]->description;
}//end foreach($items
foreach($disp_array as $key=>$disp){
if($key == $start){
//if( ( $key >= $start) && ($key < $start + $limit) ){
echo("key:".$key." start:".$start);
//echo("<div class='mycontent'>");
echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>");
echo($disp_array[$key]['desc']);
//echo(count($m['imgs']));
//echo("<img src='".$m['imgs'][$key]."'/>");
//echo("</div>");
}
}
echo("</div>");//end div innertube
echo("</div>");//end div contentcolumn
echo("<div id='rightcolumn'>");
echo("<div class='innertube'>");
echo("<form type='post'>");
echo("<input type='button' id='next' value='>' />");
echo("</form>");
echo("</div>");//end div innertube
echo("</div>");
echo("<div id='footer'>");
/*
Now we apply our rules and draw the pagination object.
We're actually saving the code to a variable in case we want to draw it more than once.
*/
//$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//previous button
if ($page > 1)
$pagination.= "<a href=\"$targetpage?page=$prev\">� previous</a>";
else
$pagination.= "<span class=\"disabled\">� previous</span>";
//pages
if ($lastpage < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some
{
//close to beginning; only hide later pages
if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}
//in middle; hide some front and some back
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}
//close to end; only hide early pages
else
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
}
//next button
if ($page < $counter - 1)
$pagination.= "<a href=\"$targetpage?page=$next\">next �</a>";
else
$pagination.= "<span class=\"disabled\">next �</span>";
$pagination.= "</div>\n";
}
}
if (isset($doc->channel)) paginateFunc($doc);
?>
<?php
echo($pagination);
?>
</div><!--closing tag for div footer-->
</div><!--closing tag for div contentwrapper-->
</div><!--closing tag for div maincontainer-->