Sign in to follow this  
greencoder

Scrollable table with selectable rows - how to approach?

Recommended Posts

Screenshot/example of what you're trying to achieve?

Are you meaning like a default HTML scrollbars, or some custom-game UI scrollbar?

(I'd tend to stay away from mixing HTML elements on a canvas.. I assume it's possible, but might get messy)

 

Share this post


Link to post
Share on other sites

In the past I have implemented some sort of scrolling mechanism. Before you start implementing one, you must realize that Panda isn't the best environment for scrollable UI elements.

Your best approach is probably to use swipe 'UP'  and swipe 'DOWN' to move a custom container up and down. In this container you can put your data rows and customize them as needed. A small code snippet from my implementation:

 

game.createClass('YourContainer', 'Container', {

  init: function(){
    //add your data rows
  },

  //.....
  
  swipe: function(dir) {

    if (dir === 'DOWN') {
      if(this.tweenSwipe) this.tweenSwipe.stop();
      var yTo = this.position.y + 120;
      if(yTo>this.h - game.height) yTo = this.h - game.height;
      this.tweenSwipe = new game.Tween(this.position);
      this.tweenSwipe.to({y: yTo}, 500);
      this.tweenSwipe.easing('Quadratic.InOut');
      this.tweenSwipe.start();
    }
    else if (dir === 'UP'){
      if(this.tweenSwipe) this.tweenSwipe.stop();
      var yTo = this.position.y - 120;
      if(yTo < 0) yTo = 0;
      this.tweenSwipe = new game.Tween(this.position);
      this.tweenSwipe.to({y: yTo}, 500);
      this.tweenSwipe.easing('Quadratic.InOut');
      this.tweenSwipe.start();    }
  },

});

 

 

 

Share this post


Link to post
Share on other sites

Thanks for the code snippet, I shall try that. I have been working on a system of my own, let me see whether I can reach to it. In the mean time, how do you deal with the mask? I am quite stuck in how to organize the layers to show the rows only in the table. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.