การใช้ data-thumbnail ใน List box ทำภาพตัวอย่างประกอบตัวเลือกในลิสบ๊อค

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

การใช้ data-thumbnail ใน List box ทำภาพตัวอย่างประกอบตัวเลือกในลิสบ๊อค

โพสต์ที่ยังไม่ได้อ่าน โดย bankjittapol »

การใช้ data-thumbnail ใน List box คือการทำภาพตัวอย่างประกอบ ให้อยู่ใน list box เพื่อให้เห็นภาพตัวอย่างสำหรับการเลือกตัวเลือก โดยสามารถประยุคใช้กับ ลิสเลือกประเทศ หรือเลือกรูปหน้าคน รูปตัวอย่างแบบบ้าน หรืออื่นๆ ได้ตามต้องการ เป็นการเพิ่ม ลูกล่น สำหรับการทำฟอร์ม กรอกข้อมูล โดยความรู้ที่ต้องมีสำหรับการใช้งาน คือ JQuery, HTML input Object
ซึ่งสามารถทำได้ ดังนี้

ขั้นตอนที่ 1
import bootstrap-select.css และ bootstrap.min.css โดยใช้คำสั่ง

โค้ด: เลือกทั้งหมด

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
ขั้นตอนที่ 2
import jquery.min.js bootstrap.min.js และ bootstrap-select.js โดยใช้คำสั่ง

โค้ด: เลือกทั้งหมด

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>
ขั้นตอนที่ 3
ทำการเรียกใช้ โดยอ้างอิง class selectpicker
data-thumbnail ="ที่อยู่ของไฟล์รูปภาพ"

โค้ด: เลือกทั้งหมด

<select class="selectpicker" >
  <option value="">เลือก ...</option>
  <option data-thumbnail="player_image/alisson.png" value="1">Alisson</option>
  <option data-thumbnail="player_image/vandijk.png" value="2">Vandijk</option>
  <option data-thumbnail="player_image/robertson.png" value="3">Robertson</option>
  <option data-thumbnail="player_image/lovren.png" value="4">Lovren</option>
  <option data-thumbnail="player_image/henderson.png" value=5>Henderson</option>
</select>

เมื่อรวมคำสั่ง จะได้

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
   </head>
   <body>
    <select class="selectpicker" >
  <option value="">เลือก ...</option>
  <option data-thumbnail="player_image/alisson.png" value="1">Alisson</option>
  <option data-thumbnail="player_image/vandijk.png" value="2">Vandijk</option>
  <option data-thumbnail="player_image/robertson.png" value="3">Robertson</option>
  <option data-thumbnail="player_image/lovren.png" value="4">Lovren</option>
  <option data-thumbnail="player_image/henderson.png" value=5>Henderson</option>
</select>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>
   </body>
</html>
ผลลัพธ์
รูปภาพ

อ้างอิง
http://paulrose.com/bootstrap-select-sass/
https://codepen.io/Lihkinrian/pen/boOowo
https://thdoan.github.io/bootstrap-select/examples.html
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 25