หน้าต่าง jQuery EasyUI - มีกล่องโต้ตอบการปรับแต่งแถบเครื่องมือและปุ่ม

คุณสามารถสร้างแถบเครื่องมือที่มี (แถบเครื่องมือ) และปุ่ม (ปุ่ม) โต้ตอบ (โต้ตอบ) คุณสามารถสร้างแท็ก HTML กวดวิชานี้จะอธิบายวิธีการเพิ่มแถบเครื่องมือ (แถบเครื่องมือ) และปุ่ม (ปุ่ม) ไปยังกล่องโต้ตอบ (โต้ตอบ) โดยไม่มีรหัส JavaScript ใด ๆ

สร้างโต้ตอบ (Dialog)

	<div id = "DD" class = "easyui โต้ตอบ" title = "ไดอะล็อกของฉัน" style = "width: 400px; ความสูง: 200px; padding: 10px"
			แถบเครื่องมือ = "# DLG แถบเครื่องมือปุ่ม" = "# DLG ปุ่ม">
		เนื้อหาโต้ตอบ
	</ div>

สร้างแถบเครื่องมือ (Toolbar)

	<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 ที่เหมาะสมและผนวกไปยังแถบเครื่องมือ (แถบเครื่องมือ) หรือปุ่ม (ปุ่ม) ตำแหน่ง

ดาวน์โหลดตัวอย่าง jQuery EasyUI

jeasyui-win-dlg2.zip