مسج EasyUI المساعد

المكونات في قائمة

قاعدة (قاعدة)

• محلل محلل
• محمل Easyloader
• قابل للسحب قابل للسحب
• Droppable يمكن وضعها
• يمكن تغيير حجم قابل للتعديل الحجم
• علامة التبويب ترقيم الصفحات
• مربع البحث مربع البحث
• شريط التقدم Progressbar
• بالونات تلميح الأدوات

تخطيط (تخطيط)

• لوحة لوحة
• علامات تبويب / تبويب
• الأكورديون لوحة أضعاف
• تخطيط تخطيط

القائمة (القائمة) وزر (زر)

• القائمة القائمة
• زر الرابط Linkbutton
• زر القائمة Menubutton
• Splitbutton زر الانقسام

النموذج (نموذج)

• شكل نموذج
• مربع التحقق Validatebox
• الجمع بين التحرير والسرد
• مربع تحرير وسرد منسدل
• Combotree شجرة مزيج
• Combogrid الشبكة المركبة
• مربع الرقمية Numberbox
• المربع تاريخ Datebox
• Datetimebox التسجيل الإطار الزمني
• التقويم
• الدوار الدوار
• الدوار قيمة Numberspinner
• Timespinner الوقت الدوار
• المنزلق المنزلق

نافذة (نافذة)

• نافذة نافذة
• الحوار الحوار
• مربع رسالة ميسيجي

DataGrid (شبكة البيانات) وشجرة (شجرة)

• شبكة البيانات Datagrid
• Propertygrid الشبكة الملكية
• شجرة شجرة
• Treegrid شبكة شجرة

القطعة

Easyui كل عنصر له خصائص وأساليب وأحداث. يمكن للمستخدمين بسهولة تمتد إلى تلك المكونات.

ممتلكات

يتم تعريفه في jQuery.fn. {المساعد} .defaults. على سبيل المثال، يتم تعريف سمات الحوار في jQuery.fn.dialog.defaults.

حدث

ويعرف الحدث (وظيفة رد الاتصال) في jQuery.fn. {المساعد} .defaults.

الطريق

استدعاء الأسلوب في بناء الجملة: $ ( 'محدد') المساعد ( 'أسلوب'، المعلمة) ؛.

حيث:

• مسج محدد غير محدد الكائن.
• البرنامج المساعد هو اسم المكونات في.
• الأسلوب مع المكونات لتتناسب مع أسلوب القائمة.
• المعلمة هي كائن يمكن أن تكون المعلمة كائن، سلسلة ...

يتم تعريف الأسلوب في jQuery.fn. {المساعد} .methods. كل طريقة معلمتين: JQ والمعلمة. المعلمة الأولى "JQ 'من الضروري، في إشارة إلى كائن مسج. ويشير المعلمة الثانية "المعلمة" إلى معلمات الأسلوب الفعلية تمريرها. على سبيل المثال، لتوسيع طريقة عنصر الحوار يسمى نهج "mymove"، على النحو التالي:

$ .extend ($. Fn.dialog.methods، {
    mymove: وظيفة (JQ، newposition) {
		العودة jq.each (وظيفة () {
			$ (هذا) .dialog ( 'خطوة'، newposition)؛
		})؛
    }
})؛

الآن يمكنك الاتصال "mymove" طريقة لنقل مربع الحوار (الحوار) إلى الموقع المحدد:

$ ( '# دد'). الحوار ( 'mymove'، {
    اليسار: 200،
    كبار: 100
})؛

لقد بدأت باستخدام مسج EasyUI

تحميل المكتبة، والمراجع EasyUI CSS و JavaScript ملفات في الصفحة الخاصة بك.

<وصلة يختلط = "أنماط" نوع = "نص / المغلق" أ href = "easyui / المواضيع / الافتراضي / easyui.css">
<وصلة يختلط = "أنماط" نوع = "نص / المغلق" أ href = "easyui / المواضيع / icon.css">
<سيناريو نوع = "نص / جافا سكريبت" SRC = "easyui / مسج-1.7.2.min.js"> </ script>
<نوع سيناريو = "نص / جافا سكريبت" SRC = "easyui / jquery.easyui.min.js"> </ script>

بمجرد الرجوع EasyUI الملفات الضرورية، يمكنك تحديد مكونات EasyUI من خلال استخدام العلامات أو جافا سكريبت. على سبيل المثال، لوحة أعلى مع وظيفة قابلة للطي، تحتاج إلى كتابة كود HTML كما يلي:

<شعبة معرف = "ص" الطبقة = "لوحة easyui" على غرار = "العرض: 500px؛ الطول: 200px؛ الحشو: 10px؛"
    عنوان = "لوحة الكمبيوتر" iconCls = "أيقونة حفظ" للطي = "صحيح">
    محتوى لوحة
</ div>

عند إنشاء عنصر عن طريق وضع علامات، يتم استخدام السمة '، خيارات البيانات' لدعم اسم الخاصية منذ الإصدار 1.3 HTML5 متوافقة. حتى تتمكن من إعادة كتابة التعليمات البرمجية أعلاه كما يلي:

<شعبة معرف = "ص" الطبقة = "لوحة easyui" على غرار = "العرض: 500px؛ الطول: 200px؛ الحشو: 10px؛"
    عنوان = "بلدي لوحة"، خيارات البيانات = "iconCls:" أيقونة حفظ "، للطي: صحيح">
    محتوى لوحة
</ div>

يظهر التعليمة البرمجية التالية كيفية إنشاء مربع التحرير والسرد ملزمة الحدث "onSelect".

<الإدخال الطبقة = "easyui-منسدل" اسم = "اللغة"
    ، خيارات البيانات = "
    رابط: "combobox_data.json،
    valueField: "هوية"،
    حيز النص: 'نص'،
    panelHeight: "السيارات"،
    onSelect: وظيفة (رقم قياسي) {
    تنبيه (record.text)
    } ">