← Back to branch summary

~ubuntu-branches/ubuntu/utopic/ubuntu-html5-theme/utopic

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Ubuntu daily release, Alexandre Abreu, Robert Bruce Park, David Barth
  • Date: 2014-02-12 21:47:19 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20140212214719-gtuxobx1jdwlwdr7
Tags: 0.1.2+14.04.20140212.4-0ubuntu1
[ Alexandre Abreu ]
* Fix gallery app (needs more fixing though) and update the css to be
  closer to qml

[ Robert Bruce Park ]
* Make -sdk depend on qtdeclarative5-ubuntu-webapps-api.
* Add python-xlib dependency which is required for AP tests to pass.

[ David Barth ]
* Set the plugin-path to load the pre-built cordova runtime

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/html5-theme/widgets/Toggles.html
29
29
    <title>Ubuntu UI HTML5: Toggles</title>
30
30
    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
31
31
</head>
 
32
 
32
33
<body>
33
 
    <div data-role="page">
34
 
        <header data-role="header">
35
 
            <nav data-role="navbar" class="tabs">
36
 
                <div class="tabs-inner">
37
 
                    <ul data-role="tabs">
38
 
                        <li class="active" data-role="tab">
39
 
                            <a href="#item1">Tab 1</a>
40
 
                        </li>
41
 
                        <li class="inactive" data-role="tab">
42
 
                            <a href="#item2">Tab 2</a>
43
 
                        </li>
44
 
                        <li class="inactive" data-role="tab">
45
 
                            <a href="#item3">Tab 3</a>
46
 
                        </li>
47
 
                    </ul>
48
 
                </div>
49
 
            </nav>
50
 
        </header>
 
34
  <div data-role="mainview">
 
35
    
 
36
    <div data-role="content">
 
37
      
 
38
      <!-- Checkboxes -->
 
39
      
 
40
      <div style="padding-bottom: 40px">
 
41
        <div class="large-font">
 
42
            Checkbox
 
43
          </div>
51
44
 
52
 
        <div data-role="content">
53
45
            <div class="inset">
 
46
              <span  class="medium-font">Unchecked</span>
 
47
                <label>
 
48
                    <input type="checkbox">
 
49
                    <span></span>
 
50
                </label>
 
51
            </div>
 
52
            <div>
 
53
              <span  class="medium-font">Checked</span>
54
54
                <label>
55
55
                    <input type="checkbox" checked="">
56
56
                    <span></span>
57
57
                </label>
58
58
            </div>
59
 
            <div class="inset">
60
 
                <label>
61
 
                    <input type="checkbox">
62
 
                    <span></span>
63
 
                </label>
64
 
            </div>
65
 
            <div class="inset">
66
 
                <label>
67
 
                    <input type="checkbox" checked="" disabled="">
68
 
                    <span></span>
69
 
                </label>
70
 
            </div>
71
 
            <div class="inset">
72
 
                <label>
73
 
                    <input type="checkbox" disabled="">
74
 
                    <span></span>
75
 
                </label>
76
 
            </div>
77
 
            <div class="inset">
78
 
                <label>
 
59
 
 
60
            <div>
 
61
              <span  class="medium-font">Disabled</span>
 
62
              <div class="inset" style="display:inline">
 
63
                <label>
 
64
                  <input type="checkbox" checked="" disabled="">
 
65
                  <span></span>
 
66
                </label>
 
67
              </div>
 
68
              <div class="inset" style="display: inline">
 
69
                <label>
 
70
                  <input type="checkbox" disabled="">
 
71
                  <span></span>
 
72
                </label>
 
73
              </div>
 
74
            </div>
 
75
 
 
76
</div>
 
77
 
 
78
<!-- Switch -->
 
79
 
 
80
<div>
 
81
          <div class="large-font">
 
82
            Switch
 
83
          </div>
 
84
 
 
85
            <div class="inset">
 
86
                <span  class="medium-font">Unchecked</span>
 
87
                <label>
 
88
                    <input type="checkbox" data-type="switch">
 
89
                    <span class="toggle">
 
90
                        <span class="toggle-handle"></span>
 
91
                        <span class="toggle-bg"></span>
 
92
                    </span>
 
93
                </label>
 
94
            </div>
 
95
            <div class="inset">
 
96
                <span  class="medium-font">Checked</span>
 
97
                <label>
79
98
                    <input type="checkbox" data-type="switch" checked="">
80
99
                    <span class="toggle">
81
100
                        <span class="toggle-handle"></span>
83
102
                    </span>
84
103
                </label>
85
104
            </div>
86
 
            <div class="inset">
87
 
                <label>
88
 
                    <input type="checkbox" data-type="switch">
89
 
                    <span class="toggle">
90
 
                        <span class="toggle-handle"></span>
91
 
                        <span class="toggle-bg"></span>
92
 
                    </span>
93
 
                </label>
94
 
            </div>
95
 
            <div class="inset">
96
 
                <label>
97
 
                    <input type="checkbox" data-type="switch" checked="" disabled="">
98
 
                    <span class="toggle">
99
 
                        <span class="toggle-handle"></span>
100
 
                        <span class="toggle-bg"></span>
101
 
                    </span>
102
 
                </label>
103
 
            </div>
104
 
            <div class="inset">
105
 
                <label>
106
 
                    <input type="checkbox" data-type="switch" disabled="">
107
 
                    <span class="toggle">
108
 
                        <span class="toggle-handle"></span>
109
 
                        <span class="toggle-bg"></span>
110
 
                    </span>
111
 
                </label>
112
 
            </div>
 
105
 
 
106
            <div>
 
107
              <span  class="medium-font">Disabled</span>
 
108
 
 
109
              <div class="inset" style="display: inline">
 
110
                <label>
 
111
                  <input type="checkbox" data-type="switch" checked="" disabled="">
 
112
                  <span class="toggle">
 
113
                    <span class="toggle-handle"></span>
 
114
                    <span class="toggle-bg"></span>
 
115
                  </span>
 
116
                </label>
 
117
              </div>
 
118
              <div class="inset" style="display: inline">
 
119
                <label>
 
120
                  <input type="checkbox" data-type="switch" disabled="">
 
121
                  <span class="toggle">
 
122
                    <span class="toggle-handle"></span>
 
123
                    <span class="toggle-bg"></span>
 
124
                  </span>
 
125
                </label>
 
126
              </div>
 
127
            </div>
 
128
</div>
 
129
 
113
130
        </div>
114
131
    </div>
115
132
</body>