تخطيط مسج EasyUI - إنشاء لوحة انهار
في هذا البرنامج التعليمي، وسوف تتعلم حول easyui قابلة للطي لوحة (الأكورديون) المعرفة. قابلة للطي لوحة (الأكورديون) يحتوي على سلسلة من لوحة (لوحة). جميع لوحات (لوحة) من الرأس (رأس) مرئية، ولكن فقط مرة واحدة في لوحة العرض (لوحة) من محتوى الجسم. عندما ينقر المستخدم على لوحة (لوحة) من الرأس (رأس) عندما لوحة (لوحة) من محتوى الجسم سوف تكون واضحة، في حين أن لوحة أخرى (لوحة) وإخفاء محتوى الجسم غير مرئية.
سوف نقوم بإنشاء ثلاث لوحات (لوحة)، لوحة الثالثة (لوحة) يحتوي على قائمة شجرة.
<div الطبقة = "easyui-الأكورديون" على غرار = "العرض: 300px؛ الطول: 200px؛"> <لقب الدرجة = "معلومات الأكورديون" iconCls = "رمز طيب" على غرار = "تجاوز: السيارات؛ الحشو: 10px؛"> <H3 النمط = "اللون: # 0099FF؛"> الأكورديون لمسج </ H3> <P> الأكورديون هو جزء من إطار easyui للمسج، ويتيح لك تحديد عنصر الأكورديون الخاص بك على صفحة الويب بسهولة أكبر. </ P> </ div> <div عنوان = "معلومات easyui" iconCls = "أيقونة تحديث" اختيار = "صحيح" على غرار = "الحشو: 10px؛"> easyui تساعدك على بناء صفحة الويب الخاصة بك بسهولة </ div> <div عنوان = "القائمة شجرة"> <UL معرف = "tt1" الطبقة = "easyui شجرة"> <لي> <سبان> FOLDER1 </ SPAN> <UL> <لي> <سبان> الباطن مجلد 1 </ SPAN> <UL> <لي> <SPAN> الملف 11 </ SPAN> </ لى> <لي> <SPAN> الملف 12 </ SPAN> </ لى> <لي> <SPAN> الملف 13 </ SPAN> </ لى> </ UL> </ لى> <لي> <SPAN> الملف 2 </ SPAN> </ لى> <لي> <SPAN> الملف 3 </ SPAN> </ لى> </ UL> </ لى> <لي> <SPAN> FILE2 </ SPAN> </ لى> </ UL> </ div> </ div>