ปลั๊กอิน jQuery EasyUI

Plug-in รายการ

ฐาน (base)

• parser parser
• รถตักดิน Easyloader
• ลากลาก
• droppable สามารถวาง
• ปรับขนาดได้ปรับขนาด
• แท็บเลขหน้า
• ช่องค้นหาช่องค้นหา
• แถบความคืบหน้า ProgressBar
• ลูกโป่งเคล็ดลับ

เค้าโครง (Layout)

• แผงแผง
• แท็บแท็บแท็บ /
• แผงพับหีบเพลง
• รูปแบบเค้าโครง

เมนู (เมนู) และปุ่ม (ปุ่ม)

• เมนู
• ปุ่มเชื่อมโยง linkbutton
• ปุ่มเมนู Menubutton
• ปุ่ม Splitbutton แยก

(แบบ)

• แบบ
• ช่องยืนยัน Validatebox
• รวมกัน Combo
• กล่องคำสั่งผสม combobox
• ต้นไม้รวมกัน Combotree
• Combogrid กริดคอมโพสิต
• กล่องดิจิตอล Numberbox
• Datebox กล่องวัน
• Datetimebox กรอบเวลาวันที่
• ปฏิทิน
• ปินเนอร์ปินเนอร์
• Numberspinner ปั่นค่า
• เวลา Timespinner ปินเนอร์
• เลื่อนเลื่อน

หน้าต่าง (Window)

• หน้าต่างหน้าต่าง
• โต้ตอบโต้ตอบ
• กล่องข้อความ Messager

DataGrid (ตารางข้อมูล) และต้นไม้ (ต้นไม้)

• Datagrid ตารางข้อมูล
• Propertygrid กริดทรัพย์สิน
• ต้นไม้
• TreeGrid ตารางต้นไม้

วิดเจ็ต

Easyui แต่ละองค์ประกอบมีคุณสมบัติวิธีการและเหตุการณ์ที่เกิดขึ้น ผู้ใช้สามารถขยายไปยังส่วนดังกล่าว

คุณสมบัติ

มันถูกกำหนดไว้ใน jQuery.fn. {} ปลั๊กอิน .defaults ยกตัวอย่างเช่นแอตทริบิวต์โต้ตอบที่กำหนดไว้ใน jQuery.fn.dialog.defaults

เหตุการณ์

อีเว้นท์ (ฟังก์ชั่นการโทรกลับ) จะถูกกำหนดไว้ใน jQuery.fn. {} ปลั๊กอิน .defaults

ทาง

วิธีการโทรไวยากรณ์: $ ( 'เลือก') ปลั๊กอิน ( 'วิธีการ' พารามิเตอร์) ;.

ประเด็น:

• jQuery เลือกเป็นตัวเลือกวัตถุ
• ปลั๊กอินเป็น plug-in ที่ชื่อ
• วิธีการกับปลั๊กเพื่อให้ตรงกับวิธีการที่มีอยู่
• พารามิเตอร์เป็นวัตถุพารามิเตอร์สามารถเป็นวัตถุสตริง ...

วิธีการที่กำหนดไว้ใน jQuery.fn. {} ปลั๊กอิน .methods แต่ละวิธีมีสองพารามิเตอร์: JQ และพระราม ครั้งแรกพารามิเตอร์ 'JQ' เป็นสิ่งจำเป็นอ้างอิงถึงวัตถุ jQuery พารามิเตอร์ที่สอง 'พระราม' หมายถึงพารามิเตอร์วิธีการที่เกิดขึ้นจริงที่ผ่านมา ตัวอย่างเช่นการขยายวิธีการโต้ตอบองค์ประกอบที่เรียกว่าวิธีการ 'mymove' ดังต่อไปนี้:

$ .extend ($. Fn.dialog.methods {
    mymove: ฟังก์ชั่น (JQ, newposition) {
		กลับ jq.each (ฟังก์ชั่น () {
			$ (นี้) .dialog ( 'ย้าย' newposition);
		});
    }
});

ตอนนี้คุณสามารถเรียก mymove 'วิธีการที่จะย้ายกล่องโต้ตอบ (โต้ตอบ) ไปยังสถานที่ที่ระบุ:

$ ( '# Dd'). โต้ตอบ ( 'mymove' {
    ซ้าย: 200
    ด้านบน: 100
});

ผมเริ่มใช้ jQuery EasyUI

ดาวน์โหลดห้องสมุดและการอ้างอิง EasyUI CSS และ JavaScript ไฟล์ในหน้าเว็บของคุณ

<link rel = "สไตล์ชีต" type = "text / css ที่" href = "easyui / ธีม / default / easyui.css">
<link rel = "สไตล์ชีต" type = "text / css ที่" href = "easyui / ธีม / icon.css">
<script type = "text / javascript ของ" src = "easyui / jQuery-1.7.2.min.js"> </ script>
<ชนิด Script = "text / javascript ของ" src = "easyui / jquery.easyui.min.js"> </ script>

เมื่อคุณอ้างอิงไฟล์ที่จำเป็น EasyUI คุณสามารถกำหนดองค์ประกอบ EasyUI ผ่านการใช้แท็กหรือจาวาสคริปต์ ตัวอย่างเช่นในการแผงชั้นนำที่มีฟังก์ชั่นพับ, คุณจำเป็นต้องเขียนโค้ด HTML ดังต่อไปนี้:

<div id = "p" class = "easyui แบน" style = "width: 500px; ความสูง: 200px; padding: 10px;"
    title = "แผงของฉัน" iconCls = "ไอคอนบันทึก" พับ = "true">
    เนื้อหาแผง
</ div>

เมื่อมีการสร้างองค์ประกอบโดยการทำเครื่องหมายแอตทริบิวต์ 'ข้อมูล' ตัวเลือกจะใช้ในการสนับสนุนชื่อคุณสมบัติตั้งแต่เวอร์ชั่น 1.3 ที่รองรับ HTML5 เพื่อให้คุณสามารถเขียนโค้ดข้างต้นดังต่อไปนี้:

<div id = "p" class = "easyui แบน" style = "width: 500px; ความสูง: 200px; padding: 10px;"
    title = "แผงของฉัน" ข้อมูลตัวเลือก = "iconCls: ไอคอน 'บันทึก' พับ: จริง">
    เนื้อหาแผง
</ div>

รหัสต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างกล่องคำสั่งผสมที่ถูกผูกไว้เหตุการณ์ 'onSelect'

<input class = "easyui-ComboBox" name = "ภาษา"
    ข้อมูลตัวเลือก = "
    URL: 'combobox_data.json'
    valueField: 'ID'
    TextField: 'ข้อความ'
    panelHeight: 'รถยนต์'
    onSelect: ฟังก์ชั่น (Record) {
    แจ้งเตือน (record.text)
    } ">