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

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

Added Dojo 1.9.3 release.
File size: 5.8 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 (Remove Confirmation)</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','SimpleDialog','Button']"></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/declare",
16                        "dojo/_base/connect",
17                        "dojo/dom",
18                        "dojo/ready",
19                        "dijit/registry",
20                        "dojox/mobile/parser",
21                        "dojox/mobile",
22                        "dojox/mobile/compat",
23                        "dojox/mobile/IconContainer",
24                        "dojox/mobile/_EditableIconMixin",
25                        "dojox/mobile/SimpleDialog",
26                        "dojox/mobile/Button",
27                        "dojox/mobile/ScrollableView"
28                ], function(declare, connect, dom, ready, registry){
29                        showDialog = function(widget){
30                                dom.byId("dlg_txt").innerHTML = "Are you sure you want to delete " + widget.label + "?";
31                                registry.byId("dlg_confirm").show();                                   
32                        }
33                        hideDialog = function(){
34                                registry.byId("dlg_confirm").hide();           
35                        }
36                        ready(function(){
37                                connect.connect(registry.byId("dlg_btn1"), "onClick", null, function(e){
38                                        hideDialog();
39                                        registry.byId("iconContainer").deleteCurrentIcon();
40                                });
41                                connect.connect(registry.byId("dlg_btn2"), "onClick", null, function(e){
42                                        hideDialog();
43                                });
44                        });
45
46                        dojox.mobile.EditableIconContainer = declare(
47                                "dojox.mobile.EditableIconContainer",
48                                [dojox.mobile.IconContainer, dojox.mobile._EditableIconMixin],
49                        {
50                                _currentIcon: null,
51                                deleteIconClicked: function(e){
52                                        var item = this._currentIcon = registry.getEnclosingWidget(e.target);
53                                        showDialog(item);
54                                        return false;
55                                },
56                                deleteCurrentIcon: function(){
57                                        if(this._currentIcon){
58                                                this.deleteItem(this._currentIcon);
59                                                this._currentIcon = null;
60                                        }
61                                }
62                        });
63                });
64        </script>
65
66        <style>
67                .box {
68                        border: 1px solid #A7C0E0;
69                        width: 300px;
70                        height: 250px;
71                        background-image: url(images/widget-bg.png);
72                        background-repeat: no-repeat;
73                        background-color: white;
74                }
75        </style>
76</head>
77<body style="visibility:hidden;">
78        <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
79                <h1 data-dojo-type="dojox.mobile.Heading">Icon Container (Remove Confirmation)</h1>
80                <ul id="iconContainer" data-dojo-type="dojox.mobile.EditableIconContainer" data-dojo-props='editable:true'>
81                        <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>
82                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app2", icon:"images/icon2.png", deletable:false'><div class="box"></div></li>
83                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app3", icon:"images/icon3.png"'><div class="box"></div></li>
84                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app4", icon:"images/icon4.png"'><div class="box"></div></li>
85                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app5", icon:"images/icon5.png"'><div class="box"></div></li>
86                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app6", icon:"images/icon6.png"'><div class="box"></div></li>
87                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app7", icon:"images/icon7.png"'><div class="box"></div></li>
88                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app8", icon:"images/icon8.png"'><div class="box"></div></li>
89                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app9", icon:"images/icon9.png"'><div class="box"></div></li>
90                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"app10", icon:"images/icon10.png"'><div class="box"></div></li>
91                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"moveTo", icon:"images/icon1.png", moveTo:"about", transition:"slide"'></li>
92                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"href", icon:"images/icon2.png", href:"test_RoundRectList.html", transition:"slide"'></li>
93                        <li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"url", icon:"images/icon3.png", url:"data/view-sample.html", transition:"slide"'></li>
94                        <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>
95                </ul>
96                <div data-dojo-type="dojox.mobile.RoundRect">
97                        Hold down on one of the icons until they start shaking.
98                </div>
99        </div>
100       
101        <div id="dlg_confirm" data-dojo-type="dojox.mobile.SimpleDialog">
102                <div class="mblSimpleDialogTitle">Remove Confirmation</div>
103                <div id="dlg_txt" class="mblSimpleDialogText">Are you sure you want to remove this app?</div>
104                <button id="dlg_btn1" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" style="width:65px;">Remove</button>
105                <button id="dlg_btn2" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" style="width:65px;">Cancel</button>
106        </div>
107       
108        <div id="about" data-dojo-type="dojox.mobile.View">
109                <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Icon Container", moveTo:"view1"'>About</h1>
110                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">My Phone</h2>
111                <ul data-dojo-type="dojox.mobile.RoundRectList">
112                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'>
113                                Network
114                        </li>
115                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'>
116                                Line
117                        </li>
118                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"1024"'>
119                                Songs
120                        </li>
121                </ul>
122        </div>
123</body>
124</html>
Note: See TracBrowser for help on using the repository browser.