Template dhtmlx touch

Layout is created by dhx. If you need to arrange elements vertically one by one, use rows. The Layout structure for our menu interface will be:. However, we need the left column to be more narrow than the right one. Also, height of the rows in the left column should be different. Therefore, we need to define the sizes manually. We will initialize Layout from the dhx. To display menu categories on the left part of the page, we can use any of the following components we also call them views :.

In our example we will load the data from XML files. Here is the snippet of XML for menu categories:. These settings will differ from the default ones, so we should define a new item type for DataView. To add a new item type to the DataView, we need to use dhx.

Type method and pass two parameters: component class and object with type properties. Finally, we can move to the dataview style.

We have defined how data properties are represented in the menu template, but we also need to set a background color and rounded borders for dataview items. Besides, selected and unselected items should have different styles:. As well as in case of menu categories, we can choose between DataView, List and PageList to display menu items on the right. It means, if user scrolls through the items, the scroll will stop and display the full view of the item.

There are three parameters for each menu item: image, name, and description. Ordering features will be implemented in the last steps when the menu is associated with the order section. A menu item will look like this:.

We need to set the following properties:. Therefore, we will need to define CSS classes for the List. Therefore, we need to redefine background for the list items, and set additional background for selected items.

Our menu application will be mostly adjusted to iPad screen size. I have tried the CSS properties you comment in other threads overflow: scroll; -webkit-overflow-scrolling: touch; , without results. So I changed the iframe a template to use the scroll, as in this example dhtmlx.

Scroll inside iframe depends on native platform capabilities. Touch library do not interfere with it in any way. From our experience - it means that scroll do not work on many devices. It must not matter. While server side returns correct html data - there will not be difference, is it generated by php script or just a plain html file.

It's not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms. You can define an object with properties, some of which are objects or arrays of objects, and some are simple strings or numbers. This way you can pass data into components or nest components one into another.

You can combine the existing component and functionality blocks with each other, or with custom code blocks, to create new components, or extend the existing ones.

Global data storage is an advanced and useful feature that allows keeping relations between data elements e. This feature provides automatical update of data across UI elements without user intersection. For example, user changes an employee name in the details form and gets this name updated in the list of employees automatically. You can also write your own server-side code.