Tablet Programming Tips"

From Documentation
m (Init edit.)
 
Line 13: Line 13:
 
== Different Style ==
 
== Different Style ==
 
End-user can only operate tablet by fingers, so the size of clickable components (like button) can't be too small, 24*24px is the limitation. On the other hand, if component's size is small, the spacing between components must be bigger, such that prevent end-user click neighbor component carelessly. According to this principle, ZK adjust related components (eg: <tt>Combobox</tt>, <tt>Timebox</tt> and <tt>Colorbox</tt>)  developer can use them on tablet directly. For more detail, please read [[ZK_Component_Reference/Tablet_Devices/UI_Enhancements|UI Enhancements]].
 
End-user can only operate tablet by fingers, so the size of clickable components (like button) can't be too small, 24*24px is the limitation. On the other hand, if component's size is small, the spacing between components must be bigger, such that prevent end-user click neighbor component carelessly. According to this principle, ZK adjust related components (eg: <tt>Combobox</tt>, <tt>Timebox</tt> and <tt>Colorbox</tt>)  developer can use them on tablet directly. For more detail, please read [[ZK_Component_Reference/Tablet_Devices/UI_Enhancements|UI Enhancements]].
 +
 +
Besides, if <tt>Image</tt> or <tt>Div</tt> add <tt>onClick</tt> property, developer must add CSS <tt>cursor: pointer;</tt> in <tt>sclass</tt> or <tt>style</tt>, thus tablet browser will trigger <tt>onClick</tt>.
  
 
=== Mold Unsupport ===
 
=== Mold Unsupport ===

Revision as of 06:40, 20 September 2012

WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


Tablet Programming Tips

Author
Monty Pan, Engineer, Potix Corporation
Date
September, 20, 2012
Version
ZK 6.5

Introduction

After ZK 6.5 release, developer can use ZK to create a smooth web site for tablet. Because the hardware difference between tablet and PC, we must adjust the thinking method of design to look after both tablet and desktop and provide good user experience. This article is base on ZK 6.5, discuss the detail developer must know.

Different Style

End-user can only operate tablet by fingers, so the size of clickable components (like button) can't be too small, 24*24px is the limitation. On the other hand, if component's size is small, the spacing between components must be bigger, such that prevent end-user click neighbor component carelessly. According to this principle, ZK adjust related components (eg: Combobox, Timebox and Colorbox) developer can use them on tablet directly. For more detail, please read UI Enhancements.

Besides, if Image or Div add onClick property, developer must add CSS cursor: pointer; in sclass or style, thus tablet browser will trigger onClick.

Mold Unsupport

On desktop, many components provide two or more molds to change style or behavior, but with operation and inapplicability reason, ZK does not support this mold on tablet. The detail list can refer to Unsupported Molds. In one word:

  • component about input: does not support rounded mold.
  • Button: does not support os and trendy molds.
  • Groupbox: does not support default mold, will use 3d as default mold.
  • Splitter: does not support os mold.
  • Tabbox: does not support accordion-lite mold.

Different Event

Mouse Event

ClientInfoEvent

Other Scrolling Issue

As Simple as Possible

Conclusion