บทช่วยสอน หน้าต่าง jQuery EasyUI - มีกล่องโต้ตอบการปรับแต่งแถบเครื่องมือและปุ่ม ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ดาวน์โหลดตัวอย่าง jQuery EasyUI,
คุณสามารถสร้างแถบเครื่องมือที่มี (แถบเครื่องมือ) และปุ่ม (ปุ่ม) โต้ตอบ (โต้ตอบ) คุณสามารถสร้างแท็ก HTML กวดวิชานี้จะอธิบายวิธีการเพิ่มแถบเครื่องมือ (แถบเครื่องมือ) และปุ่ม (ปุ่ม) ไปยังกล่องโต้ตอบ (โต้ตอบ) โดยไม่มีรหัส JavaScript ใด ๆ
<div id = "DD" class = "easyui โต้ตอบ" title = "ไดอะล็อกของฉัน" style = "width: 400px; ความสูง: 200px; padding: 10px" แถบเครื่องมือ = "# DLG แถบเครื่องมือปุ่ม" = "# DLG ปุ่ม"> เนื้อหาโต้ตอบ </ div>
<div id = "DLG แถบเครื่องมือ"> <table cellpadding = "0" cellspacing = "0" style = "width: 100%"> <tr> <td> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"> แก้ไข </a> <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true"> ช่วยเหลือ </a> </ td> <style Td = "text-align: ขวา"> <input> </ input> <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"> </a> </ td> </ tr> </ table> </ div>
<div id = "ปุ่ม DLG"> <table cellpadding = "0" cellspacing = "0" style = "width: 100%"> <tr> <td> <img src = "email.gif" /> </ td> <style Td = "text-align: ขวา"> <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')"> บันทึก </a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')"> ปิด </a> </ td> </ tr> </ table> </ div>
โปรดทราบว่ากล่องโต้ตอบ (โต้ตอบ) แถบเครื่องมือ (แถบเครื่องมือ) และปุ่ม (ปุ่ม) คุณสมบัติยังสามารถระบุโดยค่าสตริงที่มันจะทำหน้าที่เป็นตัวเลือกเพื่อเลือกส่วน div ที่เหมาะสมและผนวกไปยังแถบเครื่องมือ (แถบเครื่องมือ) หรือปุ่ม (ปุ่ม) ตำแหน่ง