← Back to branch summary

~ubuntu-branches/ubuntu/trusty/ubuntu-html5-theme/trusty-proposed

« back to all changes in this revision

Viewing changes to examples/html5-theme/widgets/OptionSelector.html

  • Committer: Package Import Robot
  • Author(s): Ubuntu daily release, Adnane Belmadiaf, daker, Kyle Nitzsche, Colin Watson, Alexandre Abreu, Ubuntu daily release
  • Date: 2014-01-07 23:46:53 UTC
  • mfrom: (1.1.7)
  • Revision ID: package-import@ubuntu.com-20140107234653-oagvm6guom4h9dvh
Tags: 0.1+14.04.20140107-0ubuntu1
https://launchpad.net/bugs/1241215
https://launchpad.net/bugs/1232533
https://launchpad.net/bugs/1222881
https://launchpad.net/bugs/1223973
https://launchpad.net/bugs/1241215
https://launchpad.net/bugs/1240682
https://launchpad.net/bugs/1246446
https://launchpad.net/bugs/1232533
https://launchpad.net/bugs/1243248
https://launchpad.net/bugs/1243248
https://launchpad.net/bugs/1241029
https://launchpad.net/bugs/1235321
[ Adnane Belmadiaf ]
* s/parentNode/parendNode Spaces instead of tabs. (LP: #1241215)
* Add option selector widget. (LP: #1232533)

[ daker ]
* Passe the UI variable name so we will not lock the variable. (LP:
  #1222878)
* Made variable declaration locale. (LP: #1222881)
* Fixed z-index for the list items aside. (LP: #1223973)
* s/parentNode/parendNode Spaces instead of tabs. (LP: #1241215)
* Space instead of tab. (LP: #1240682)
* Made list items with headers differentes. (LP: #1246446)
* Updated the progressbar component to match the design.
* Move tabs closer to what they should be, Expand API to match the QML
  one (at least at the Tabs level), .
* Add option selector widget. (LP: #1232533)

[ Kyle Nitzsche ]
* Add button id to "Invalid button ID" error message .
* This MR does three main things: 1) Implements yuidoc comments in all
  js files to support API doc generation, and provides yuidoc assets
  (theme dir and json file) needed to build the API docs. Bug LP:
  #1241029 3) Provides JS classes for shape and page with
  corresponding UbuntuUI prototype constructor functions. Bug LP:
  #1243248 4) Adds a getEl(UbuntuUIObject) to return the element for
  any Ubuntu class. Also LP: #1243248. (LP: #1243248, #1241029)

[ Colin Watson ]
* Make ubuntu-html5-theme Multi-Arch: foreign.

[ Alexandre Abreu ]
* Fix exec path in app-gallery app desktop file. (LP: #1235321)
* Add convenient element() function to most widgets ... (we might want
  to factor those out in a second step).
* Move tabs closer to what they should be, Expand API to match the QML
  one (at least at the Tabs level), .
* Add HTML5 webapp container package.

[ Ubuntu daily release ]
* Automatic snapshot from revision 98

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/html5-theme/widgets/OptionSelector.html
 
1
<!--
 
2
 Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
 
3
 License granted by Canonical Limited
 
4
 
 
5
 This file is part of ubuntu-html5-theme.
 
6
 
 
7
 This package is free software; you can redistribute it and/or modify
 
8
 it under the terms of the GNU Lesser General Public License as
 
9
 published by the Free Software Foundation; either version 3 of the
 
10
 License, or
 
11
 (at your option) any later version.
 
12
 
 
13
 This package is distributed in the hope that it will be useful,
 
14
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 
15
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
16
 GNU General Public License for more details.
 
17
 
 
18
 You should have received a copy of the GNU Lesser General Public
 
19
 License along with this program. If not, see
 
20
 <http://www.gnu.org/licenses/>.
 
21
-->
 
22
 
 
23
<!DOCTYPE html>
 
24
<html>
 
25
<head>
 
26
    <meta charset="utf-8" />
 
27
    <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
 
28
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
29
    <title>Ubuntu UI HTML5 Theme: ListItems</title>
 
30
    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
 
31
    <!-- Ubuntu UI javascript imports - Ambiance theme -->
 
32
    <script src="../../../0.1/ambiance/js/option-selector.js"></script>
 
33
    <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
 
34
    <script src="../../../0.1/ambiance/js/core.js"></script>
 
35
    <script src="../../../0.1/ambiance/js/pagestacks.js"></script>
 
36
    <script>
 
37
        var UI = new UbuntuUI();
 
38
        window.onload = function() {
 
39
            UI.init();
 
40
            os1 = UI.optionselector('os1');
 
41
 
 
42
            os1.onClicked(function (e) {
 
43
                console.log("optionselector1 values: " + e.values);
 
44
            })
 
45
 
 
46
            os2 = UI.optionselector('os2', expanded=false, multiSelection=true);
 
47
 
 
48
            os2.onClicked(function (e) {
 
49
                console.log("optionselector2 values: " + e.values);
 
50
            })
 
51
 
 
52
            os3 = UI.optionselector('os3', expanded=true, multiSelection=false);
 
53
 
 
54
            os3.onClicked(function (e) {
 
55
                console.log("optionselector3 values: " + e.values);
 
56
            })
 
57
        };
 
58
    </script>
 
59
</head>
 
60
<body>
 
61
    <div data-role="page">
 
62
        <header data-role="header">
 
63
            <nav data-role="navbar" class="tabs">
 
64
                <div class="tabs-inner">
 
65
                    <ul data-role="tabs">
 
66
                        <li class="active" data-role="tab">
 
67
                            <a href="#item1">Tab 1</a>
 
68
                        </li>
 
69
                        <li class="inactive" data-role="tab">
 
70
                            <a href="#item2">Tab 2</a>
 
71
                        </li>
 
72
                        <li class="inactive" data-role="tab">
 
73
                            <a href="#item3">Tab 3</a>
 
74
                        </li>
 
75
                    </ul>
 
76
                </div>
 
77
            </nav>
 
78
        </header>
 
79
 
 
80
        <div data-role="content">
 
81
            <div class="inset" style="margin: 15px;">
 
82
                <h1>Collapsed</h1>
 
83
                <section data-role="option-selector" id="os1">
 
84
                    <ul>
 
85
                        <li data-value="0">
 
86
                            <aside>
 
87
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
 
88
                            <p>Label 1</p>
 
89
                        </li>
 
90
                        <li data-value="1">
 
91
                            <aside>
 
92
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
 
93
                            <p>Label 2</p>
 
94
                        </li>
 
95
                        <li data-value="3">
 
96
                            <aside>
 
97
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
 
98
                            <p>Label 3</p>
 
99
                        </li>
 
100
                        <li data-value="4">
 
101
                            <aside>
 
102
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
 
103
                            <p>Label 4</p>
 
104
                        </li>
 
105
                        <li data-value="5">
 
106
                            <aside>
 
107
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
 
108
                            <p>Label 5</p>
 
109
                        </li>
 
110
                    </ul>
 
111
                </section>
 
112
            </div>
 
113
            <div class="inset" style="margin: 15px;">
 
114
                <h1>Expanded with a multiple selections</h1>
 
115
                <section data-role="option-selector" id="os2">
 
116
                    <ul>
 
117
                        <li data-value="0">
 
118
                            <p>Label 1</p>
 
119
                            <p>Subtext 1</p>
 
120
                        </li>
 
121
                        <li data-value="1">
 
122
                            <p>Label 2</p>
 
123
                            <p>Subtext 2</p>
 
124
                        </li>
 
125
                        <li data-value="3">
 
126
                            <p>Label 3</p>
 
127
                            <p>Subtext 3</p>
 
128
                        </li>
 
129
                        <li data-value="4">
 
130
                            <p>Label 4</p>
 
131
                            <p>Subtext 4</p>
 
132
                        </li>
 
133
                        <li data-value="5">
 
134
                            <p>Label 5</p>
 
135
                            <p>Subtext 5</p>
 
136
                        </li>
 
137
                    </ul>
 
138
                </section>
 
139
            </div>
 
140
            <div class="inset" style="margin: 15px;">
 
141
                <h1>Expanded with a unique selection</h1>
 
142
                <section data-role="option-selector" id="os3">
 
143
                    <ul>
 
144
                        <li data-value="0">
 
145
                            <p>Label 1</p>
 
146
                        </li>
 
147
                        <li data-value="1">
 
148
                            <p>Label 2</p>
 
149
                        </li>
 
150
                        <li data-value="3">
 
151
                            <p>Label 3</p>
 
152
                        </li>
 
153
                        <li data-value="4">
 
154
                            <p>Label 4</p>
 
155
                        </li>
 
156
                        <li data-value="5">
 
157
                            <p>Label 5</p>
 
158
                        </li>
 
159
                    </ul>
 
160
                </section>
 
161
            </div>
 
162
        </div>
 
163
    </div>
 
164
</body>
 
165
</html>
 
 
b'\\ No newline at end of file'