Advanced Search

Jquery and uls on the flow

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

Expand | Embed | Plain Text

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.