หลังจากป้อนเนื้อหาบางส่วนในกล่องอินพุตหากคุณต้องการล้างเนื้อหาเหล่านี้คุณสามารถคลิกปุ่มส้อมทรงกลมขนาดเล็กได้โดยตรงที่ด้านขวาของกล่องอินพุต
ข้อความ
รหัสผ่าน
อีเมล
url
ค้นหา
โทร
ตัวเลข
วันที่
วิธีใช้
ใช้ปลั๊กอินเนื้อหาอินพุตอินพุตอินพุตอินพุตเพื่อนำเข้าไฟล์ jQuery และ bootstrap รวมถึงไฟล์ jQuery.bootstrap-pureclearbutton.js
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script type = "text/javascript" src = "http://code.jquery.com/jquery src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/jquery.bootstrap-pureclearbutton.js">
โครงสร้าง HTML
โครงสร้าง HTML ของปลั๊กอินปุ่ม jQuery นี้สามารถใช้ในสองรูปแบบต่อไปนี้
<อินพุต type = "text" data-pure-clear-button> <input type = "text" data-pure-clear-button = "true">
เริ่มต้นปลั๊กอิน
หลังจากโหลดหน้าเว็บแล้วคุณสามารถใช้วิธีการต่อไปนี้เพื่อเริ่มต้นปลั๊กอิน
$ .pureclearButton.setDefault ({icon: 'Glyphicon-plus'});วิธี
ปลั๊กอิน jQuery มี 4 วิธี:
.PureClearButtn ('สร้าง'): สร้างปุ่ม Clear/Reset ในกล่องอินพุตที่ระบุ
.PureClearButtn ('ทำลาย'): ทำลายปุ่มล้าง/รีเซ็ตในกล่องอินพุตที่ระบุ
.pureclearButtn ('show'): แสดงปุ่มชัดเจน/รีเซ็ตในกล่องอินพุตที่ระบุ
.PureClearButtn ('ซ่อน'): ซ่อนปุ่มล้าง/รีเซ็ตในกล่องอินพุตที่ระบุ
ต่อไปนี้คือการขยายเนื้อหาให้คุณ: Bootstrap Input Box
1. เพิ่มองค์ประกอบพิเศษ Input-Group-Addon
องค์ประกอบการเอาท์ซอร์สอินพุทกลุ่ม> อินพุต-กลุ่ม ADDON+การควบคุมแบบฟอร์ม
<div> <pan> องค์ประกอบพิเศษ </span> <อินพุต type = "text"/> </div>
2. ป้อนขนาดกลุ่มกล่อง
control class.input-Group-*: .input-Group-LG/.Input-Group-SM
<div> <span id = "sizing-addon1"> องค์ประกอบพิเศษ </span> <อินพุต type = "text"> </div>
3. เพิ่มตัวเลือกหลายตัวหรือหลายตัวเลือกสำหรับองค์ประกอบเพิ่มเติม
การทำรังนกปุ่มเดียวหรือหลายแบบเลือกในองค์ประกอบพิเศษ
<div> <pan> <อินพุต type = "วิทยุ" /> </span> <อินพุต type = "text" /> </div>
4. องค์ประกอบพิเศษคือปุ่ม
คลาสพิเศษคลาส. Input-Group-BTN
<div> <span> <pution> ปุ่มองค์ประกอบพิเศษ </button> </span> <input type = "text" class = "form-control"/> </div>
5. องค์ประกอบพิเศษคือเมนูปุ่มแบบเลื่อนลง
.input-Group-BTN มีองค์ประกอบเมนูแบบเลื่อนลง (รวมถึงทริกเกอร์และเมนูแบบเลื่อนลง)
<div> <div> <ปุ่ม data-toggle = "dropdown"> ปุ่ม <span> </span> </ปุ่ม> <ul> <li> <a href = ""> รายการ 1 </a> </li> <li> <a href = ""> รายการ 2 </a> </li>
6. องค์ประกอบพิเศษคือเมนูแบบเลื่อนลงปุ่มแยก
องค์ประกอบพิเศษรวมถึงเมนูแบบเลื่อนลง (ปุ่ม, ทริกเกอร์และเมนูแบบเลื่อนลง)
<div> <div> <button> ปุ่ม </putton> <button data-toggle = "dropdown"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li>
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน