reinit
This commit is contained in:
Denis Knauf
commit
ced6c67fcc
664 changed files with 115177 additions and 0 deletions
|
|
@ -0,0 +1 @@
|
|||
<p><strong>This content was loaded via ajax.</strong></p>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p><strong>This other content was loaded via ajax.</strong></p>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Custom animation demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-explode.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#show-option" ).tooltip({
|
||||
show: {
|
||||
effect: "slideDown",
|
||||
delay: 250
|
||||
}
|
||||
});
|
||||
$( "#hide-option" ).tooltip({
|
||||
hide: {
|
||||
effect: "explode",
|
||||
delay: 250
|
||||
}
|
||||
});
|
||||
$( "#open-event" ).tooltip({
|
||||
show: null,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom"
|
||||
},
|
||||
open: function( event, ui ) {
|
||||
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>There are various ways to customize the animation of a tooltip.</p>
|
||||
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
|
||||
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
|
||||
<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo shows how to customize animations using the show and hide options,
|
||||
as well as the open event.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Custom content</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.photo {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
.photo .ui-widget-header {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.map {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
.ui-tooltip {
|
||||
max-width: 350px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( document ).tooltip({
|
||||
items: "img, [data-geo], [title]",
|
||||
content: function() {
|
||||
var element = $( this );
|
||||
if ( element.is( "[data-geo]" ) ) {
|
||||
var text = element.text();
|
||||
return "<img class='map' alt='" + text +
|
||||
"' src='http://maps.google.com/maps/api/staticmap?" +
|
||||
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
|
||||
text + "'>";
|
||||
}
|
||||
if ( element.is( "[title]" ) ) {
|
||||
return element.attr( "title" );
|
||||
}
|
||||
if ( element.is( "img" ) ) {
|
||||
return element.attr( "alt" );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget photo">
|
||||
<div class="ui-widget-header ui-corner-all">
|
||||
<h2>St. Stephen's Cathedral</h2>
|
||||
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo>Vienna, Austria</a></h3>
|
||||
</div>
|
||||
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
|
||||
<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget photo">
|
||||
<div class="ui-widget-header ui-corner-all">
|
||||
<h2>Tower Bridge</h2>
|
||||
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo>London, England</a></h3>
|
||||
</div>
|
||||
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
|
||||
<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
|
||||
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
|
||||
<p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Custom Styling</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( document ).tooltip({
|
||||
position: {
|
||||
my: "center bottom-20",
|
||||
at: "center top",
|
||||
using: function( position, feedback ) {
|
||||
$( this ).css( position );
|
||||
$( "<div>" )
|
||||
.addClass( "arrow" )
|
||||
.addClass( feedback.vertical )
|
||||
.addClass( feedback.horizontal )
|
||||
.appendTo( this );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ui-tooltip, .arrow:after {
|
||||
background: black;
|
||||
border: 2px solid white;
|
||||
}
|
||||
.ui-tooltip {
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
font: bold 14px "Helvetica Neue", Sans-Serif;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 0 7px black;
|
||||
}
|
||||
.arrow {
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
bottom: -16px;
|
||||
}
|
||||
.arrow.top {
|
||||
top: -16px;
|
||||
bottom: auto;
|
||||
}
|
||||
.arrow.left {
|
||||
left: 20%;
|
||||
}
|
||||
.arrow:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: -20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
box-shadow: 6px 5px 9px -9px black;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
tranform: rotate(45deg);
|
||||
}
|
||||
.arrow.top:after {
|
||||
bottom: -20px;
|
||||
top: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label> <input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( document ).tooltip();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Forms</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
label {
|
||||
display: inline-block; width: 5em;
|
||||
}
|
||||
fieldset div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
fieldset .help {
|
||||
display: inline-block;
|
||||
}
|
||||
.ui-tooltip {
|
||||
width: 210px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var tooltips = $( "[title]" ).tooltip();
|
||||
$( "<button>" )
|
||||
.text( "Show help" )
|
||||
.button()
|
||||
.click(function() {
|
||||
tooltips.tooltip( "open" );
|
||||
})
|
||||
.insertAfter( "form" );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="firstname">Firstname</label>
|
||||
<input id="firstname" name="firstname" title="Please provide your firstname.">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Lastname</label>
|
||||
<input id="lastname" name="lastname" title="Please provide also your lastname.">
|
||||
</div>
|
||||
<div>
|
||||
<label for="address">Address</label>
|
||||
<input id="address" name="address" title="Your home or work address.">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
|
||||
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="custom-style.html">Custom style with arrow</a></li>
|
||||
<li><a href="forms.html">Forms with tooltips</a></li>
|
||||
<li><a href="tracking.html">Track the mouse</a></li>
|
||||
<li><a href="custom-animation.html">Custom animation</a></li>
|
||||
<li><a href="custom-content.html">Custom content</a></li>
|
||||
<li><a href="video-player.html">Video Player</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Track the mouse</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( document ).tooltip({
|
||||
track: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Video Player demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.9.1.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.player {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
border: 2px groove gray;
|
||||
background: rgb(200, 200, 200);
|
||||
text-align: center;
|
||||
line-height: 300px;
|
||||
}
|
||||
.ui-tooltip {
|
||||
border: 1px solid white;
|
||||
background: rgba(20, 20, 20, 1);
|
||||
color: white;
|
||||
}
|
||||
.set {
|
||||
display: inline-block;
|
||||
}
|
||||
.notification {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
padding: .5em;
|
||||
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function notify( input ) {
|
||||
var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
|
||||
$( "<div>" )
|
||||
.appendTo( document.body )
|
||||
.text( msg )
|
||||
.addClass( "notification ui-state-default ui-corner-bottom" )
|
||||
.position({
|
||||
my: "center top",
|
||||
at: "center top",
|
||||
of: window
|
||||
})
|
||||
.show({
|
||||
effect: "blind"
|
||||
})
|
||||
.delay( 1000 )
|
||||
.hide({
|
||||
effect: "blind",
|
||||
duration: "slow"
|
||||
}, function() {
|
||||
$( this ).remove();
|
||||
});
|
||||
}
|
||||
|
||||
$( "button" ).each(function() {
|
||||
var button = $( this ).button({
|
||||
icons: {
|
||||
primary: $( this ).data( "icon" )
|
||||
},
|
||||
text: !!$( this ).attr( "title" )
|
||||
});
|
||||
button.click(function() {
|
||||
notify( button );
|
||||
});
|
||||
});
|
||||
$( ".set" ).buttonset({
|
||||
items: "button"
|
||||
});
|
||||
|
||||
$( document ).tooltip({
|
||||
position: {
|
||||
my: "center top",
|
||||
at: "center bottom+5",
|
||||
},
|
||||
show: {
|
||||
duration: "fast"
|
||||
},
|
||||
hide: {
|
||||
effect: "hide"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="player">Here Be Video (HTML5?)</div>
|
||||
<div class="tools">
|
||||
<span class="set">
|
||||
<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
|
||||
<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
|
||||
</span>
|
||||
<div class="set">
|
||||
<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
|
||||
<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
|
||||
</div>
|
||||
<button title="Share this video">Share</button>
|
||||
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue