first import
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
Copyright (c) 2012 Davey IJzermans
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
@@ -0,0 +1,49 @@
|
||||
# jQuery.popover
|
||||
|
||||
Easy to use and customizable popover plugin for jQuery. For a demo and
|
||||
documentation, visit http://daveyijzermans.nl/jquery/popover/demo.html
|
||||
|
||||
## Changelog
|
||||
|
||||
### v1.1.2
|
||||
- Some code style tweaks
|
||||
- Box shadow in stylesheet
|
||||
- Moved preventDefault to setTrigger method
|
||||
|
||||
### v1.1.1
|
||||
- Fixed hideAll method
|
||||
|
||||
### v1.1.0
|
||||
- Fixed hideOnHTMLClick on iDevices
|
||||
|
||||
### v1.0.9
|
||||
- Fixed url parameter
|
||||
|
||||
### v1.0.8
|
||||
- Added automatic reposition.
|
||||
- Changed offset logic, see docs.
|
||||
|
||||
### v1.0.7
|
||||
- Added focus-trigger.
|
||||
|
||||
### v1.0.6
|
||||
- Some z-index tweaks to make the popover appear on top of each other instead of the order they were instantiated.
|
||||
|
||||
### v1.0.5
|
||||
- Added preventChildrenPropagation parameter.
|
||||
|
||||
### v1.0.4
|
||||
- The preventDefault parameter now does what it's supposed to. preventDefault on the element the popover's invoked on instead of the popover itself.
|
||||
|
||||
### v1.0.3
|
||||
- Again some small changes to the hover trigger.
|
||||
- Hovering the popover now makes it stay.
|
||||
|
||||
### v1.0.2
|
||||
- Added 'anchor' parameter, for attaching the popover to another element
|
||||
|
||||
### v1.0.1
|
||||
- Fixed hover trigger
|
||||
|
||||
### v1.0.0
|
||||
- Initial release
|
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* CSS reset by Eric Meyer
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Demo page styling
|
||||
*/
|
||||
body {
|
||||
margin: 80px 10%;
|
||||
font-family: Arial;
|
||||
font-size: 15px;
|
||||
line-height: 1.3em;
|
||||
min-width: 1000px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
margin: 0.7em 0;
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
ul, ol {
|
||||
list-style: square;
|
||||
margin: 0 2em;
|
||||
}
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
margin: 0 0 0 1.5em;
|
||||
}
|
||||
.sandbox {
|
||||
margin: 0.7em 0;
|
||||
padding: 1em;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
code {
|
||||
font-family: Courier;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
pre {
|
||||
margin: 1em 0; padding: 1em;
|
||||
background: #f9f9f9;
|
||||
overflow: auto;
|
||||
}
|
||||
.sandbox, pre {
|
||||
border-radius: 5px;
|
||||
}
|
||||
table, tr, td, th {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
background: #f9f9f9;
|
||||
font-weight: bold;
|
||||
}
|
||||
th, td {
|
||||
padding: 5px;
|
||||
}
|
@@ -0,0 +1,2 @@
|
||||
Aww yeah!
|
||||
<img src="http://www.myfacewhen.net/uploads/961-aww-yeah.jpg" width="300" />
|
@@ -0,0 +1,588 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||
|
||||
<title>jQuery.popover demo page</title>
|
||||
<link rel="stylesheet" href="_page.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="popover.css" type="text/css" media="screen" />
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.popover-1.1.2.js"></script>
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
jQuery(document).ready(function($) {
|
||||
$("#ex1").popover({
|
||||
trigger: 'click'
|
||||
});
|
||||
$("#ex2").popover({
|
||||
title: "Hello",
|
||||
content: "Finally, I can speak!"
|
||||
});
|
||||
$("#ex3a").popover({
|
||||
title: "<_<",
|
||||
content: "Damn.",
|
||||
trigger: 'none'
|
||||
});
|
||||
$("#ex3b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex3a").popover('show');
|
||||
});
|
||||
$("#bubble_expl").popover({
|
||||
title: "Bubble up",
|
||||
content: "When you click a link on a web page, not only do you click that link, you also click it's parent. You clicked this linked, but also it's parent <p>-tag, and it's parent the <body>-tag and, it's parent the <html>-tag. The popover('hide') event is bound to the <html>-element, so this will trigger as well, causing the popover to fade out immediately. By using the stopPropagation() method we prevent this.",
|
||||
classes: 'large'
|
||||
});
|
||||
$("#ex4a").popover({
|
||||
title: "Guess what this is...",
|
||||
content: "Pa's wijze lynx bezag vroom het fikse aquaduct.",
|
||||
trigger: 'none'
|
||||
});
|
||||
$("#ex4b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('show');
|
||||
});
|
||||
$("#ex4c").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('hide');
|
||||
});
|
||||
$("#ex4d").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('fadeOut');
|
||||
});
|
||||
$("#ex4e").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a")
|
||||
.popover('destroy')
|
||||
.text("Nooo! What have you done?!");
|
||||
});
|
||||
$("#ex5a").popover({
|
||||
title: "Hmm...",
|
||||
content: "And programming is your friendship!"
|
||||
});
|
||||
$("#ex5b, #ex5c").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex5a").popover(
|
||||
'title',
|
||||
$(this).text()+" is your friend"
|
||||
).popover('show');
|
||||
});
|
||||
$("#ex6a").popover({
|
||||
title: "Dynamic content",
|
||||
content: "At least a popover that makes some sense..."
|
||||
});
|
||||
$("#ex6b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex6a").popover(
|
||||
'content',
|
||||
"At least a popover that makes some sense... Don't get used to it."
|
||||
).popover('show');
|
||||
});
|
||||
$("#ex7a").popover({
|
||||
title: "What's this",
|
||||
content: "...",
|
||||
classes: "wider"
|
||||
});
|
||||
$("#ex7b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex7a").popover(
|
||||
'ajax',
|
||||
"ajax.html"
|
||||
).popover('title', "It's AJAX content!").popover('show');
|
||||
});
|
||||
|
||||
/**
|
||||
* Collapse code blocks
|
||||
*/
|
||||
var code_min_height = 150;
|
||||
$('pre').each(function() {
|
||||
$this = $(this);
|
||||
var org_height = $this.height();
|
||||
var toggld = false;
|
||||
if(org_height > code_min_height)
|
||||
$this.height(code_min_height);
|
||||
$this.bind('click', function() {
|
||||
$this = $(this);
|
||||
if(toggld) {
|
||||
$this.stop(true, true).animate({ height: code_min_height });
|
||||
toggld = false;
|
||||
} else {
|
||||
$this.stop(true, true).animate({ height: org_height });
|
||||
toggld = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* Table of contents
|
||||
*/
|
||||
toc_paragraph = function(p) {
|
||||
var ret = $('<li><a href="'+p.href+'">'+p.title+'</a></li>');
|
||||
$.each(p.items, function(i, val) {
|
||||
if(ret.children('ul').length === 0)
|
||||
ret.append('<ul />');
|
||||
ret.children('ul').append(toc_paragraph(val));
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
generate_toc = function() {
|
||||
var toc = {};
|
||||
var toc_el = $('#table_of_contents');
|
||||
$('a[name]').each(function() {
|
||||
$this = $(this);
|
||||
var item = {};
|
||||
var name = $this.attr('name');
|
||||
var href = "#" + name;
|
||||
var title = $this.attr('title');
|
||||
if(typeof title === "undefined")
|
||||
title = $this.next().text();
|
||||
item.href = href;
|
||||
item.title = title;
|
||||
item.items = {};
|
||||
|
||||
var split = $this.attr('name').split('_');
|
||||
if(split.length > 1)
|
||||
toc[split[0]].items[name] = item;
|
||||
else
|
||||
toc[name] = item;
|
||||
});
|
||||
toc_el.empty();
|
||||
|
||||
$.each(toc, function(i, val) {
|
||||
toc_el.append(toc_paragraph(val));
|
||||
});
|
||||
}
|
||||
generate_toc();
|
||||
});
|
||||
/* ]]> */
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>jQuery.popover</h1>
|
||||
<p>Easy to use and customizable popover plugin for jQuery.</p>
|
||||
<p>Take a look at <a href="http://wp.me/p12l3P-gT">this blog post</a> for more details.</p>
|
||||
|
||||
<a name="toc"></a>
|
||||
<h2>Table of Contents</h2>
|
||||
<ul id="table_of_contents"></ul>
|
||||
|
||||
<a name="usage"></a>
|
||||
<h2>Usage</h2>
|
||||
|
||||
<a name="usage_initialization"></a>
|
||||
<h3>Initialization</h3>
|
||||
<p>With default settings, calling $(element).popover(); will initalize an empty popover on the element.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<a href="#" id="ex1">I have a popover, but you can't see me. Yet.</a>
|
||||
</div>
|
||||
|
||||
<p>When you click the link above, the popover is shown. This is achieved by using <code>{ trigger: 'click' }</code> in the parameters. <em>You can hide the popover by clicking anywhere there's not a popover.</em> The source code for the above example is:</p>
|
||||
<pre><code>$("#ex1").popover({
|
||||
trigger: 'click'
|
||||
});</code></pre>
|
||||
<p>When this code was executed, the popover was created but not shown. A <code>click</code> event was bound to the <code>a</code>-tag with which the popover is “connected”. When that element is clicked, the popover is shown.
|
||||
|
||||
<p>But hows an empty popover any fun? Let's try this:</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<a href="#" id="ex2">Please, let me speak!</a>
|
||||
</div>
|
||||
|
||||
<p>Now we've put some content in our popover using the parameters <code>{ title: "Hello", content: "Finally, I can speak!" }</code>, like so:</p>
|
||||
|
||||
<pre><code>$("#ex2").popover({
|
||||
title: "Hello",
|
||||
content: "Finally, I can speak!"
|
||||
});</code></pre>
|
||||
|
||||
<p>Note that I've ommited <code>{ trigger: 'click' }</code> in this example. It's the default setting for popovers.</p>
|
||||
|
||||
<a name="usage_manual"></a>
|
||||
<h3>Pulling the trigger manually</h3>
|
||||
<p>You can show, hide and fade out an initialized popover manually by calling <code>popover('show')</code>, <code>popover('hide')</code> and <code>popover('fadeOut')</code> on the element the popover was initialized over.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<span id="ex3a">Nope, can't be triggered, bro.</span>
|
||||
<a href="#" id="ex3b">Oh yes you can!</a>
|
||||
</div>
|
||||
|
||||
<p>The code for this example is as follows. <em>Click a code box to expand it.</em></p>
|
||||
|
||||
<pre><code>$("#ex3a").popover({
|
||||
title: "&lt;_&lt;",
|
||||
content: "Damn.",
|
||||
trigger: 'none'
|
||||
});
|
||||
$("#ex3b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex3a").popover('show');
|
||||
});</code></pre>
|
||||
|
||||
<p>You must must call <code>event.preventDefault()</code> and <code>event. stopPropagation()</code> on the triggeree (?) / element that triggers the popover, otherwise <code>click</code>-event will <a href="#" id="bubble_expl">bubble up</a> to the document and the popover will immediately be hidden.</p>
|
||||
<p>You can call <code>popover('fadeOut')</code> and <code>popover('hide')</code> to hide popovers with and without a fade animation.</p>
|
||||
|
||||
<a name="usage_hiding"></a>
|
||||
<h3>Hide and destroy</h3>
|
||||
<p>Use <code>popover('hide')</code>, <code>popover('fadeOut')</code> and <code>popover('destory')</code> to hide, fade out and destroy popovers. Call these methods on the element where the popover was initialized over.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<span id="ex4a">I have a popover.</span><br />
|
||||
<a href="#" id="ex4b">Show</a> | <a href="#" id="ex4c">Hide</a> | <a href="#" id="ex4d">Fade out</a> | <a href="#" id="ex4e">Destroy</a>
|
||||
</div>
|
||||
|
||||
<p>These methods can be seen as the <abbr title="Application Programming Interface">API</abbr> for jQuery.popover. Here the code for this example:</p>
|
||||
|
||||
<pre><code>$("#ex4a").popover({
|
||||
title: "Guess what this is...",
|
||||
content: "Pa's wijze lynx bezag vroom het fikse aquaduct.",
|
||||
trigger: 'none'
|
||||
});
|
||||
$("#ex4b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('show');
|
||||
});
|
||||
$("#ex4c").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('hide');
|
||||
});
|
||||
$("#ex4d").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a").popover('fadeOut');
|
||||
});
|
||||
$("#ex4e").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex4a")
|
||||
.popover('destroy')
|
||||
.text("Nooo! What have you done?!");
|
||||
});</code></pre>
|
||||
|
||||
<p>It could probably be a bit shorter, but I'll let you figure that out.</p>
|
||||
|
||||
<a name="usage_modifying"></a>
|
||||
<h3>Modifying on the fly</h3>
|
||||
|
||||
<a name="usage_modifying_title"></a>
|
||||
<h4>Title</h4>
|
||||
<p>You can change the title on the fly with by using <code>popover('title', "Text")</code>.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<span id="ex5a">PHP or Ruby?</span>
|
||||
<a href="#" id="ex5b">PHP</a> | <a href="#" id="ex5c">Ruby</a>
|
||||
</div>
|
||||
|
||||
<pre><code>$("#ex5a").popover({
|
||||
title: "Hmm...",
|
||||
});
|
||||
$("#ex5b, #ex5c").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex5a").popover(
|
||||
'title',
|
||||
$(this).text()+" is your friend"
|
||||
).popover('show');
|
||||
});</code></pre>
|
||||
|
||||
<a name="usage_modifying_content"></a>
|
||||
<h4>Content</h4>
|
||||
<p>You can change the title on the fly with by using <code>popover('content', "Text")</code>.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<span id="ex6a">Click here first | </span>
|
||||
<a href="#" id="ex6b">change content</a>
|
||||
</div>
|
||||
|
||||
<pre><code>$("#ex6a").popover({
|
||||
title: "Dynamic content",
|
||||
content: "At least a popover that makes some sense..."
|
||||
});
|
||||
$("#ex6b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex6a").popover(
|
||||
'content',
|
||||
"At least a popover that makes some sense... Don't get used to it."
|
||||
).popover('show');
|
||||
});</code></pre>
|
||||
|
||||
<a name="usage_modifying_ajax"></a>
|
||||
<h4>Loading AJAX content</h4>
|
||||
<p>You can load a webpage as content via AJAX by using <code>popover('ajax', "http://example.com/" [, options])</code>.</p>
|
||||
|
||||
<div class="sandbox">
|
||||
<span id="ex7a">Click here first | </span>
|
||||
<a href="#" id="ex7b">load ajax content</a>
|
||||
</div>
|
||||
|
||||
<p>Please note this only works when running on a webserver.</p>
|
||||
|
||||
<pre><code>$("#ex7a").popover({
|
||||
title: "What's this",
|
||||
content: "...",
|
||||
classes: "wider"
|
||||
});
|
||||
$("#ex7b").click(function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$("#ex7a").popover(
|
||||
'ajax',
|
||||
"ajax.html"
|
||||
).popover('title', "It's AJAX content!").popover('show');
|
||||
});</code></pre>
|
||||
|
||||
<p>Alternatively, you can set an URL in the initialization parameters to load an URL immediately on setup, like so:</p>
|
||||
|
||||
<pre><code>$("#selector").popover({
|
||||
url: "test.html"
|
||||
});</code></pre>
|
||||
|
||||
<a name="parameters"></a>
|
||||
<h3>Parameters</h3>
|
||||
<p>You may've noticed the <code>{ classes: "wider" }</code> parameter in the previous example. The value of the <code>classes</code>-parameter is applied to the popover by jQuery's <code>addClass()</code> method. You can use this to add classes for different sizes of popovers.</p>
|
||||
|
||||
<p>There are other parameters you can pass to the <code>popover()</code> method. Following is a list of them.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Preffered type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
<th>Since</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>verticalOffset</td>
|
||||
<td>int</td>
|
||||
<td><a name="parameters_verticalOffset" title="verticalOffset"></a>Offset the popover by y px vertically (movement depends on position of popover. If <code>position == 'bottom'</code>, positive numbers are down)</td>
|
||||
<td><code>10</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>horizontalOffset</td>
|
||||
<td>int</td>
|
||||
<td><a name="parameters_horizontalOffset" title="horizontalOffset"></a>Offset the popover by x px horizontally (movement depends on position of popover. If <code>position == 'right'</code>, positive numbers are right)</td>
|
||||
<td><code>10</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>bool|string</td>
|
||||
<td><a name="parameters_title" title="title"></a>Contents of the heading. Set to false for no title.</td>
|
||||
<td><code>false</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>bool|string</td>
|
||||
<td><a name="parameters_content" title="content"></a>Contents of the body of the popover. Set to false for no body.</td>
|
||||
<td><code>false</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>url</td>
|
||||
<td>bool|string</td>
|
||||
<td><a name="parameters_url" title="url"></a>Automatically load an URL into the content field on initialization, if set to an url.</td>
|
||||
<td><code>false</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>classes</td>
|
||||
<td>string</td>
|
||||
<td><a name="parameters_classes" title="classes"></a>Add stylesheet classes to the popover box on initalization, for example "large".</td>
|
||||
<td><code>""</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>string</td>
|
||||
<td><a name="parameters_position" title="position"></a>Determine place of the popover. Set to "auto" for automatic placement. <em>Yet to be implemented</em></td>
|
||||
<td><code>"auto"</code></td>
|
||||
<td>1.0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fadeSpeed</td>
|
||||
<td>int</td>
|
||||
<td><a name="parameters_fadeSpeed" title="fadeSpeed"></a>How fast to fade this popover out when fading out.</td>
|
||||
<td><code>160</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td><a name="parameters_trigger" title="trigger"></a>How to trigger the popover. "click" activates the popover when the linked-to element is clicked, "hover" when it's hovered on, "focus" shows it when focused and hides the popover when unfocused/blurred, and everything else sets it to manual.</td>
|
||||
<td><code>"click"</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>preventDefault</td>
|
||||
<td>bool</td>
|
||||
<td><a name="parameters_preventDefault" title="preventDefault"></a>Execute <code>event.preventDefault()</code> method on the element the popover is called on. Set this to false if you want the element (for example an <code>a</code>-element) to still execute code already bound with <code>.click()</code>.</td>
|
||||
<td><code>true</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>stopChildrenPropagation</td>
|
||||
<td>bool</td>
|
||||
<td><a name="parameters_stopChildrenPropagation" title="stopChildrenPropagation"></a>Execute <code>event.preventPropagation()</code> method on all children of the popover, so <code>click</code> events won't bubble up and hide the popover.</td>
|
||||
<td><code>true</code></td>
|
||||
<td>v1.0.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideOnHTMLClick</td>
|
||||
<td>bool</td>
|
||||
<td><a name="parameters_hideOnHTMLClick" title="hideOnHTMLClick"></a>Hide all popovers when clicked outside of them.</td>
|
||||
<td><code>true</code></td>
|
||||
<td>v1.0.0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>animateChange</td>
|
||||
<td>bool</td>
|
||||
<td><a name="parameters_animateChange" title="animateChange"></a>Animate a popover reposition. <em>Yet to be implemented.</em></td>
|
||||
<td><code>true</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoReposition</td>
|
||||
<td>bool</td>
|
||||
<td><a name="parameters_autoReposition" title="autoReposition"></a>Automatically reposition popover on popover change and window resize.</td>
|
||||
<td><code>true</code></td>
|
||||
<td>v1.0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>anchor</td>
|
||||
<td>bool|string|jQuery</td>
|
||||
<td><a name="parameters_anchor" title="anchor"></a>Use this parameter to anchor the popover to a different element than it's invoked on. This is useful when using <code>{ trigger: 'hover' }</code>.</td>
|
||||
<td><code>false</code></td>
|
||||
<td>v1.0.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a name="parameters_prototype" title="Default prototype"></a>
|
||||
<p>For convienience, here is this plugin's defaults prototype.</p>
|
||||
|
||||
<pre><code>var defaults = {
|
||||
verticalOffset: 10,
|
||||
horizontalOffset: 10,
|
||||
title: false,
|
||||
content: false,
|
||||
url: false,
|
||||
classes: '',
|
||||
position: 'auto',
|
||||
fadeSpeed: 160,
|
||||
trigger: 'click',
|
||||
preventDefault: true,
|
||||
stopChildrenPropagation:
|
||||
hideOnHTMLClick: true,
|
||||
animateChange: true,
|
||||
autoReposition: true,
|
||||
anchor: false: false
|
||||
}</code></pre>
|
||||
|
||||
<a name="methods"></a>
|
||||
<h3>Methods</h3>
|
||||
|
||||
<p>Following is a reference of all methods you can call. Every method returns a jQuery result set, to maintain chainability.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Returns</th>
|
||||
<th>Description</th>
|
||||
<th>Usage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>init</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_init" title="init"></a>(default method) Initializes a popover on elements. Reads defaults (see above), combines them with parameters and makes and links the popover.</td>
|
||||
<td><code>$("#selector").popover(["init", ] { title: "Test" });</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>destroy</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_destroy" title="destroy"></a>Removes the linked popover(s) from the DOM, as well as it's data/settings.</td>
|
||||
<td><code>$("#selector").popover('destroy');</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_show" title="show"></a>Show a linked popover, if it exists.</td>
|
||||
<td><code>$("#selector").popover('show');</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_hide" title="hide"></a>Hide a linked popover, if it exists.</td>
|
||||
<td><code>$("#selector").popover('hide');</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fadeOut</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_fadeOut" title="fadeOut"></a>Fade out a linked popover, if it exists, in as many milliseconds you set the fadeSpeed parameter to on initialization, or how many as you passed to the method.</td>
|
||||
<td><code>$("#selector").popover('fadeOut' [, 1000]);</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideAll</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_hideAll" title="hideAll"></a>Hide all initialized popovers.</td>
|
||||
<td><code>$("#selector").popover('hideAll');</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fadeOutAll</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_fadeOutAll" title="fadeOutAll"></a>Fade out all initialized popovers. The duration is set by using the parameter <code>fadeSpeed</code> when initiaizing, or passing this to the method.</td>
|
||||
<td><code>$("#selector").popover('fadeOutAll' [, 1000]);</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setTrigger</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_setTrigger" title="setTrigger"></a>Sets a popover's trigger method (see <a href="#parameters_trigger">this</a> for information on triggers). Also unbinds the previous trigger(s).</td>
|
||||
<td><code>$("#selector").popover('setTrigger', 'hover');</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setOption</td>
|
||||
<td>jQuery</td>
|
||||
<td><a name="methods_setOption" title="setOption"></a>Sets an option to the specified value.</td>
|
||||
<td><code>$("#selector").popover('setOption', 'fadeSpeed', 500);</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getData</td>
|
||||
<td>mixed</td>
|
||||
<td><a name="methods_getData" title="getData"></a>Get a popover's data. If multiple elements are targeted, the function returns an array of objects.</td>
|
||||
<td><code>$("#selector").popover('getData');</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a name="download"></a>
|
||||
<h3>Download</h3>
|
||||
|
||||
<p>You can download jQuery.popover by cloning it from Github:</p>
|
||||
|
||||
<p><code>git clone git@github.com:klaas4/jQuery.popover.git</code></p>
|
||||
|
||||
<p>Or simply download the <a href="https://github.com/klaas4/jQuery.popover/zipball/master">zip-package</a>.</p>
|
||||
|
||||
<p>Please also check out my blog at <a href="http://daveyyzermans.nl/">http://daveyyzermans.nl/</a>, and if you want, shoot me an e-mail.</p>
|
||||
</body>
|
||||
</html>
|
@@ -0,0 +1,539 @@
|
||||
/**
|
||||
* jQuery.popover plugin v1.1.2
|
||||
* By Davey IJzermans
|
||||
* See http://wp.me/p12l3P-gT for details
|
||||
* http://daveyyzermans.nl/
|
||||
*
|
||||
* Released under MIT License.
|
||||
*/
|
||||
|
||||
;(function($) {
|
||||
//define some default plugin options
|
||||
var defaults = {
|
||||
verticalOffset: 10, //offset the popover by y px vertically (movement depends on position of popover. If position == 'bottom', positive numbers are down)
|
||||
horizontalOffset: 10, //offset the popover by x px horizontally (movement depends on position of popover. If position == 'right', positive numbers are right)
|
||||
title: false, //heading, false for none
|
||||
content: false, //content of the popover
|
||||
url: false, //set to an url to load content via ajax
|
||||
classes: '', //classes to give the popover, i.e. normal, wider or large
|
||||
position: 'auto', //where should the popover be placed? Auto, top, right, bottom, left or absolute (i.e. { top: 4 }, { left: 4 })
|
||||
fadeSpeed: 160, //how fast to fade out popovers when destroying or hiding
|
||||
trigger: 'click', //how to trigger the popover: click, hover or manual
|
||||
preventDefault: true, //preventDefault actions on the element on which the popover is called
|
||||
stopChildrenPropagation: true, //prevent propagation on popover children
|
||||
hideOnHTMLClick: true, //hides the popover when clicked outside of it
|
||||
animateChange: true, //animate a popover reposition
|
||||
autoReposition: true, //automatically reposition popover on popover change and window resize
|
||||
anchor: false //anchor the popover to a different element
|
||||
}
|
||||
var popovers = [];
|
||||
var _ = {
|
||||
calc_position: function(popover, position) {
|
||||
var data = popover.popover("getData");
|
||||
var options = data.options;
|
||||
var $anchor = options.anchor ? $(options.anchor) : popover;
|
||||
var el = data.popover;
|
||||
|
||||
var coordinates = $anchor.offset();
|
||||
var y1, x1;
|
||||
|
||||
if (position == 'top') {
|
||||
y1 = coordinates.top - el.outerHeight();
|
||||
x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
|
||||
} else if (position == 'right') {
|
||||
y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
|
||||
x1 = coordinates.left + $anchor.outerWidth();
|
||||
} else if (position == 'left') {
|
||||
y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
|
||||
x1 = coordinates.left - el.outerWidth();
|
||||
} else {
|
||||
//bottom
|
||||
y1 = coordinates.top + $anchor.outerHeight();
|
||||
x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
|
||||
}
|
||||
|
||||
x2 = x1 + el.outerWidth();
|
||||
y2 = y1 + el.outerHeight();
|
||||
ret = {
|
||||
x1: x1,
|
||||
x2: x2,
|
||||
y1: y1,
|
||||
y2: y2
|
||||
};
|
||||
|
||||
return ret;
|
||||
},
|
||||
pop_position_class: function(popover, position) {
|
||||
var remove = "popover-top popover-right popover-left";
|
||||
var arrow = "top-arrow"
|
||||
var arrow_remove = "right-arrow bottom-arrow left-arrow";
|
||||
|
||||
if (position == 'top') {
|
||||
remove = "popover-right popover-bottom popover-left";
|
||||
arrow = 'bottom-arrow';
|
||||
arrow_remove = "top-arrow right-arrow left-arrow";
|
||||
} else if (position == 'right') {
|
||||
remove = "popover-yop popover-bottom popover-left";
|
||||
arrow = 'left-arrow';
|
||||
arrow_remove = "top-arrow right-arrow bottom-arrow";
|
||||
} else if (position == 'left') {
|
||||
remove = "popover-top popover-right popover-bottom";
|
||||
arrow = 'right-arrow';
|
||||
arrow_remove = "top-arrow bottom-arrow left-arrow";
|
||||
}
|
||||
|
||||
popover
|
||||
.removeClass(remove)
|
||||
.addClass('popover-' + position)
|
||||
.find('.arrow')
|
||||
.removeClass(arrow_remove)
|
||||
.addClass(arrow);
|
||||
}
|
||||
};
|
||||
var methods = {
|
||||
/**
|
||||
* Initialization method
|
||||
* Merges parameters with defaults, makes the popover and saves data
|
||||
*
|
||||
* @param object
|
||||
* @return jQuery
|
||||
*/
|
||||
init : function(params) {
|
||||
return this.each(function() {
|
||||
var options = $.extend({}, defaults, params);
|
||||
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if ( ! data) {
|
||||
var popover = $('<div class="popover" />')
|
||||
.addClass(options.classes)
|
||||
.append('<div class="arrow" />')
|
||||
.append('<div class="wrap"></div>')
|
||||
.appendTo('body')
|
||||
.hide();
|
||||
|
||||
if (options.stopChildrenPropagation) {
|
||||
popover.children().bind('click.popover', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
if (options.anchor) {
|
||||
if ( ! options.anchor instanceof jQuery) {
|
||||
options.anchor = $(options.anchor);
|
||||
}
|
||||
}
|
||||
|
||||
var data = {
|
||||
target: $this,
|
||||
popover: popover,
|
||||
options: options
|
||||
};
|
||||
|
||||
if (options.title) {
|
||||
$('<div class="title" />')
|
||||
.html(options.title instanceof jQuery ? options.title.html() : options.title)
|
||||
.appendTo(popover.find('.wrap'));
|
||||
}
|
||||
if (options.content) {
|
||||
$('<div class="content" />')
|
||||
.html(options.content instanceof jQuery ? options.content.html() : options.content)
|
||||
.appendTo(popover.find('.wrap'));
|
||||
}
|
||||
|
||||
$this.data('popover', data);
|
||||
popovers.push($this);
|
||||
|
||||
if (options.url) {
|
||||
$this.popover('ajax', options.url);
|
||||
}
|
||||
|
||||
$this.popover('reposition');
|
||||
$this.popover('setTrigger', options.trigger);
|
||||
|
||||
if (options.hideOnHTMLClick) {
|
||||
var hideEvent = "click.popover";
|
||||
if ("ontouchstart" in document.documentElement)
|
||||
hideEvent = 'touchstart.popover';
|
||||
$('html').unbind(hideEvent).bind(hideEvent, function(event) {
|
||||
$('html').popover('fadeOutAll');
|
||||
});
|
||||
}
|
||||
|
||||
if (options.autoReposition) {
|
||||
var repos_function = function(event) {
|
||||
$this.popover('reposition');
|
||||
};
|
||||
$(window)
|
||||
.unbind('resize.popover').bind('resize.popover', repos_function)
|
||||
.unbind('scroll.popover').bind('scroll.popover', repos_function);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Reposition the popover
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
reposition: function() {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
var options = data.options;
|
||||
var $anchor = options.anchor ? $(options.anchor) : $this;
|
||||
var coordinates = $anchor.offset();
|
||||
|
||||
var position = options.position;
|
||||
if ( ! (position == 'top' || position == 'right' || position == 'left' || position == 'auto')) {
|
||||
position = 'bottom';
|
||||
}
|
||||
var calc;
|
||||
|
||||
if (position == 'auto') {
|
||||
var positions = ["bottom", "left", "top", "right"];
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var scrollLeft = $(window).scrollLeft();
|
||||
var windowHeight = $(window).outerHeight();
|
||||
var windowWidth = $(window).outerWidth();
|
||||
|
||||
$.each (positions, function(i, pos) {
|
||||
calc = _.calc_position($this, pos);
|
||||
|
||||
var x1 = calc.x1 - scrollLeft;
|
||||
var x2 = calc.x2 - scrollLeft + options.horizontalOffset;
|
||||
var y1 = calc.y1 - scrollTop;
|
||||
var y2 = calc.y2 - scrollTop + options.verticalOffset;
|
||||
|
||||
if (x1 < 0 || x2 < 0 || y1 < 0 || y2 < 0)
|
||||
//popover is left off of the screen or above it
|
||||
return true; //continue
|
||||
|
||||
if (y2 > windowHeight)
|
||||
//popover is under the window viewport
|
||||
return true; //continue
|
||||
|
||||
if (x2 > windowWidth)
|
||||
//popover is right off of the screen
|
||||
return true; //continue
|
||||
|
||||
position = pos;
|
||||
return false;
|
||||
});
|
||||
|
||||
if (position == 'auto') {
|
||||
//position is still auto
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
calc = _.calc_position($this, position);
|
||||
var top = calc.top;
|
||||
var left = calc.left;
|
||||
_.pop_position_class(popover, position);
|
||||
|
||||
var marginTop = 0;
|
||||
var marginLeft = 0;
|
||||
if (position == 'bottom') {
|
||||
marginTop = options.verticalOffset;
|
||||
}
|
||||
if (position == 'top') {
|
||||
marginTop = -options.verticalOffset;
|
||||
}
|
||||
if (position == 'right') {
|
||||
marginLeft = options.horizontalOffset;
|
||||
}
|
||||
if (position == 'left') {
|
||||
marginLeft = -options.horizontalOffset;
|
||||
}
|
||||
|
||||
var css = {
|
||||
left: calc.x1,
|
||||
top: calc.y1,
|
||||
marginTop: marginTop,
|
||||
marginLeft: marginLeft
|
||||
};
|
||||
|
||||
if (data.initd && options.animateChange) {
|
||||
popover.css(css);
|
||||
} else {
|
||||
data.initd = true;
|
||||
popover.css(css);
|
||||
}
|
||||
$this.data('popover', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Remove a popover from the DOM and clean up data associated with it.
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
destroy: function() {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
$this.unbind('.popover');
|
||||
$(window).unbind('.popover');
|
||||
data.popover.remove();
|
||||
$this.removeData('popover');
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Show the popover
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
show: function() {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
$this.popover('reposition');
|
||||
popover.clearQueue().css({ zIndex: 950 }).show();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Hide the popover
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
hide: function() {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
data.popover.hide().css({ zIndex: 949 });
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Fade out the popover
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
fadeOut: function(ms) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
var options = data.options;
|
||||
popover.delay(100).css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Hide all popovers
|
||||
*
|
||||
* @return jQuery
|
||||
*/
|
||||
hideAll: function() {
|
||||
return $.each (popovers, function(i, pop) {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
popover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Fade out all popovers
|
||||
*
|
||||
* @param int
|
||||
* @return jQuery
|
||||
*/
|
||||
fadeOutAll: function(ms) {
|
||||
return $.each (popovers, function(i, pop) {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
var options = data.options;
|
||||
popover.css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Set the event trigger for the popover. Also cleans the previous binding.
|
||||
*
|
||||
* @param string
|
||||
* @return jQuery
|
||||
*/
|
||||
setTrigger: function(trigger) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var popover = data.popover;
|
||||
var options = data.options;
|
||||
var $anchor = options.anchor ? $(options.anchor) : $this;
|
||||
|
||||
if (trigger === 'click') {
|
||||
$anchor.unbind('click.popover').bind('click.popover', function(event) {
|
||||
if (options.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
event.stopPropagation();
|
||||
$this.popover('show');
|
||||
});
|
||||
popover.unbind('click.popover').bind('click.popover', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
} else {
|
||||
$anchor.unbind('click.popover');
|
||||
popover.unbind('click.popover')
|
||||
}
|
||||
|
||||
if (trigger === 'hover') {
|
||||
$anchor.add(popover).bind('mousemove.popover', function(event) {
|
||||
$this.popover('show');
|
||||
});
|
||||
$anchor.add(popover).bind('mouseleave.popover', function(event) {
|
||||
$this.popover('fadeOut');
|
||||
});
|
||||
} else {
|
||||
$anchor.add(popover).unbind('mousemove.popover').unbind('mouseleave.popover');
|
||||
}
|
||||
|
||||
if (trigger === 'focus') {
|
||||
$anchor.add(popover).bind('focus.popover', function(event) {
|
||||
$this.popover('show');
|
||||
});
|
||||
$anchor.add(popover).bind('blur.popover', function(event) {
|
||||
$this.popover('fadeOut');
|
||||
});
|
||||
$anchor.bind('click.popover', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
} else {
|
||||
$anchor.add(popover).unbind('focus.popover').unbind('blur.popover').unbind('click.popover');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Rename the popover's title
|
||||
*
|
||||
* @param string
|
||||
* @return jQuery
|
||||
*/
|
||||
title: function(text) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var title = data.popover.find('.title');
|
||||
var wrap = data.popover.find('.wrap');
|
||||
if (title.length === 0) {
|
||||
title = $('<div class="title" />').appendTo(wrap);
|
||||
}
|
||||
title.html(text);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Set the popover's content
|
||||
*
|
||||
* @param html
|
||||
* @return jQuery
|
||||
*/
|
||||
content: function(html) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var content = data.popover.find('.content');
|
||||
var wrap = data.popover.find('.wrap');
|
||||
if (content.length === 0) {
|
||||
content = $('<div class="content" />').appendTo(wrap);
|
||||
}
|
||||
content.html(html);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Read content with AJAX and set popover's content.
|
||||
*
|
||||
* @param string
|
||||
* @param object
|
||||
* @return jQuery
|
||||
*/
|
||||
ajax: function(url, ajax_params) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
var ajax_defaults = {
|
||||
url: url,
|
||||
success: function(ajax_data) {
|
||||
var content = data.popover.find('.content');
|
||||
var wrap = data.popover.find('.wrap');
|
||||
if (content.length === 0) {
|
||||
content = $('<div class="content" />').appendTo(wrap);
|
||||
}
|
||||
content.html(ajax_data);
|
||||
}
|
||||
}
|
||||
var ajax_options = $.extend({}, ajax_defaults, ajax_params);
|
||||
$.ajax(ajax_options);
|
||||
}
|
||||
});
|
||||
},
|
||||
setOption: function(option, value) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.popover('getData');
|
||||
|
||||
if (data) {
|
||||
data.options[option] = value;
|
||||
$this.data('popover', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getData: function() {
|
||||
var ret = [];
|
||||
this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.data('popover');
|
||||
|
||||
if (data) ret.push(data);
|
||||
});
|
||||
|
||||
if (ret.length == 0) {
|
||||
return;
|
||||
}
|
||||
if (ret.length == 1) {
|
||||
ret = ret[0];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.popover = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if ( typeof method === 'object' || !method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.popover');
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* jQuery.popover example stylesheet.
|
||||
* By Davey IJzermans
|
||||
* http://daveyyzermans.nl
|
||||
*
|
||||
* License: public domain
|
||||
*/
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
max-height: 240px;
|
||||
width: 220px;
|
||||
display: none;
|
||||
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.popover.wider {
|
||||
width: 340px;
|
||||
}
|
||||
.popover.large {
|
||||
width: 470px;
|
||||
max-height: 350px;
|
||||
}
|
||||
.popover .arrow, .popover .top-arrow {
|
||||
position: absolute;
|
||||
top: 0; left: 50%;
|
||||
margin: -10px 0 0 -3px;
|
||||
width: 0; height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #121212;
|
||||
}
|
||||
.popover .bottom-arrow {
|
||||
top: 100%; left: 50%;
|
||||
margin: 0 0 0 -3px;
|
||||
border-top: 5px solid #121212;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
.popover .left-arrow {
|
||||
top: 50%; left: -10px;
|
||||
margin: -3px 0 0;
|
||||
border-right: 5px solid #121212;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
.popover .right-arrow {
|
||||
top: 50%; left: 100%;
|
||||
margin: -3px 0 0;
|
||||
border-left: 5px solid #121212;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
.popover .wrap {
|
||||
background: white;
|
||||
border: 3px solid #121212;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.popover .title {
|
||||
background: #121212 url(popover_gradient.png) repeat-x;
|
||||
color: white;
|
||||
font-size: 1.3em;
|
||||
text-align: center;
|
||||
padding: 8px 0 0 0;
|
||||
height: 27px;
|
||||
}
|
||||
.popover .content {
|
||||
padding: 15px;
|
||||
max-height: 175px;
|
||||
overflow: auto;
|
||||
line-height: 1.3em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.popover.large .content {
|
||||
max-height: 285px;
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user