index.html
6.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Examples of Bubble widget</title>
<link rel="stylesheet" type="text/css" href="css/bubble.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="bubble.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<p>Drag any of these boxes anywhere on the screen, and then mouse into it to see
Bubble position and info for that box. To dismiss the bubble, click anywhere outside the
bubble or click the bubble's dismiss icon. The bubble will auto-dismiss 2 seconds
after moving the mouse off the bubble or the associated target.</p>
<p>Bubbles that have the "editable" option set to true will show an edit icon in the header.
When clicked, the bubble title and content will each display in a textarea for editting.
Clicking the icon when in edit mode will returns the bubble to normal mode with the changes
applied. Changes from edit mode can be cancelled by dismissing the bubble via the dismiss
icon or clicking anywhere outside the bubble. The bubble title is text-only, the content
can be HTML markup.</p>
<!-- This example shows a bubble that is specifically positioned and overrides the default
policy on positioning. Since the bubble container is a child of the target, it can be
positioned relative to the target.
-->
<div id="target1" data-bubbleid="target1Bubble"
style="position:absolute; margin-top:10px; left:500px; width:50px; height:50px; background-color:red; cursor:pointer">
<!-- top-level bubble container used to position bubble -->
<div id="target1Bubble" class="BubbleDiv" style="display:none; top:55px; left:-5px;">
<div class="BubbleShadow">
<div class="Bubble">
<div class="BubbleHeader">
<div class="BubbleTitle">Specific Positioning</div>
<div class="BubbleCloseBtn"></div>
<div class="BubbleEditBtn"></div>
</div>
<div class="BubbleContent">
This bubble is specifically positioned via "style="top:55px; left:-5px; position:relative;"
to override the default positioning. When positioned in this manner, there will be no callout
arrows and no provisioning is made to ensure the bubble appears within the page boundaries.
</div>
<div class="bottomLeftArrow"></div>
<div class="bottomRightArrow"></div>
<div class="topLeftArrow"></div>
<div class="topRightArrow"></div>
</div>
</div>
</div>
</div>
<!-- This example shows the default bubble positioning above and to the right of the target.
No position information is specified in the bubble style attribute and the bubble is not
a child of the target.
-->
<div id="target2" data-bubbleid="target2Bubble"
style="position:absolute; top:120px; left:5px; width:50px; height:50px; background-color:blue; cursor:pointer">
</div>
<div id="target2Bubble" class="BubbleDiv" style="display:none">
<div class="BubbleShadow">
<div class="Bubble">
<div class="BubbleHeader">
<div class="BubbleTitle">Bubble repositions to opposite side on browser boundaries</div>
<div class="BubbleCloseBtn"></div>
<div class="BubbleEditBtn"></div>
</div>
<div class="BubbleContent">
This bubble shows the default positioning of the bubble.<br/><br/>
The bubble will by default be positioned to the right and above the target.<br/>
If the bubble position will cause it to cross the right page boundary, then it is
repositioned to the left of the target.<br/>
If the bubble position will cause it to cross the top page boundary, then it is
repositioned below the target.
</div>
<div class="bottomLeftArrow"></div>
<div class="bottomRightArrow"></div>
<div class="topLeftArrow"></div>
<div class="topRightArrow"></div>
</div>
</div>
</div>
<!-- This example shows a bubble with default positioning relative to a target that itself
is positioned relative to it's parent container.
No position information is specified in the bubble style attribute and the bubble is not
a child of the target.
-->
<div id="foo" style="position:absolute; top:200px; left:5px; width:100px; height:100px; border: 1px solid black">
Parent container for the black square.
<div id="target3" data-bubbleid="target3Bubble"
style="position:relative; top:10px; left:10px; width:50px; height:50px; background-color:black; cursor:pointer">
</div>
</div>
<div id="target3Bubble" class="BubbleDiv" style="display:none">
<div class="BubbleShadow">
<div class="Bubble">
<div class="BubbleHeader">
<div class="BubbleTitle">Relatively-positioned Target</div>
<div class="BubbleCloseBtn"></div>
<div class="BubbleEditBtn"></div>
</div>
<div class="BubbleContent">
This bubble tests correct placement of a bubble for a target that itself is positioned
relative to it's parent container. The parent container is the black hollow square.
</div>
<div class="bottomLeftArrow"></div>
<div class="bottomRightArrow"></div>
<div class="topLeftArrow"></div>
<div class="topRightArrow"></div>
</div>
</div>
</div>
<!-- This example shows an element with no pre-configured bubble, but one will be created for it
dynamically with title and content specified from javascript.
-->
<div id="dynamic" style="position:absolute; top:150px; left:300px; width:50px; height:50px; background-color:yellow; cursor:pointer"></div>
<!-- This example shows an element with no pre-configured bubble, but one will be created for it
dynamically with title and content obtained via ajax.
-->
<div id="dynamic2" style="position:absolute; top:250px; left:300px; width:50px; height:50px; background-color:green; cursor:pointer"></div>
</body>
</html>