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

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

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 266
Joined: 21/10/2019 10:19 am

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

Post by bankjittapol » 08/11/2019 2:25 pm

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

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

Code: Select all

  <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 โดยใช้คำสั่ง

Code: Select all

 <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 ="ที่อยู่ของไฟล์รูปภาพ"

Code: Select all

<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>

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

Code: Select all

<!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>
ผลลัพธ์
Image

อ้างอิง
http://paulrose.com/bootstrap-select-sass/
https://codepen.io/Lihkinrian/pen/boOowo
https://thdoan.github.io/bootstrap-select/examples.html

  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests