Swipe side menu

Discontinued products DHTMLX Touch
#1

Has anyone managed to create a side menu that is initially hidden and then swiped in as in the menu in the Facebook app?

#2

Hello,

you can use Multiview for swipe menu:
dhtmlxTouch_v12_120913/samples/01_views/10_multiview_animations.html
It can be Multiview with two cells: 1) list with menu options, 2) main view. You can show menu (list view) by tapping a list button in the navigation bar for example. And hide menu on swipe or on button tap. Here is how to set swipe event handler for some view:

$$("viewId").attachEvent("onSwipeX",function(prevState,curState){ if(prevState.x>curState.x){ // drag left } else{ // drag right } })

#3

Thanks Alexandra, I’ll have a go and let you know how I get on.

#4

This works ok but doesn’t give quite the look and feel that my customer requires - ie, they want the menu to slide in half way across the screen pushing the screen contents off to the right. Would the layout component be a better option?

#5

Hello,

they want the menu to slide in half way across the screen pushing the screen contents off to the right

Unfortunately, there is not such a ready solution (

Would the layout component be a better option?

Layout with hidden view won’t allow to use animation.

#6

Thanks, it works fine but the lack of animation is disappointing - are there any plans to add this in the future?

#7

Hi,

“Swipe side” menu is very interesting feature. Therefore, we are going to add it.

#8

hi,

Is this issue solved?

I need to use it on my app…

Until now, i did what you said to groobie but it is not enough for a confortable navigation…

thanks!!

greetings!

#9

I almost get it!!

In my opinion is that the onswipex is attached to the list and it should be attached to a layout to if possible…that should be great!!

greetings!

#10

To a layout cell i meant…

Thanks!

#11

Layout does not provide Event support. However, you may to use the following approach:

  • create a new view based on “layout” view with dhx.EventSystem module added:

dhx.protoUI({ name:"eventlayout", },dhx.EventSystem,dhx.ui.layout);

  • then set view: “eventlayout” for the layouts that you want to attach an event to.

dhx.ui({ view: "eventlayout", id: "swipeLayout", cols:[...] }); $$("swipeLayout").attachEvent("onSwipeX",function(start,end){ /* your code here */ });

#12

hi Alexandra,

it does not work for me…unless the view inside the cell layout was a list…

the event attached to a layout is not fired…

here it goes my code…hope it helps…

thanks!!
test.rar (118 KB)

#13

Hi,

onSwipe happens only for views with scroll.

You may try to put the main layout into “scrollview”:

_indexUI.configMobile = { type:"clean", view: "scrollview", body: { id: "indexLayOut", cols: [...] } };

But again, there will be an issue with iframes. The library does not listen to events inside iframes.

#14

Perfect!! thanks Alexandra!