Recientemente, hice un proyecto, incluida una página de lista. Para la experiencia del usuario, todas las operaciones se implementan utilizando JS, que incluye funciones como moverse, moverse hacia abajo, eliminar, etc. en la lista. JS front-end, y la modificación de datos de back-end usa AJAX. Este artículo habla principalmente de la sección JS front-end.
Echemos un vistazo a la captura de pantalla de la página primero
Eche un vistazo a su estructura HTML. Por supuesto, esto está relacionado con el corte de imágenes front-end. El personal del programa de back-end solo es responsable de escribir su propia JS. Tomaré nuestro proyecto como ejemplo y echaré un vistazo al HTML que cortaron.
<ul><li><div><div><span></span><span>Content<em>1</em>:</span><em>2013 Overtime Work.txt</em></div><div>2014/9/24 9:54:00</div><div><a value="253040" href="javascript:;"><span>Move up</span></a><a valor = "253040" href = "javascript :;"> <span> mudarse hacia abajo </span> </a> <a value = "253040" href = "javascript :;"> <span> moverse hacia abajo </span> </a> <a value = "253040" href = "javascript :;"> <span> delete </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> content <em> 2 </em>: </span> <em> Instrucciones para uso.txt </em> </div> <div> 2014/9/24 9:54:00 </Div> <Div> <Siv> href = "javaScript :;"> <span> mudarse </span> </a> <a value = "253041" href = "javascript :;"> <span> moverse hacia abajo </span> </a> <a value = "253041" href = "javascript:;"> <Span> mover hacia abajo </span> </a> <a value = "253041" href="javascript:;"><span>Delete</span></a></div></li><li><div><div><span></span><span>Content<em>3</em>:</span><em>Master of Zhanzhan.txt</em></div><div>2014/9/24 9:54:00</div><div><a valor = "253040" href = "javascript:;"> <span> mudarse </span> </a> <a value = "253040" href = "javascript :;"> <span> mover hacia abajo </span> </a> <a value = "253040" href = "javaScript:"> <span> movido hacia abajo </span> </a> <ae> href = "javascript :;"> <span> delete </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> content <em> 4 </em>: </span> <em> shusing Problem.txt </em> </div> <div> 2014/9/24 9:54:00 </siv> <viv> <veal <veal " href = "javaScript :;"> <span> mudarse </span> </a> <a value = "253041" href = "javascript :;"> <span> moverse hacia abajo </span> </a> <a value = "253041" href = "javascript:;"> <Span> mover hacia abajo </span> </a> <a value = "253041" href = "javascript :;"> <span> delete </span> </a> </div> </div> </li> </ul>
Echemos un vistazo al código JS, que se implementa principalmente utilizando el método JQ on. La razón es que los datos en la lista son estáticos por primera vez. Cuando se ordenan, los datos se vuelven dinámicos (en vivo). Por lo tanto, esta estructura solo se puede usar. Echemos un vistazo al código.
<script type = "text/eCMAScript"> $ (function () {// mudarse up $ (". clearfix"). on ("click", ".MoveUpBtn", function () {var self = $ (this); var _old = self.CloSest ("li.CourSelist"); var _new = self.cloSest ("li.Courselist"). prev (""); "li"); (_new.length> 0) {var _temp = _old.html (); _ old.empty (). append (_new.html ()); _ new.empty (). Append (_temp);}}); // Mover downfix "). $ (this); var _old = self.cloSest ("li.courselist"); var _new = self.closest ("li.courselist"). Next ("li"); if (_new.length> 0) {var _temp = _old.html (); _ Old.empty (). append (_new.html ()); _ new.Emty (). Append (_temp);}}); // eliminar $ (". self.Closest ("li.courselist"). remove ();});}); </script>Después de correr, se libera el efecto. Este JS no escribe el método AJAX para interactuar con el fondo. Puede decidir de acuerdo con la situación específica.