Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > อยากสร้างปุ่ม ถัดไปและย้อนกลับ(ใหม่)ให้ tabs ซึ่งเอาไปว่างตำแหน่งไหนก็ได้ (ดูโค้ดด้านในค่ะ)

อยากสร้างปุ่ม ถัดไปและย้อนกลับ(ใหม่)ให้ tabs ซึ่งเอาไปว่างตำแหน่งไหนก็ได้ (ดูโค้ดด้านในค่ะ)

เริ่มหัวข้อใหม่

Fulluy

โพสกระทู้ ( 54 )
บทความ ( 0 )

https://www.thaicreate.com/php/forum/085901.html#00305022 ไปเจอเรื่องเดียวกันมา แต่

1. อยากสร้างปุ่ม ถัดไปและย้อนกลับ ซึ่งเอาไปว่างตำแหน่งไหนก็ได้และสามารถใช้งานได้ด้วย

2. หรือเอา ถัดไปและย้อนกลับ(เก่า) ไปว่างตำแหน่งอื่น เช่น ด้านบนสุด ยังไง

Code (PHP)

<?php set_include_path($_SERVER['DOCUMENT_ROOT']); ?>

<!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>jQuery UI Tabs with Next/Previous</title>

	<link rel="stylesheet" href="tabs.css" type="text/css" media="screen, projection"/>

	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
    <script type="text/javascript">
		$(function() {

			var $tabs = $('#tabs').tabs();
	
			$(".ui-tabs-panel").each(function(i){
	
			  var totalSize = $(".ui-tabs-panel").size() - 1;
	
			  if (i != totalSize) {
			      next = i + 2;
		   		  $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>ถัดไป &#187;</a>");
			  }
	  
			  if (i != 0) {
			      prev = i;
		   		  $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; ย้อนกลับ</a>");
			  }
   		
			});
	
			$('.next-tab, .prev-tab').click(function() { 
		           $tabs.tabs('select', $(this).attr("rel"));
		           return false;
		       });
			 $("input:radio").change(function(){
				 var checked = $(this).attr("choice");
				 $("ul#trackbar > li#"+checked).css("background-color", "#33ccff");
			 });
		});
    </script>
</head>

<body>
	<div id="page-wrap">
		<div id="tabs">
        	<?php
			for($x=1;$x<41;$x++){
				/*if($x==1){
					echo "<div id=\"fragment-1\" class=\"ui-tabs-panel\">
							<p>ข้อที่ 1 .........................</p><br/>
        					<p><input type='radio' name='cho[$x]'>ข้อ ก<br>
							<input type='radio' name='cho[$x]'>ข้อ ข<br>
							<input type='radio' name='cho[$x]'>ข้อ ค<br>
							<input type='radio' name='cho[$x]'>ข้อ ง<br></p>  
        				</div>";
				}else{*/
        			echo "<div id=\"fragment-$x\" class=\"ui-tabs-panel ui-tabs-hide\">
							<p>ข้อที่ $x .........................</p><br/>
        					<p><input type='radio' name='cho[$x]' choice='$x'>ข้อ ก<br>
							<input type='radio' name='cho[$x]' choice='$x'>ข้อ ข<br>
							<input type='radio' name='cho[$x]' choice='$x'>ข้อ ค<br>
							<input type='radio' name='cho[$x]' choice='$x'>ข้อ ง<br></p>  
						</div>";
				//}
			}
            ?>
    		<ul id="trackbar">
			<?php
			for($i=1;$i<41;$i++){
        		echo "<li id=\"$i\"><a href=\"#fragment-$i\">$i</a></li>";
			}
			?>
    	   </ul>
        </div>
	</div>
</body>

</html>

Tag : PHP, JavaScript

ประวัติการแก้ไข
2013-03-24 02:42:02

Date : 2013-03-24 02:39:27

By : succussfully

View : 3792

Reply : 3

No. 1

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

Code (PHP)

 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
	div#trackbar > span {
		display:inline-block;
		border:2px solid white;
		padding:5px;
		padding-left:10px;
		padding-right:10px;
		background-color:gray;
		color:white;
	}
	button {
		background-color:royalblue;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color:white;
		font-weight:bold;
		padding:4px;
	}
  </style>


 <?php
///////////////////////////////////////////////////////////////////////////////////////////////////
//   แค่ย้ายโค้ดชุดนี้ไปไว้ตำแหน่งไหนก็ได้ครับ
///////////////////////////////////////////////////////////////////////////////////////////////////
echo "<div class=\"navbar\">";
echo "<button class=\"prev\" for=\"".( ($key<1)?1:$key )."\">&lt;&lt; Previous</button>";
echo "<button class=\"next\" for=\"".( (($key+2)>$maxpage)?$maxpage:($key+2))."\">Next &gt;&gt;</button>";
echo "</div>";
///////////////////////////////////////////////////////////////////////////////////////////////////
 $question[] = "1. not Toyota??";
 $question[] = "2. not Thai Foods??";
 $question[] = "3. not Thai's province??";
 $question[] = "4. not Thai's Star??";

 $choice[0][] = "a. Prius";
 $choice[0][] = "b. Veron";
 $choice[0][] = "c. Innova";

 $choice[1][] = "a. Tomyum";
 $choice[1][] = "b. Papaya pokpok";
 $choice[1][] = "c. Sushi";

 $choice[2][] = "a. Bangkok";
 $choice[2][] = "b. Saigon";
 $choice[2][] = "c. Surathanee";

 $choice[3][] = "a. Nadej";
 $choice[3][] = "b. Yaya";
 $choice[3][] = "c. Lady Gaga";
$maxpage=count($question);
foreach($question as $key => $qdata){
	$key++;
	echo "<div for=\"question\" id=\"q$key\" style=\"padding-bottom:10px;\">";
	echo "<div style=\"padding:5px;font-weight:bold;\">$qdata</div>";
	$key--;
	foreach($choice[$key] as $choicing){
			echo "<div style=\"padding:15px;\"><input type=\"radio\" name=\"choice[$key]\" value=\"$choicing\" for=\"$key\">$choicing</div>";
	}
	
	echo "</div>";

}

echo "<div id=\"trackbar\">";
for($i=1; $i<=count($question); $i++){
	echo "<span for=\"$i\">$i</span>";
}
echo "</div>";
 ?>


<script>
$("div[for=question]").hide();
$("div#q1").show();
$("input[type=radio]").change(function(){
	var highlighter = parseInt($(this).attr("for")) + parseInt(1);
	$("div#trackbar > span[for="+highlighter+"]").css("background-color","#00ff33");
});
$("button").click(function(){
	var clicking = $(this).attr("for");
	$("div[for=question]").hide();
	$("div#q"+clicking).show();
});
    </script>

ประวัติการแก้ไข
2013-03-25 08:16:55

Date : 2013-03-25 08:16:10

By : sakuraei

No. 2

Fulluy

โพสกระทู้ ( 54 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : sakuraei เมื่อวันที่ 2013-03-25 08:16:10

รายละเอียดของการตอบ ::

กดข้อถัดไปไม่ได้ค่ะ

Date : 2013-03-26 21:08:29

By : succussfully

No. 3

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

แก้ไขแล้วครับ

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
	div#trackbar > span {
		display:inline-block;
		border:2px solid white;
		padding:5px;
		padding-left:10px;
		padding-right:10px;
		background-color:gray;
		color:white;
	}
	button {
		background-color:royalblue;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color:white;
		font-weight:bold;
		padding:4px;
	}
  </style>

 <?php

 $question[] = "1. not Toyota??";
 $question[] = "2. not Thai Foods??";
 $question[] = "3. not Thai's province??";
 $question[] = "4. not Thai's Star??";

 $choice[0][] = "a. Prius";
 $choice[0][] = "b. Veron";
 $choice[0][] = "c. Innova";

 $choice[1][] = "a. Tomyum";
 $choice[1][] = "b. Papaya pokpok";
 $choice[1][] = "c. Sushi";

 $choice[2][] = "a. Bangkok";
 $choice[2][] = "b. Saigon";
 $choice[2][] = "c. Surathanee";

 $choice[3][] = "a. Nadej";
 $choice[3][] = "b. Yaya";
 $choice[3][] = "c. Lady Gaga";
$maxpage=count($question);
foreach($question as $key => $qdata){	
	echo "<div for=\"question\" id=\"q".($key+1)."\" style=\"padding-bottom:10px;\">\n";
	echo "<div class=\"navbar\">\n";
	echo "<button class=\"prev\" for=\"".( ($key<1)?1:$key )."\">&lt;&lt; Previous</button>";
	echo "<button class=\"next\" for=\"".( (($key+2)>$maxpage)?$maxpage:($key+2))."\">Next &gt;&gt;</button>\n";
	echo "</div>\n";
	echo "<div style=\"padding:5px;font-weight:bold;\">$qdata</div>\n";
	foreach($choice[$key] as $choicing){
			echo "<div style=\"padding:15px;\"><input type=\"radio\" name=\"choice[$key]\" value=\"$choicing\" for=\"$key\">$choicing</div>\n";
	}
	
	echo "</div>\n";
	
}

echo "<div id=\"trackbar\">\n";
for($i=1; $i<=count($question); $i++){
	echo "<span for=\"$i\">$i</span>";
}
echo "</div>\n";
 ?>


<script>
$("div[for=question]").hide();
$("div#q1").show();
$("input[type=radio]").change(function(){
	var highlighter = parseInt($(this).attr("for")) + parseInt(1);
	$("div#trackbar > span[for="+highlighter+"]").css("background-color","#00ff33");
});
$("button").click(function(){
	var clicking = $(this).attr("for");
	$("div[for=question]").hide();
	$("div#q"+clicking).show();
});
    </script>

Date : 2013-03-27 01:29:04

By : sakuraei

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : อยากสร้างปุ่ม ถัดไปและย้อนกลับ(ใหม่)ให้ tabs ซึ่งเอาไปว่างตำแหน่งไหนก็ได้ (ดูโค้ดด้านในค่ะ)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก