Jquery and uls on the flow


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(document).ready( function () {
  2.  
  3. buttonUp = "<a class='moveup' ><img src='img/go-up.png' /></a>";
  4. buttonDown = "<a class='movedown' ><img src='img/go-down.png' /></a>";
  5. buttonLeft = "<a class='moveleft' '><img src='img/go-previous.png' /></a>";
  6. buttonRight = "<a class='moveright' '><img src='img/go-next.png' /></a>";
  7.  
  8.  
  9. $('a.moveup').bind("click", Move.up);
  10. $('a.movedown').bind("click", Move.down);
  11. $('a.moveleft').bind("click", Move.left);
  12. $('a.moveright').bind("click", Move.right);
  13.  
  14.  
  15. });
  16.  
  17. Move = {
  18. left: function() {
  19. ThisNode = $("../..",this);
  20. OtherNode = $("../../../..",this);
  21.  
  22. ThisNode.slideUp(100);
  23. ThisNode.slideDown(300);
  24.  
  25. ThisNode.find(".icons").append(buttonRight).end();
  26. ThisNode.find(".moveleft").remove().end();
  27. ThisNode.find(".moveright").click(Move.right).end();
  28. OtherNode.after(ThisNode);
  29.  
  30. return false;
  31. },
  32.  
  33. right: function() {
  34. ThisNode = $("../..",this);
  35.  
  36. if ( ThisNode.next().find("ul").size() ) {
  37. $("../..",this).next().find("ul/li:last").after($("../..",this));
  38. }
  39.  
  40. else {
  41. $("../..",this).next().append("<ul class='sortable sortable2'><li class='sortableitem'>foo</li></ul>");
  42. /* nor works this one
  43.   $("../..",this).next().append("<ul></ul>").append("<li></li>");
  44.   */
  45.  
  46. }
  47.  
  48. ThisNode.find(".icons").append(buttonLeft).end();
  49. ThisNode.find(".moveright").remove().end();
  50. ThisNode.find(".moveleft").click(Move.left).end();
  51.  
  52. return false;
  53. },
  54.  
  55. down: function() {
  56. ThisNode = $("../..",this);
  57. OtherNode = $("../..",this).next();
  58.  
  59. ThisNode.hide(80);
  60. OtherNode.hide(200);
  61. ThisNode.before(OtherNode);
  62. ThisNode.show(200);
  63. OtherNode.show(300);
  64.  
  65. return false;
  66. },
  67.  
  68. up: function() {
  69.  
  70. ThisNode = $("../..",this);
  71. OtherNode = $("../..",this).prev();
  72.  
  73. ThisNode.hide(100);
  74. OtherNode.hide(300);
  75. ThisNode.after(OtherNode);
  76. ThisNode.show(300);
  77. OtherNode.show(400);
  78.  
  79. return false;
  80. }
  81. }

URL: http://xcite-online.de/tests/jquery1/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.