في المقالة السابقة ، استخدمنا Easyui لإنشاء إطار لصفحة الخلفية. انقر هنا لعرضه. في هذا القسم ، نستخدم تقنية Easyui بشكل أساسي لتنفيذ قائمة الخلفية ببساطة. سنقوم أولاً بإنشاء وظائف بسيطة ونستمر في إثراءها لاحقًا.
1. تنفيذ القائمة اليسرى
إلقاء نظرة أولى على الاداءات:
يمكننا النقر فوق "العمليات الأساسية" و "العمليات الأخرى" لتبديل خيارات القائمة. في الخيارات المحددة ، انقر على اتصالات مختلفة وسيتم عرضها على اليمين. لنجعل القائمة على اليسار أولاً.
هناك نوعان رئيسيان من القائمة على اليسار: "إدارة الفئات" و "إدارة المنتج". نحن نعلم أنه في القسم السابق ، يجب بناء إطار صفحة الخلفية في Aindex.jsp ، لذلك الآن نحتاج فقط إلى صنع هاتين الارتباطات التشعبية ووضعهما في div المقابلة في Aindex.jsp. لذلك نقوم أولاً بإنشاء ملف temp.jsp جديد في مجلد WebRoot كملف تطوير مؤقت ، لأنه يمكنك قياسه مباشرة عن طريق كتابة JSP هنا. بعد أن يتوفر التأثير ، انسخ المحتوى إلى الموقع المقابل في Aindex.jsp.
صفحة temp.jsp هي كما يلي:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01> en en" {العرض: 200px ؛ /*الحدود: 1px الصلبة الأحمر ؛*/} #Menu ul {style-style: none ؛ الحشو: 0px ؛ الهامش: 0px ؛ } #menu ul li {border-bottom: 1px solid #fff ؛ } #menu ul li a { /*قم بتحويل العلامة إلى عنصر على مستوى الكتلة أولاً لتعيين العرض والتباعد الداخلي* / display: block ؛ خلفية اللون: #00a6ac ؛ اللون: #fff ؛ الحشو: 5 بكسل ؛ تدمير النص: لا شيء ؛ } #menu ul li a: hover {background-color: #008792 ؛ } </style> </head> <body> <div id = "menu"> <ul> <li> <a href = "#"> إدارة الفئة </a> <li> <a href = "#"لا يوجد سوى رابطان في Temp.jsp ، مغلفين بـ LI ووضعه في Div. تقوم CSS أعلاه بتعيين نمط هذين الرابطين ، ثم نمكّن Tomcat واختبار التأثير على النحو التالي:
بعد إجراء هاتين الارتباطتين التشعبيتين ، سننسخ UL من الارتباطات التشعبية المغلفة إلى موضع عرض محتوى القائمة على اليسار في Aindex.jsp ، ونقوم بتعديله بإيجاز ، على النحو التالي:
يمكن نقل جزء CSS مباشرة إلى علامة رأس Aindex.jsp. انظر إلى علامة A أعلاه ، والتي تحتوي على سمة العنوان ، وليس HREF ، لأننا لا نقفز إلى الصفحة الجديدة ، لأن Easyui هي فقط هذه الصفحة ، نريد وضع العرض الذي تم النقر فوقه في علامة التبويب علامة التبويب على اليمين ، لذلك نكتب أولاً إجراء القفزة في سمة العنوان ثم نغيره لاحقًا. بعد ذلك ، نريد النقر فوق إدارة الفئات لإقامة وظيفة فئات محددة في علامة التبويب على اليمين.
2. قم بتنفيذ علامة التبويب على اليمين
لإدراك وظيفة النقر على شريط القائمة اليسرى لإقامة علامة التبويب اليمنى ، تحتاج إلى إضافة رمز JS. فكرة استخدام Easyui هي: انقر أولاً على الارتباط التشعبي واحصل على اسم الارتباط التشعبي ، لأن عنوان علامة التبويب المنبثقة يجب أن يكون هو نفسه اسم الارتباط التشعبي ، مثل "إدارة الفئات" ؛ ثم حدد ما إذا كانت علامة التبويب تغيير الاسم موجودة بالفعل ، وعرضها إذا كانت موجودة ، قم بإنشائها إذا لم تكن موجودة ، وعرض المحتوى ليتم عرضه. دعونا نلقي نظرة على الكود في جزء JS:
<script type = "text/javaScript"> $ (function () {$ ("a [a [title]). انقر فوق (function () {var text = $ (this) .text () ؛ var href = $ (this) .Attr (" title ") ؛ $ ("#tt"). علامات التبويب ("حدد" ، نص) ؛ عنوان URL ، ولكن جزء الجسم فقط // href: 'send_category_query.action'}) ؛ </script> دعنا نحلل رمز JS هذا. أولا ، احصل على العلامة. لاحظ أن هذه العلامة هي علامة مع سمة العنوان ، وهي ارتباط تشعبي "إدارة الفئات" أعلاه ، ثم انقر ، وهناك وظيفة أخرى في النقر. ماذا تفعل هذه الوظيفة؟ أولاً ، احصل على اسم الرابط الحالي ، أي النص ، ثم احصل على عنوان URL من خلال سمة العنوان (لأننا كتبنا عنوان URL للتو إلى سمة العنوان). بعد ذلك ، حدد ما إذا كان هناك خيار (علامة تبويب) لهذا الاسم. إذا كان هناك ، فسيتم عرض خيار هذا الاسم ، وإذا لم يكن هناك ، فقم بإنشائه.
دعونا نلقي نظرة على البيان في if. أولاً ، استخدم "#TT" للحصول على كائن jQuery على اليمين ، ثم اتصل على طريقة إنشاء علامات التبويب للحصول على كائن علامة التبويب. إذا كان هناك ، فسوف يعود بشكل صحيح ، وإلا فإنه سيعود خطأ. إذن ماذا تعني المعلمتين في علامات التبويب ()؟ بادئ ذي بدء ، المعلمة الأولى هي اسم الطريقة ، والمعلمة الثانية هي المعلمة المقابلة للمعلمة الأولى (الطريقة). علامات التبويب ("موجودة" ، نص) تعني استدعاء طريقة وجود Easyui. المعلمة هي نص ، أي تحديد ما إذا كانت علامة التبويب مع نص الاسم موجودة. وبالمثل ، تعني علامات التبويب التالية ("تحديد" ، نص) تحديد علامة التبويب مع نص الاسم لعرضها ، وعلامات التبويب ("إضافة" ، {}) تعني إنشاء علامة تبويب جديدة ، ويتم إضافة بعض خصائص المضافة حديثًا في العلامة التجارية العليا ، ووسائل المحتوى في المكان الذي يتم فيه عرض المحتوى. في وقت لاحق ، يتم تعبئة محتوى الصفحة مع علامة <frame>. لا يمكن الوصول إلى هذه الصفحة مباشرة وإعادة توجيهها من خلال العمل. يمكن رؤيته من اسم الإجراء الذي يتم تقديمه إلى صفحة الويب/الفئة/Query.jsp. إذا كتبنا شيئًا عرضيًا في علامة الجسم على الصفحة ، ثم انقر فوق شريط القائمة على اليسار ، فسيتم عرض المحتوى في علامة التبويب اليمنى. على النحو التالي:
أخيرًا ، ضع الكود في Aindex.jsp هنا:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01> en en" {العرض: 60px ؛ /*الحدود: 1px الصلبة الأحمر ؛*/} #Menu ul {style-style: none ؛ الحشو: 0px ؛ الهامش: 0px ؛ } #menu ul li {border-bottom: 1px solid #fff ؛ } #menu ul li a { /*قم بتحويل العلامة إلى عنصر على مستوى الكتلة أولاً لتعيين العرض والتباعد الداخلي* / display: block ؛ خلفية اللون: #00a6ac ؛ اللون: #fff ؛ الحشو: 5 بكسل ؛ تدمير النص: لا شيء ؛ } #menu ul li a: hover {background-color: #008792 ؛ } </style> <script type = "text/javaScript"> $ (function () {$ ("a [title]"). انقر فوق (function () {var text = $ (this) .text () ؛ var href = $ (this) .attr ("title") ؛ $ ("#tt"). علامات تبويب ("حدد" ، نص) ؛ العنوان ، هو فقط جزء من الجسم //href :'send_category_query. }) ؛ </script> </head> <body> <div-reptions = "المنطقة:" الشمال "، العنوان:" مرحبًا بك في إدارة Yigou Backend "، تقسيم: TRUE" style = "Hight: 100px ؛"> </viv> <div-reptions = "region:" WEST "، العنوان:" عملية النظام "، تقسيم: <div data -ptions = "iconcls: 'icon-save'"> <ul> <li> <a href = "#"> إدارة الفئة </a> <li> <a href = "#"> إدارة المنتجات </a> </ul> </uliv> <div- options = "iconcls:" icon-reload '> الإدارة </a> <li> <a href = "#"> إدارة المنتجات </a> </ul> </viv> </viv> </viv> <div-options-ptions = "region:" center '، title: "backend operation page'" "style =" padding: 1px ؛ يتم عرض معلومات النظام المقابلة في المستقبل (نوع نظام التشغيل الحالي ، اسم المجال للمشروع الحالي ، التكوين المتعلق بالأجهزة أو تقرير العرض </div> </viv> </viv> </body> </html> من الواضح أنه لم يتم استخراج الرمز ، ويتم خلط CSS و JS في نفس صفحة JSP. لا يهم ، سيتم استخلاصه معًا لاحقًا.
حتى الآن ، أكملنا تنفيذ قائمة Easyui. لقد أكملنا هنا فقط طريقة التنفيذ ، وسيتم تحسين المحتوى المعروض المحدد وفقًا للاحتياجات المحددة.
عنوان تنزيل رمز المصدر للمشروع بأكمله: //www.vevb.com/article/86099.htm
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51297705
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.