2012-07-25 38 views
0

我有10頁的內容與每個頁面上的分頁對象完成使用PHP。這允許用戶通過點擊頁碼來查看他/她希望看到的任何頁面的內容。jquery滑動右鍵隱藏當前頁div的內容並顯示下一頁div的內容

現在我想添加一個下一個和上一個按鈕,讓用戶可以查看下一頁或上一頁。

隨着codef0rmer的指導,我已經改變爲以下jQuery代碼的下一個按鈕。當我點擊下一個按鈕時,後續頁面的內容將顯示在div contentcolumn中。但是,現在有2個下一個按鈕,2個上一個按鈕和2個分頁對象。

我怎樣才能得到沒有額外的下一個,以前的按鈕和分頁對象顯示的內容?

我是jquery的初學者.....我非常感謝任何幫助。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(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); 
      }); 
      };  
    })//end $('#next').click 
})//end document(ready) 
</script> 

我的HTML和PHP代碼:

<body> 
<div id="maincontainer"> 
<div id="contentwrapper"> 
<div id="leftcolumn"> 
<div class="innertube"> 
<input type="button" id="left_but" value="Left" /> 
</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']; 
    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($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){ 
       echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>"); 
       echo($disp_array[$key]['desc']."<br>"); 
       //echo(count($m['imgs'])); 
       //echo("<img src='".$m['imgs'][$key]."'/>"); 
       } 

    } 
    echo("</div>");//end div innertube 
    echo("</div>");//end div contentcolumn 
    echo("<div id='rightcolumn'>"); 
    echo("<div class='innertube'>"); 
    echo("<input type='button' id='right_but' value='Right' />"); 
    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--> 
    </body> 
    </html> 
+0

你能發佈你的HTML請輸入 – Fraser 2012-07-25 07:28:36

回答

1

由於您沒有共享很多代碼,我給你的是如何可以做到的概述。

我想你應該隱藏當前的可見內容窗口,並找到下一張幻燈片&顯示它。

$('#next').click(function() { 
    $("div:visible").hide() 
     .next().show("slide",{'direction':"left"},1000); 
}); 

$('#prev').click(function() { 
    $("div:visible").hide() 
     .prev().show("slide",{'direction':"right"},1000); 
}); 

演示:http://jsfiddle.net/codef0rmer/E7U82/

+0

在你的例子中有3個不同的div。在我的代碼中只有1 div的contentcolumn。當我點擊每個頁碼時,只有contentcolumn的內容發生變化。我如何讓jquery識別下一頁和上一頁的頁碼? – vaanipala 2012-07-25 09:03:39

+0

當頁面加載時,讓我們假設pageNumber = 0。一旦你點擊下一個按鈕,只需增加pageNumber並將它作爲查詢字符串發送到你的php頁面。希望這會有所幫助。 – codef0rmer 2012-07-25 10:16:56

+0

你是否指使用ajax get request來發送querystring? – vaanipala 2012-07-25 17:05:49

0

後的研究時間,我發現對於初學者jQuery的滑塊這個涼爽的教程在http://jc-designs.net/blog/2010/03/jquery-slider-tutorial-for-beginners-how-i-did-mine/....the的解釋是像我這樣的傻瓜。

在上述網站的指導下,我設法想出了以下代碼。我已經下載RSS飼料到一個文件(使用PHP),創建下一個和上一個按鈕和控制列表 - 分頁(使用jquery),3列布局 - 固定,液體,固定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
body{margin:0; 
padding:0; 
} 
#leftcolumn{ 
float:left; 
margin-right:-200px; 
} 
#slidecontent{ 
width:550px; 
height:450px; 
float:left; 
margin:0 200px 0 200px; 
border:solid thin #FF3333; 
overflow:hidden; 
} 
#slidewrap{ 
width:5500px; 
height:450px; 
top:0; 
left:0; 
} 
.slide{ 
float:left; 
width:550px; 
height:450px; 
} 
#rightcolumn{ 
float:left; 
margin-left:-200px; 
} 
#controllist{ 
clear:both; 
text-align:center; 
padding:4px; 
} 
ul{ 
list-style-type:none; 
} 
ul li{ 
display:inline; 
} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui/ui/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#controlleft").hide(); 
    var currentPosition=0; 
    var slideWidth=550; 
    var count=0; 
    var html=""; 
    var rss_link=""; 
    var rss_title=""; 
    var rss_desc=""; 
    $.get("rss.xml",function(data){ 
     $(data).find("item").each(function(){ 
      count+=1; 
      rss_title=$(this).find("title").text(); 
      rss_link=$(this).find("link").text(); 
      rss_desc=$(this).find("description").text(); 
      html+="<div class='slide'><a href='"+rss_link+"'>"+rss_title+"</a>"+rss_desc+"</div>"; 
      }); //end find data 
     $("#slidewrap").append($(html)); 

     html="<ul>"; 
     for (i=1;i<=count;i++){ 
      if (i<10){ 
       html+="<li><a href='#'>"+i+"</a></li> | "; 
      }else{ 
       html+="<li><a href='#'>"+i+"</a></li>"; 
      } 
     } 
     html+="</ul>"; 
     $("#controllist").append($(html)); 

    });//end get 

    function controlMechanism(){ 
      if (currentPosition>=9){ 
       $("#controlright").hide(); 
      }else{ 
       $("#controlright").show(); 
      } 

      if (currentPosition<=0){ 
       $("#controlleft").hide(); 
      }else{ 
       $("#controlleft").show(); 
      } 
    }//end controlMechanism 

     //code for next and previous buttons 
    $(".controls").click(function(event){ 
     event.preventDefault(); 
     if ($(this).attr('id')=="controlright"){ 
      currentPosition+=1; 
     }else{ 
      currentPosition-=1; 
     }; 
     $("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)}); 

     controlMechanism(); 
    });//end controls click 

     //this controls the pagination 
    $("#controllist ul li").click(function(event){ 
     event.preventDefault(); 
     currentPosition=$(this).index(); 

     $("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)}); 

     controlMechanism(); 
    });// end controllist click 


}); 
</script> 
</head> 

<body> 
<?php 
//downloading rss feed into a file 
$ch=curl_init(); 
curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286"); 
$fp=fopen('rss.xml','w'); 
curl_setopt($ch,CURLOPT_FILE,$fp); 

$data=curl_exec($ch); 
curl_close($ch); 
fclose($fp); 
?> 
<div id="leftcolumn"> 
<a href="#" class="controls" id="controlleft">&lt;</a> 
</div> 
<div id="slidecontent"> 
    <div id="slidewrap"> 
    </div> 
</div> 
<div id="rightcolumn"> 
<a href="#" class="controls" id="controlright">&gt;</a> 
</div> 
<div id="controllist"> 
</div> 
</body> 
</html>