Skip to content

Commit 897f607

Browse files
sandywalkersandywalker
committed
fixed spell problem with function getConstrains, update readme file
1 parent 7e5c49b commit 897f607

File tree

4 files changed

+284
-98
lines changed

4 files changed

+284
-98
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ $('a').webuiPopover({
108108
height:'auto',//can be set with number
109109
trigger:'click',//values:click,hover
110110
style:'',//values:'',inverse
111-
delay: {//show and hide delay time of the popover, works only when trigger is 'hover'
111+
constrains:null, // constrains when placement is auto, values: horizontal,vertical
112+
delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
112113
show: null,
113114
hide: 300
114115
},

‎demo/index-dev.html‎

Lines changed: 234 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,18 @@
5555
font-weight:bold;
5656
color:#09e;
5757
}
58+
59+
.text-center{
60+
text-align: center;
61+
}
62+
63+
.text-right{
64+
text-align: right;
65+
}
66+
67+
.table-contrains > tbody > tr > td{
68+
border:none;
69+
}
5870

5971

6072

@@ -93,7 +105,7 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
93105
<p class="navbar-text navbar-left">title:</p>
94106
<div class="btn-group navbar-left" data-toggle="buttons">
95107
<a href="#" class="btn btn-default navbar-btn btn-settings btn-title active" data-option="title" data-title="Pop Title">yes</a>
96-
<a href="#" class="btn btn-default navbar-btn btn-settings btn-title " data-option="title" data-title="">no</a>
108+
<a href="#" class="btn btn-default navbar-btn btn-settings btn-title " data-option="title" data-title="">no</a>
97109
</div>
98110

99111
<p class="navbar-text navbar-left">closeable:</p>
@@ -121,82 +133,13 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
121133

122134
</div>
123135
</div>
124-
</section>
136+
</section>
125137

126-
<!-- <div class="container">
127-
<div class="row">
128-
<div class="col-md-3">
129-
<table class="table">
130-
<thead>
131-
<th>column</th>
132-
</thead>
133-
<tbody>
134-
<tr>
135-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
136-
</tr>
137-
<tr>
138-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
139-
</tr>
140-
<tr>
141-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
142-
</tr>
143-
<tr>
144-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
145-
</tr>
146-
<tr>
147-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
148-
</tr>
149-
<tr>
150-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
151-
</tr>
152-
<tr>
153-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
154-
</tr>
155-
<tr>
156-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
157-
</tr>
158-
<tr>
159-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
160-
</tr>
161-
<tr>
162-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
163-
</tr>
164-
<tr>
165-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
166-
</tr>
167-
<tr>
168-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
169-
</tr>
170-
<tr>
171-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
172-
</tr>
173-
<tr>
174-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
175-
</tr>
176-
<tr>
177-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
178-
</tr>
179-
<tr>
180-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
181-
</tr>
182-
<tr>
183-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
184-
</tr>
185-
<tr>
186-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
187-
</tr>
188-
<tr>
189-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
190-
</tr>
191-
<tr>
192-
<td><a href="#" class="show-pop btn btn-success">auto detect</a></td>
193-
</tr>
194-
</tbody>
195-
</table>
138+
196139

197-
</div>
198-
</div>
199-
</div> -->
140+
141+
142+
200143

201144
<div class="container">
202145
<div class="row">
@@ -243,6 +186,210 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
243186

244187
</section>
245188

189+
190+
191+
192+
<div class="container">
193+
<div class="row">
194+
<div class="col-md-12"><h1>Auto detect with constrains <small>auto detect the placement, but in contrains</small></h1></div>
195+
</div>
196+
</div>
197+
<section class="container demo-container">
198+
<div class="row">
199+
<div class="col-md-12">
200+
<table class="table table-contrains">
201+
202+
<tbody>
203+
<tr>
204+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
205+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
206+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
207+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
208+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
209+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
210+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
211+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
212+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
213+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
214+
</tr>
215+
216+
<tr>
217+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
218+
<td>&nbsp;</td>
219+
<td>&nbsp;</td>
220+
<td>&nbsp;</td>
221+
<td>&nbsp;</td>
222+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
223+
<td>&nbsp;</td>
224+
<td>&nbsp;</td>
225+
<td>&nbsp;</td>
226+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
227+
</tr>
228+
<tr>
229+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
230+
<td>&nbsp;</td>
231+
<td>&nbsp;</td>
232+
<td>&nbsp;</td>
233+
<td>&nbsp;</td>
234+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
235+
<td>&nbsp;</td>
236+
<td>&nbsp;</td>
237+
<td>&nbsp;</td>
238+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
239+
</tr>
240+
<tr>
241+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
242+
<td>&nbsp;</td>
243+
<td> <a href="#" class="btn show-pop btn-danger">no contrains</a></td></td>
244+
<td>&nbsp;</td>
245+
<td>&nbsp;</td>
246+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
247+
<td>&nbsp;</td>
248+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td></td>
249+
<td>&nbsp;</td>
250+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
251+
</tr>
252+
<tr>
253+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
254+
<td>&nbsp;</td>
255+
<td>&nbsp;</td>
256+
<td>&nbsp;</td>
257+
<td>&nbsp;</td>
258+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
259+
<td>&nbsp;</td>
260+
<td>&nbsp;</td>
261+
<td>&nbsp;</td>
262+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
263+
</tr>
264+
<tr>
265+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
266+
<td>&nbsp;</td>
267+
<td>&nbsp;</td>
268+
<td>&nbsp;</td>
269+
<td>&nbsp;</td>
270+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td>
271+
<td>&nbsp;</td>
272+
<td>&nbsp;</td>
273+
<td>&nbsp;</td>
274+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
275+
</tr>
276+
<tr>
277+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
278+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td>
279+
<td><a href="#" class="btn show-pop btn-info" data-contrains="vertical"> vertical</a></td>
280+
<td><a href="#" class="btn show-pop btn-info" data-contrains="vertical"> vertical</a></td>
281+
<td><a href="#" class="btn show-pop btn-info" data-contrains="vertical"> vertical</a></td>
282+
283+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td>
284+
285+
<td><a href="#" class="btn show-pop btn-info" data-contrains="vertical"> vertical</a></td>
286+
<td><a href="#" class="btn show-pop btn-info" data-contrains="vertical"> vertical</a></td>
287+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td>
288+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
289+
</tr>
290+
<tr>
291+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
292+
<td>&nbsp;</td>
293+
<td>&nbsp;</td>
294+
<td>&nbsp;</td>
295+
<td>&nbsp;</td>
296+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td>
297+
<td>&nbsp;</td>
298+
<td>&nbsp;</td>
299+
<td>&nbsp;</td>
300+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
301+
</tr>
302+
<tr>
303+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
304+
<td>&nbsp;</td>
305+
<td>&nbsp;</td>
306+
<td>&nbsp;</td>
307+
<td>&nbsp;</td>
308+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
309+
<td>&nbsp;</td>
310+
<td>&nbsp;</td>
311+
<td>&nbsp;</td>
312+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
313+
</tr>
314+
315+
<tr>
316+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
317+
<td>&nbsp;</td>
318+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td></td>
319+
<td>&nbsp;</td>
320+
<td>&nbsp;</td>
321+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
322+
<td>&nbsp;</td>
323+
<td><a href="#" class="btn show-pop btn-danger"> no contrains</a></td></td>
324+
<td>&nbsp;</td>
325+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
326+
</tr>
327+
<tr>
328+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
329+
<td>&nbsp;</td>
330+
<td>&nbsp;</td>
331+
<td>&nbsp;</td>
332+
<td>&nbsp;</td>
333+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
334+
<td>&nbsp;</td>
335+
<td>&nbsp;</td>
336+
<td>&nbsp;</td>
337+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
338+
</tr>
339+
<tr>
340+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
341+
<td>&nbsp;</td>
342+
<td>&nbsp;</td>
343+
<td>&nbsp;</td>
344+
<td>&nbsp;</td>
345+
<td><a href="#" class="btn show-pop btn-success" data-contrains="horizontal"> horizontal</a></td>
346+
<td>&nbsp;</td>
347+
<td>&nbsp;</td>
348+
<td>&nbsp;</td>
349+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
350+
</tr>
351+
352+
353+
<tr>
354+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
355+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
356+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
357+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
358+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
359+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
360+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
361+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
362+
<td><a href="#" class="btn show-pop btn-default" data-contrains="vertical"> vertical</a></td>
363+
<td><a href="#" class="btn show-pop btn-default" data-contrains="horizontal"> horizontal</a></td>
364+
</tr>
365+
</tbody>
366+
</table>
367+
368+
</div>
369+
</div>
370+
</section>
371+
372+
373+
<div class="container">
374+
<div class="row">
375+
<div class="col-md-12"><h1>Delayed show/hide <small>control delay show/hide by data-attribute or code</small></h1></div>
376+
</div>
377+
</div>
378+
<section class="container demo-container">
379+
<div class="row">
380+
<div class="col-md-3">
381+
382+
<a href="#" class="btn btn-default show-pop-delay" data-content="content...<br/> data-delay-show=300<br/> data-delay-hide=1000" data-delay-show="300" data-delay-hide="1000" data-title="delay pop">delayed show/hide by data-attribute</a>
383+
384+
385+
</div>
386+
<div class="col-md-3">&nbsp;</div>
387+
<div class="col-md-3">&nbsp;</div>
388+
<div class="col-md-3"><a href="#" class="btn btn-default show-pop-code-delay" data-delay-show="100" data-delay-hide="100" data-content="content...<br/> data-delay-show=1000<br/> data-delay-hide=1000" data-title="delay pop" data->delayed show/hide by code</a></div>
389+
</div>
390+
</section>
391+
392+
246393
<div class="container">
247394
<div class="row">
248395
<div class="col-md-12"><h1>Advanced examples </h1></div>
@@ -352,7 +499,7 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
352499
multi:true,
353500
closeable:false,
354501
style:'',
355-
delay:1000,
502+
delay:300,
356503
padding:true
357504
};
358505

@@ -396,6 +543,17 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
396543
var popLarge = $('a.show-pop-large').webuiPopover('destroy').webuiPopover($.extend({},settings,largeSettings));
397544

398545

546+
$('a.show-pop-delay').webuiPopover('destroy').webuiPopover({trigger:'hover',width:300,height:200});
547+
$('a.show-pop-code-delay').webuiPopover('destroy').webuiPopover({
548+
trigger:'hover',
549+
width:300,
550+
height:200,
551+
delay:{
552+
show:1000,
553+
hide:1000
554+
}
555+
});
556+
399557
var
400558
iframeSettings = { width:500,
401559
height:350,

0 commit comments

Comments
 (0)