source: Dev/trunk/src/client/dojox/mobile/tests/test_IconContainer-editable-a11y.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.5 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6        <meta name="apple-mobile-web-app-capable" content="yes"/>
7        <title>Editable Icon Container</title>
8
9        <link href="../themes/common/domButtons/DomButtonRedBadge.css" rel="stylesheet"/>
10        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','IconContainer']"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
12
13        <script type="text/javascript">
14                require([
15                        "dojo/_base/connect",
16                        "dojo/dom",
17                        "dojo/dom-construct",
18                        "dojo/ready",
19                        "dijit/registry",
20                        "dojox/mobile/parser",
21                        "dojox/mobile",
22                        "dojox/mobile/compat",
23                        "dojox/mobile/IconContainer",
24                        "dojox/mobile/ScrollableView"
25                ], function(connect, dom, domConstruct, ready, registry){
26                        function onKeydown(e){
27                                if(e.keyCode == 39 && e.shiftKey){ // right
28                                        var item = registry.getEnclosingWidget(e.target);
29                                        var next = item.getNextSibling();
30                                        if(next){
31                                                domConstruct.place(item.domNode, next.domNode, "after");
32                                                item.domNode.focus();
33                                        }
34                                }else if(e.keyCode == 37 && e.shiftKey){ // left
35                                        var item = registry.getEnclosingWidget(e.target);
36                                        var prev = item.getPreviousSibling();
37                                        if(prev){
38                                                domConstruct.place(item.domNode, prev.domNode, "before");
39                                                item.domNode.focus();
40                                        }
41                                }else if(e.keyCode == 46){ // Delete
42                                        var item = registry.getEnclosingWidget(e.target);
43                                        if(item.deletable){
44                                                widget.deleteItem(item);
45                                        }
46                                }
47                        }
48                        startEdit = function(){
49                                widget.startEdit();
50                        }
51                        endEdit = function(){
52                                widget.endEdit();
53                        }                       
54                        ready(function(){
55                                widget = registry.byId("iconContainer"); // IconContainer widget
56                                connect.connect(widget, "onStartEdit", function(){
57                                        dom.byId("btn1").style.display = "none";
58                                        dom.byId("btn2").style.display = "";
59                                        keyHandler = connect.connect(widget.domNode, "onkeydown", onKeydown);
60                                });
61                                dojo.connect(widget, "onEndEdit", function(){
62                                        dom.byId("btn1").style.display = "";
63                                        dom.byId("btn2").style.display = "none";
64                                        connect.disconnect(keyHandler);
65                                });                             
66                        });
67                });
68        </script>
69
70        <style>
71                .box {
72                        border: 1px solid #A7C0E0;
73                        width: 300px;
74                        height: 250px;
75                        background-image: url(images/widget-bg.png);
76                        background-repeat: no-repeat;
77                        background-color: white;
78                }
79        </style>
80</head>
81<body style="visibility:hidden;">
82        <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
83                <h1 data-dojo-type="dojox.mobile.Heading">Editable Icon Container</h1>
84                <ul id="iconContainer" data-dojo-type="dojox.mobile.IconContainer" data-dojo-props='editable:true, deleteIconTitle:"delete", deleteIconRole:"button"'>
85                        <li id="icon1" data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app1", icon:"images/icon1.png", badge:"55"'><div class="box"></div></li>
86                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app2", icon:"images/icon2.png", deletable:false'><div class="box"></div></li>
87                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app3", icon:"images/icon3.png"'><div class="box"></div></li>
88                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app4", icon:"images/icon4.png"'><div class="box"></div></li>
89                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app5", icon:"images/icon5.png"'><div class="box"></div></li>
90                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app6", icon:"images/icon6.png"'><div class="box"></div></li>
91                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app7", icon:"images/icon7.png"'><div class="box"></div></li>
92                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app8", icon:"images/icon8.png"'><div class="box"></div></li>
93                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app9", icon:"images/icon9.png"'><div class="box"></div></li>
94                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app10", icon:"images/icon10.png"'><div class="box"></div></li>
95                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"moveTo", icon:"images/icon1.png", moveTo:"about", transition:"slide"'></li>
96                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"href", icon:"images/icon2.png", href:"test_RoundRectList.html", transition:"slide"'></li>
97                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"url", icon:"images/icon3.png", url:"data/view-sample.html", transition:"slide"'></li>
98                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"url-async", icon:"images/icon4.png", url:"data/view-sample.html", transition:"slide", sync:false'></li>
99                </ul>
100                <button id="btn1" onclick="startEdit();">Start Edit</button>
101                <button id="btn2" onclick="endEdit();" style="display:none;">End Edit</button>
102        </div>
103
104        <div id="about" data-dojo-type="dojox.mobile.View">
105                <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Icon Container", moveTo:"view1"'>About</h1>
106                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">My Phone</h2>
107                <ul data-dojo-type="dojox.mobile.RoundRectList">
108                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'>
109                                Network
110                        </li>
111                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'>
112                                Line
113                        </li>
114                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"1024"'>
115                                Songs
116                        </li>
117                </ul>
118        </div>
119</body>
120</html>
Note: See TracBrowser for help on using the repository browser.