2
Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
3
License granted by Canonical Limited
5
This file is part of ubuntu-html5-theme.
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
11
(at your option) any later version.
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.
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/>.
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: Popovers</title>
30
<link href="../../ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
31
<script src="../../ambiance/js/core.js"></script>
32
<script src="../../ambiance/js/fast-buttons.js"></script>
33
<script src="../../ambiance/js/buttons.js"></script>
34
<script src="../../ambiance/js/popovers.js"></script>
37
<div data-role="page">
38
<header data-role="header">
39
<nav data-role="navbar" class="tabs">
40
<div class="tabs-inner">
42
<li class="active" data-role="tab">
43
<a href="#item1">Tab 1</a>
45
<li class="inactive" data-role="tab">
46
<a href="#item2">Tab 2</a>
48
<li class="inactive" data-role="tab">
49
<a href="#item3">Tab 3</a>
56
<div data-role="content">
57
<div class="inset" style="margin-top: 250px;text-align: center">
59
<a data-role="button" id ="button1" href="#popover1">Open</a>
61
<a data-role="button" id ="button2" href="#popover2">Open</a>
63
<a data-role="button" id ="button3" href="#popover3">Open</a>
65
<a data-role="button" id ="button4" href="#popover4">Open</a>
67
<div id="popover1" class="popover" data-gravity="n" style="margin-bottom: 30px">
69
<li><a href="#">Item1</a></li>
70
<li class="active"><a href="#">Item2</a></li>
71
<li><a href="#">Item3</a></li>
72
<li><a href="#">Item4</a></li>
73
<li><a href="#">Item5</a></li>
74
<li><a href="#">Item6</a></li>
78
<div id="popover2" class="popover" data-gravity="s" style="margin-bottom: 30px">
87
<div id="popover3" class="popover" data-gravity="e" style="margin-bottom: 30px">
96
<div id="popover4" class="popover" data-gravity="w" style="margin-bottom: 30px">
107
<script type="text/javascript">
108
var UI = new UbuntuUI();
109
UI.button('button1').click(function (e) {
110
UI.popover(this, 'popover1').toggle();
112
UI.button('button2').click(function (e) {
113
UI.popover(this, 'popover2').toggle();
115
UI.button('button3').click(function (e) {
116
UI.popover(this, 'popover3').toggle();
118
UI.button('button4').click(function (e) {
119
UI.popover(this, 'popover4').toggle();