ตย. CSS ซ่อนปุ่ม Print ตอนสั่งพิมพ์หน้าเว็บ (hidden tag after click print web page using css)
ใน workshop นี้จะพาทำตัวอย่างการสร้าง CSS ในการซ่อนปุ่มพิมพ์หรือปริ้นหน้าเว็บแบบง่ายๆ โดยใช้ media print และ display none กรณีเราต้องการสร้างหน้าพิมพ์บนเว็บไซต์ของเรา บางทีสั่งพิมพ์จะมีการติด tag ที่เราไม่ต้องการมาด้วย เช่น เมนูต่างๆ (ลิ้งค์) เพราะฉะนั้น workshop นี้จะมีโค้ดสำหรับแก้ปัญหานี้ครับ มาดูตัวอย่างการทำงานและโค้ดกันครับ
ตัวอย่างการทำงาน
เมื่อคลิก print ที่เป็นปุ่มสีน้ำเงิน หน้าแสดงการพิมพ์ ปุ่ม print จะหายไป
Code CSS ที่ใช้
|
1 2 3 4 5 6 7 |
<style type="text/css"> @media print{ #hid{ display: none; /* ซ่อน */ } } </style> |
Code ปุ่ม Print ที่มีการใส่ id=”hid” เพื่อซ่อนตอนสั่งพิมพ์ ปล.เอาไปใส่ Tag อื่นๆ ก็ได้นะครับ ไม่จำเป็นต้อง <button> </button> เสมอไป
|
1 |
<button id="hid" onclick="window.print();" class="btn btn-primary"> print </button> |
ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ เอาไปต่อยอดได้ รายละเอียดเพิ่มเติมใต้คลิป
Full Code ตัวอย่าง *มีคอมเม้นในโค้ดเพิ่มเติม & *Save เป็น .html แล้ว Run ได้เลยนะจ้ะ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style type="text/css"> @media print{ #hid{ display: none; /* ซ่อน */ } } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-5"> <h4> List <!-- id hid คือ CSS บรรทัด 9 - 15 ที่ใช้ media print และสร้างไอดี display:none; เพื่อซ่อน Tag ที่ใส่ไอดี hid **อยากซ่อน Tag ไหนตอนพิมพ์ ก็เอา id="hid" ไปใส่ใน tag ครับ --> <button id="hid" onclick="window.print();" class="btn btn-primary"> print </button> </h4> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>header</th> <th>header</th> <th>header</th> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div> </body> </html> <!-- devbanban.com --> |
ลองเอาไปประยุกต์ใช้ดูนะครับ
แฟนเพจ : https://www.facebook.com/sornwebsites/
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
————————————————————————————
ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 048-1-17571-2