في الآونة الأخيرة ، قمت بعمل مشروع ، بما في ذلك صفحة القائمة. لتجربة المستخدم ، يتم تنفيذ جميع العمليات باستخدام JS ، والتي تتضمن وظائف مثل التحرك لأعلى ، والانتقال ، والحذف ، وما إلى ذلك في القائمة. استخدم JS في الواجهة الأمامية ، وتعديل البيانات الخلفية AJAX. يتحدث هذا المقال بشكل أساسي عن قسم JS في الواجهة الأمامية.
دعونا نلقي نظرة على لقطة الشاشة للصفحة أولاً
ألق نظرة على بنية HTML. بالطبع ، يرتبط هذا بقطع الصورة الأمامية. موظفو البرنامج الخلفي مسؤولون فقط عن كتابة JS الخاصة بهم. سآخذ مشروعنا كمثال وألقي نظرة على HTML التي قطعوها.
<ul> <li> <iv> <viv> <span> </span> <span> المحتوى <em> 1 </em>: </span> <em> 2013 العمل الإضافي. value = "253040" href = "javaScript: ؛ ؛"> <span> تحرك لأسفل </span> </a> <a value = "253040" href = "javaScript: ؛> <span> تحرك لأسفل </span> </a> <a value =" 253040 " href = "javaScript: ؛"> <span> حذف </span> </a> </viv> </li> <li> <iv> <viv> <span> </span> <span> المحتوى <em> 2 </em>: </span> <em> تعليمات للاستخدام. href = "javaScript: ؛"> <span> تحرك لأعلى </span> </a> <a value = "253041" href = "javaScript: ؛ ؛"> <span> تحرك لأسفل </span> </a> <a value = "253041" href = "javaScript: ؛ href = "javaScript: ؛"> <span> delete </span> </a> </viv> </li> <li> <iv> <viv> <span> </span> <span> المحتوى <em> 3 </em>: </span> <em> Master of Zhanzhan.txt </em> </div> 2014/9 9:54: value = "253040" href = "javaScript: ؛"> <span> تحرك لأعلى </span> </a> <a value = "253040" href = "javaScript: ؛ ؛ href = "javaScript: ؛"> <span> حذف </span> </a> </viv> </li> <li> <iv> <viv> <span> </span> <span> المحتوى <em> 4 </em>: </span> <em> مشكلة الفرز. href = "javaScript: ؛"> <span> تحرك لأعلى </span> </a> <a value = "253041" href = "javaScript: ؛ ؛"> <span> تحرك لأسفل </span> </a> <a value = "253041" href = "javaScript: ؛ href = "javaScript: ؛"> <span> حذف </span> </a> </viv> </viv> </li> </ul>
دعنا نلقي نظرة على رمز JS ، والذي يتم تنفيذه بشكل أساسي باستخدام JQ على الطريقة. والسبب هو أن البيانات الموجودة في القائمة ثابتة لأول مرة. عند الفرز ، تصبح البيانات ديناميكية (LIVE). لذلك ، لا يمكن استخدام هذا الهيكل إلا. لنلقي نظرة على الكود.
<script type = "text/ecmascript"> $ (function () {// move $ $ (". (_new.length> 0) {var _temp = _old.html () ؛ _ Old.Empty (). إلحاق (_new.html ()) ؛ _ new.empty (). $ (this) ؛ var _old = self.closest ("li.courselist") ؛ var _new = self.closest ("li.courselist"). التالي ("li") ؛ if (_new.length> 0) {var _temp = _old.html () ؛ _ old.empty (). إلحاق (_new.html ()) ؛ _ new.empty (). إلحاق (_temp) ؛}}) ؛ // delete $ (". clearfix"). self.closest ("li.courselist"). إزالة () ؛}) ؛}) ؛ </script>بعد الجري ، يتم إصدار التأثير. هذا JS لا يكتب طريقة Ajax للتفاعل مع الخلفية. يمكنك أن تقرر وفقًا للوضع المحدد.