ขอคำเเนะนำหน่อยครับ กดปุ่มเเล้วเเสดงข้อมูลในหน้าเดียว

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอคำเเนะนำหน่อยครับ กดปุ่มเเล้วเเสดงข้อมูลในหน้าเดียว

ขอคำเเนะนำหน่อยครับ กดปุ่มเเล้วเเสดงข้อมูลในหน้าเดียว
มีอยู่ 3 ปุ่ม เเต่ละปุ่มเเสดงรูป  ชื่อ  เปอร์เซ็น  3อย่าง  เเละเเต่ละปุ่มเเสดงข้อมูลไม่เท่ากัน ปุ่ม1มี10ข้อมูล ปุ่ม2มี15ข้อมูล
เราจะทำให้  รูป  ชื่อ  เปอร์เซ็น มีระยะห่างยังไงครับ เเละ การเเสดงข้อมูลมีวิธีอื่นนอกจากที่ผมลองทำไหมครับ


<?php
include 'controller/configdatabase.php';

?>
<!DOCTYPE html>

<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>Button Outline</h2>

    <button type="button"  class="btn btn-outline-success" onclick="showImage1()" >One</button>
    <button type="button"  class="btn btn-outline-success" onclick="showImage2()" >Two</button>
    <button type="button"  class="btn btn-outline-success" onclick="showImage3()" >Three</button>
  </div>

  <!-- แสดงรูปภาพในนี้ -->
  <div id="show1" ></div>
  <div id="show2"></div>
  <div id="show3"></div>

  <script>
    var r ='test';
    var e ='100%';
    function showImage1() {
      document.getElementById("show1").innerHTML = '<img src=img/number1.png  />'+ r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number1.png  />';
      document.getElementById("show3").innerHTML = '<img src=img/number1.png />';

    }

    function showImage2() {
      document.getElementById("show1").innerHTML = '<img src=img/number2.png  /> ' + r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number2.png  />'
      document.getElementById("show3").innerHTML = ''

    }

    function showImage3() {
      document.getElementById("show1").innerHTML = '<img src=img/number3.png  /> ' + r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number3.png  />'
      document.getElementById("show3").innerHTML = '<img src=img/number3.png  />'
      

    }
  </script>
  <?php 

  ?>
</body>
</html>


Golff Sinlapachai 171.4.236.xxx 06-03-2020 18:03:59

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
ใช้ css style หรือ css class จัดรูปแบบ ขึ้นกับว่าต้องการให้แสดงแบบไหน
ลองศึกษา flex layout เป็นแนวทางเพิ่มเติม


Ninenik 223.24.163.xxx 06-03-2020
 ความคิดเห็นที่ 2
ถามเพิ่มหน่อยครับ ตอนเลือกหน้า home ถ้าจะให้กดที่ปุ่ม Success ก่อนเเล้วค่อยให้เเสดง ข้อมูลหน้า home ที่กรอบเเดงไว้ ต้องทำยังไงครับ





Golff Sinlapachai 171.4.241.xxx 12-03-2020 15:47
 ความคิดเห็นที่ 3
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</script>

</body>
</html>


Golff Sinlapachai 171.4.241.xxx 12-03-2020 15:47
 ความคิดเห็นที่ 4
ตอนเลือกหน้า home ยังไม่เเสดงข้อมูล ให้กดปุ่ม scan ก่อนเเล้วค่อยเเสดง ตรงกรอบเเดง
เเล้วถ้าเราอยู่หน้า home  จนสร้าง cookie ใหม่ เราก็กดปุ่ม scan อีกที ช่องที่3ก็เป็น 
cookie ตัวใหม่
ขอบคุณครับช่วยได้เยอะเลย




<?php 
// ถ้ายังไม่มี cookie ชื่อนี้ หรือ มีแล้ว แต่หมดอายุ เช็คจากวันที่ข้อมูล cookie
// กำหนดอายุ ของ ตัวแปร cookie ด้วย php ตอนที่ 2 http://niik.in/445 
// https://www.ninenik.com/content.php?arti_id=445 via @ninenik
if (!isset($_COOKIE['ck_checktime']) || (isset($_COOKIE['ck_checktime'])&&time()>(int)$_COOKIE['ck_checktime']))
{
  setcookie('ck_checktime', time() + 60,time() + 60);// สร้าง cookie เวลาปัจจุบันใหม่ ทุก 1 นาที บวกเพิ่มเท่ากับ 60 วิ
    // การสร้างตัวแปร cookie ด้วย php ต้องใช้คำสั่งนี้โดยห้ามมีการ echo หรือแสดงค่าใดๆ ก่อน
    // ตัวแปร จะเรียกใช้งานได้ หลังจากสร้างและโหลดหน้านี้ใหม่อีกครั้ง เพราะตัวแปร cookie จะถูกส่งใปใช้งานผ่าน header
$arr_data = array(rand(45,50),rand(40,45),rand(35,40),rand(30,35),rand(25,30));// random ค่าแล้วเก็บเป็น array
$str_data = implode(',',$arr_data); // ข้อมูล string โดยสร้างจากตัวแปร array
setcookie('ck_valuedata', $str_data,time() + 60); // สร้าง cookie ข้มอูลใหม่ ทุก 1 นาที บวกเพิ่มเท่ากับ 60 วิ
} ?>
<!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>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   	<?php
  if (!isset($_COOKIE['ck_checktime'])) {
    echo "Generate";
    echo $str_data.'<br>';
   
  }else{
    echo "Use old value";
    echo $_COOKIE['ck_valuedata'].'<br>';
    
   
     }
?>
<button type="button" class="btn btn-success" >scan</button>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <table id="tableCredit" class="table table-bordered table-striped margin-top-table">
					<thead>
						<tr>
							<th class="text-center colum-width-10">เลขที่</th>
							<th class="text-center">ชื่อ</th>
							<th class="text-center">%</th>
						</tr>
					</thead>
					<tbody>
							<tr>
								<td class="text-center"><?php echo "string"; ?></td>
								<td class="text-center"><?php echo "string"; ?></td>
								<td class="text-center"><?php  if (!isset($_COOKIE['ck_checktime'])) {print_r(explode(',', $str_data)[0]);}else{print_r(explode(',', $_COOKIE['ck_valuedata'])[0]);
     } ?></td>
							</tr>
							<tr>
								<td class="text-center"><?php echo "string"; ?></td>
								<td class="text-center"><?php echo "string"; ?></td>
								<td class="text-center"><?php  if (!isset($_COOKIE['ck_checktime'])) {print_r(explode(',', $str_data)[1]);}else{print_r(explode(',', $_COOKIE['ck_valuedata'])[1]);
     } ?></td>
							</tr>
					</tbody>
				</table>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</script>

</body>
</html>


Golff Sinlapachai 171.4.241.xxx 12-03-2020 17:35
 ความคิดเห็นที่ 5
ต้องกำหนด state หรือสภาวะ ของแต่ละลำดับให้ชัดเจน แล้วค่อยลำดับการจัดการ
เช่น เริ่มต้น แท็บอยู่ที่เมนูไหน ถ้าอยู่เมนู home ข้อมูลจะแสดงหรือไม่
ถ้าเริ่มต้น แท็บอยู่เมนู home แต่ข้อมูลไม่แสดง แนวทางก็จะประมาณนี้ เพิ่มเติม Bootstrap Tab
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>
 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>
 
<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
     $(this).tab('show');
  });
  $("#home.tab-pane").removeClass("active in"); // เริ่มต้นไม่แสดง
  
  var tabHome = null; // สร้างตัวแปร เก็บสถานะการคลิกที่ปุ่ม
  $(".btn-success").click(function(){
    tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
  });
  $('.nav-tabs a').on('shown.bs.tab', function (e) { // เมื่อแสดงข้อมูลในแท็บแล้ว
    if($(e.target).attr("href")=="#home"){ // ถ้าเป็นของปุ่ม แรก
      console.log("Home click");
      if(tabHome == true){ // เมื่อมีกาารคลิกที่ปุ่ม success

      }else{ // ยังไม่คลิก
        $("#home.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }
  })  
});
</script>
 
</body>
</html>
 
 
แต่ถ้าอยากให้เมื่อคลิกปุ่ม success แล้วแสดงเลย ก็ให้ใช้เป็นดังนี้
 
  $(".btn-success").click(function(){
    tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
    if($("a[href='#home']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่
      $("#home.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
    }
  });

ตัวอย่าง DEMO

Ninenik 223.24.157.xxx 12-03-2020
1 2 Next






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ