| author | Eugene Ostroukhov <eugeneo@symbian.org> |
| Thu, 15 Jul 2010 10:08:51 -0700 | |
| changeset 450 | ed815e0eef9a |
| parent 229 | 716254ccbcc0 |
| permissions | -rw-r--r-- |
|
229
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
1 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
2 |
<!DOCTYPE html |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
3 |
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
4 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Creating touch controls"/><meta name="abstract" content="When you design screen controls for touch-enabled devices, make them big enough to select with a finger."/><meta name="description" content="When you design screen controls for touch-enabled devices, make them big enough to select with a finger."/><meta name="DC.Relation" scheme="URI" content="GUID-EE119DD2-C37A-473C-B428-21408867D583"/><meta name="DC.Relation" scheme="URI" content="GUID-63F9FB97-9A0D-4DE4-A645-F3DB7DC39716"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-6DD2B3D2-BA3B-4936-BBC9-F61B6757B6F8"/><meta name="DC.Relation" scheme="URI" content="GUID-13E2DE63-47E5-4E2A-85FF-C8B0CAB9D4DE"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-CCB9E780-C759-45B2-BBC8-7FAE2102C39F"/><meta name="DC.Language" content="en"/><title>Creating touch controls </title><script type="text/javascript"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
5 |
function initPage() {}
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
6 |
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-CCB9E780-C759-45B2-BBC8-7FAE2102C39F">Creating touch controls</h1><div><p>When you design screen controls for touch-enabled devices, make them big enough to select with a finger.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
7 |
<div><h3>Specifying text box size</h3><p>Specify text box size in a CSS file.</p><pre class="codeblock">.input_container input {
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
8 |
width: 100%; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
9 |
height: 45px; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
10 |
... |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
11 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
12 |
} |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
13 |
</pre></div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
14 |
<div><h3>Creating touch buttons</h3><p>Create <em>clickable</em> HTML elements and make them big enough to select with a finger. Add a JavaScript <code>onClick</code> handler to the buttons to make them clickable. </p><p>For example, the following code creates two arrow buttons that users can press to change views.</p><pre class="codeblock"><div id="navigationLeft" class="navigationBar"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
15 |
<img id="arrowLeft" src="gfx/arrow_left.png" alt="Previous day" onclick="navigationArrowClicked('left');" />
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
16 |
</div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
17 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
18 |
<div id="navigationRight" class="navigationBar"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
19 |
<img id="arrowRight" src="gfx/arrow_right.png" alt="Next day" onclick="navigationArrowClicked('right');" />
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
20 |
</div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
21 |
</pre><div class="figure" id="GUID-65ABE967-E2CF-485A-AAE4-E1FE1D537176"><img src="GUID-AFFB2140-ABEF-4E7D-893B-B4CC8912C85F_d0e3745_href.jpg"/><p class="figure-title"><strong>Figure: </strong>Arrow buttons</p></div><p>You can also create custom controls. For more information, see <a href="GUID-EE119DD2-C37A-473C-B428-21408867D583.html#GUID-EE119DD2-C37A-473C-B428-21408867D583">Customizing screen controls</a>.</p></div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
22 |
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |