source: Dev/trunk/src/client/dojox/mobile/tests/test_pageTurningUtils-add-remove.html

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

Added Dojo 1.9.3 release.
File size: 4.3 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
5        <meta name="apple-mobile-web-app-capable" content="yes" />
6        <title>Page Turning</title>
7        <link href="../themes/common/PageTurning.css" rel="stylesheet">
8        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
9        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
10
11        <script type="text/javascript">
12                require([
13                        "dojo/dom",
14                        "dojo/dom-construct",
15                        "dojo/ready",
16                        "dojox/mobile/pageTurningUtils",
17                        "dojox/mobile/parser",
18                        "dojox/mobile",
19                        "dojox/mobile/compat"
20                ], function(dom, domConstruct, ready, pageTurningUtils){
21                        utils = new pageTurningUtils();
22                       
23                        ready(function(){
24                                // Set property values to pageTurningUtils object
25                                utils.init(285, 388, "top", 2);
26                               
27                                // Initialize catalog node
28                                utils.initCatalog(dom.byId("catalog"));
29                        });
30                       
31                        prev = function(){
32                                utils.turnToPrev();
33                        };
34                       
35                        next = function(){
36                                utils.turnToNext();
37                        };
38                       
39                        var count = 0;
40                        var createNewPageNode = function(){
41                                count++;
42                                var page = domConstruct.create("div", null);
43                                page.innerHTML = '<div id="newfront' + count + '" class="myPane">'
44                                                                        + '<h1>New Page' + count + '</h1>'
45                                                                + '</div>'
46                                                                + '<div id="newback' + count + '"></div>';
47                                return page;
48                        };
49                       
50                        add = function(){
51                                var value = dom.byId("input_add").value,
52                                        index = value ? value - 0 : -1,
53                                        pages = utils.getPages(),
54                                        page = createNewPageNode();
55                                if(index >= 0 && index < pages.length){
56                                        domConstruct.place(page, pages[index], "before");
57                                }else{
58                                        // Place to last
59                                        domConstruct.place(page, dom.byId("catalog"));
60                                }
61                               
62                                // Initialize a new page
63                                utils.initPage(page);
64                               
65                                // Reset catalog
66                                utils.resetCatalog();
67                        };
68                       
69                        remove = function(){
70                                var value = dom.byId("input_remove").value,
71                                        index = value ? value - 0 : -1,
72                                        pages = utils.getPages();
73                                if(index >= 0 && index < pages.length){
74                                        domConstruct.destroy(pages[index]);
75                                }
76                               
77                                // Reset catalog
78                                utils.resetCatalog();
79                        };
80                });
81        </script>
82        <style type="text/css">
83                .myPane {
84                        background-image: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFFFFF));
85                        font-family: Times New Roman, Helvetica;
86                        color: black;
87                }
88        </style>
89</head>
90<body style="visibility:hidden;">
91        <div id="view1" data-dojo-type="dojox.mobile.View">
92                <h1 data-dojo-type="dojox.mobile.Heading">Page Turning</h1>
93                <table>
94                        <tr><td><input type="button" onclick="add()" value="Add" style="width:50px"></td><td>index: <input id="input_add" style="width:20px;text-align:right" value=""></td></tr>
95                        <tr><td><input type="button" onclick="remove()" value="Remove" style="width:50px"></td><td>index: <input id="input_remove" style="width:20px;text-align:right" value=""></td></tr>
96                </table>
97                <div style="margin:5px;">
98                        <button onclick="prev()" style="width:50px">Prev</button>
99                        <button onclick="next()" style="width:50px">Next</button>
100                </div>
101                <div id="msgArea" style="margin:10px;">onPageTurned: </div>
102                <div id="catalog" style="margin:10px;">
103                        <div id="page1">
104                                <img alt="" id="front1" src="images/pic1.jpg"/>
105                                <div id="back1"></div>
106                        </div>
107                        <div id="page2">
108                                <img alt="" id="front2" src="images/pic2.jpg"/>
109                                <div id="back2"></div>
110                        </div>
111                        <div id="page3">
112                                <img alt="" id="front3" src="images/pic3.jpg"/>
113                                <div id="back3"></div>
114                        </div>
115                        <div id="page4">
116                                <img alt="" id="front4" src="images/pic4.jpg"/>
117                                <div id="back4"></div>
118                        </div>
119                        <div id="page5">
120                                <img alt="" id="front5" src="images/pic5.jpg"/>
121                                <div id="back5"></div>
122                        </div>
123                        <div id="page6">
124                                <img alt="" id="front6" src="images/pic6.jpg"/>
125                                <div id="back6"></div>
126                        </div>
127                        <div id="page7">
128                                <img alt="" id="front7" src="images/pic7.jpg"/>
129                                <div id="back7"></div>
130                        </div>
131                        <div id="page8">
132                                <img alt="" id="front8" src="images/pic8.jpg"/>
133                                <div id="back8"></div>
134                        </div>
135                        <div id="page9">
136                                <img alt="" id="front9" src="images/pic9.jpg"/>
137                                <div id="back9"></div>
138                        </div>
139                        <div id="page10">
140                                <img alt="" id="front10" src="images/pic10.jpg"/>
141                                <div id="back10"></div>
142                        </div>
143                </div>
144        </div>
145</body>
146</html>
Note: See TracBrowser for help on using the repository browser.