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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

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

Top