<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Combobox Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- /* TODO shouldn't be necessary */
- .ui-button { margin-left: -1px; }
- .ui-button-icon-only .ui-button-text { padding: 0.35em; }
- .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Combobox</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
++ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-button { margin-left: -1px; }
+ .ui-button-icon-only .ui-button-text { padding: 0.35em; }
+ .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
</style>
- <script type="text/javascript">
- (function($) {
- $.widget("ui.combobox", {
+ <script>
+ (function( $ ) {
+ $.widget( "ui.combobox", {
_create: function() {
- var self = this;
- var select = this.element.hide();
- var input = $("<input>")
- .insertAfter(select)
+ var self = this,
+ select = this.element.hide(),
+ selected = select.children( ":selected" ),
+ value = selected.val() ? selected.text() : "";
+ var input = this.input = $( "<input>" )
+ .insertAfter( select )
+ .val( value )
.autocomplete({
- source: function(request, response) {
- var matcher = new RegExp(request.term, "i");
- response(select.children("option").map(function() {
- var text = $(this).text();
- if (this.value && (!request.term || matcher.test(text)))
+ delay: 0,
+ minLength: 0,
+ source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( select.children( "option" ).map(function() {
+ var text = $( this ).text();
+ if ( this.value && ( !request.term || matcher.test(text) ) )
return {
- id: this.value,
- label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
- value: text
+ label: text.replace(
+ new RegExp(
+ "(?![^&;]+;)(?!<[^<>]*)(" +
+ $.ui.autocomplete.escapeRegex(request.term) +
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
+ ), "<strong>$1</strong>" ),
+ value: text,
+ option: this
};
- }));
+ }) );
},
- delay: 0,
- change: function(event, ui) {
- if (!ui.item) {
- var value = this.value;
- // remove invalid value, as it didn't match anything, and display a hint
- $(this).val("").attr("title", value + " didn't match any item").tooltip("open");
- setTimeout(function() {
- input.tooltip("close").attr("title", "");
- }, 2500);
- return false;
- }
- select.val(ui.item.id);
- self._trigger("selected", event, {
- item: select.find("[value='" + ui.item.id + "']")
+ select: function( event, ui ) {
+ ui.item.option.selected = true;
+ self._trigger( "selected", event, {
+ item: ui.item.option
});
-
},
- minLength: 0
+ change: function( event, ui ) {
+ if ( !ui.item ) {
+ var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
+ valid = false;
+ select.children( "option" ).each(function() {
+ if ( $( this ).text().match( matcher ) ) {
+ this.selected = valid = true;
+ return false;
+ }
+ });
+ if ( !valid ) {
+ // remove invalid value, as it didn't match anything
- $( this ).val( "" );
- select.val( "" );
++ $(this).val( "").attr( "title", value + " didn't match any item" ).tooltip( "open" );
++ setTimeout( function() {
++ input.tooltip( "close" ).attr( "title", "" );
++ }, 2500 );
+ input.data( "autocomplete" ).term = "";
+ return false;
+ }
+ }
+ }
+ })
+ .addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
+ return $( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "</a>" )
+ .appendTo( ul );
+ };
+
+ this.button = $( "<button type='button'> </button>" )
+ .attr( "tabIndex", -1 )
+ .attr( "title", "Show All Items" )
+ .insertAfter( input )
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
})
- .addClass("ui-widget ui-widget-content ui-corner-left");
- var button = $("<button> </button>")
- .attr("tabIndex", -1)
- .attr("title", "Show All Items")
- .insertAfter(input)
- .button({
- icons: {
- primary: "ui-icon-triangle-1-s"
- },
- text: false
- }).removeClass("ui-corner-all")
- .addClass("ui-corner-right ui-button-icon")
- .click(function() {
- // close if already visible
- if (input.autocomplete("widget").is(":visible")) {
- input.autocomplete("close");
- return;
- }
- // pass empty string as value to search for, displaying all results
- input.autocomplete("search", "");
- input.focus();
- });
-
- input.tooltip({
- position: {
- offset: (button.width() + 5) + " 0"
- },
- tooltipClass: "ui-state-highlight"
- });
+ .removeClass( "ui-corner-all" )
+ .addClass( "ui-corner-right ui-button-icon" )
+ .click(function() {
+ // close if already visible
+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+ input.autocomplete( "close" );
+ return;
+ }
+
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete( "search", "" );
+ input.focus();
+ });
++
++ input.tooltip( {
++ position: {
++ offset: (this.button.width() + 5) + " 0"
++ }
++ }).tooltip( "widget" ).addClass( "ui-state-highlight" );
+ },
+
+ destroy: function() {
+ this.input.remove();
+ this.button.remove();
+ this.element.show();
+ $.Widget.prototype.destroy.call( this );
}
});
+ })( jQuery );
- })(jQuery);
-
$(function() {
- $("#combobox").combobox();
- $("#toggle").click(function() {
- $("#combobox").toggle();
+ $( "#combobox" ).combobox();
+ $( "#toggle" ).click(function() {
+ $( "#combobox" ).toggle();
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta charset="utf-8">
<title>jQuery UI Demos</title>
- <link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <link type="text/css" href="demos.css" rel="stylesheet" />
- <script type="text/javascript" src="../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../external/jquery.bgiframe-2.1.1.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.accordion.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.autocomplete.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.datepicker.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.droppable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.progressbar.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.resizable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.selectable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.slider.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.sortable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.tabs.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.tooltip.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.blind.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.bounce.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.clip.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.drop.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.explode.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.fold.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.highlight.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.pulsate.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.scale.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.shake.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.slide.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.transfer.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
- <script type="text/javascript">
- jQuery(function($) {
+ <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
+ <link rel="stylesheet" href="demos.css">
+ <script src="../jquery-1.4.4.js"></script>
+ <script src="../external/jquery.bgiframe-2.1.2.js"></script>
+ <script src="../external/glob.js"></script>
+ <script src="../external/glob.de-DE.js"></script>
+ <script src="../ui/jquery.ui.core.js"></script>
+ <script src="../ui/jquery.ui.widget.js"></script>
+ <script src="../ui/jquery.ui.mouse.js"></script>
+ <script src="../ui/jquery.ui.accordion.js"></script>
+ <script src="../ui/jquery.ui.autocomplete.js"></script>
+ <script src="../ui/jquery.ui.button.js"></script>
+ <script src="../ui/jquery.ui.datepicker.js"></script>
+ <script src="../ui/jquery.ui.dialog.js"></script>
+ <script src="../ui/jquery.ui.draggable.js"></script>
+ <script src="../ui/jquery.ui.droppable.js"></script>
+ <script src="../ui/jquery.ui.menu.js"></script>
+ <script src="../ui/jquery.ui.position.js"></script>
+ <script src="../ui/jquery.ui.progressbar.js"></script>
+ <script src="../ui/jquery.ui.resizable.js"></script>
+ <script src="../ui/jquery.ui.selectable.js"></script>
+ <script src="../ui/jquery.ui.slider.js"></script>
+ <script src="../ui/jquery.ui.sortable.js"></script>
+ <script src="../ui/jquery.ui.spinner.js"></script>
+ <script src="../ui/jquery.ui.tabs.js"></script>
++ <script src="../ui/jquery.ui.tooltip.js"></script>
+ <script src="../ui/jquery.effects.core.js"></script>
+ <script src="../ui/jquery.effects.blind.js"></script>
+ <script src="../ui/jquery.effects.bounce.js"></script>
+ <script src="../ui/jquery.effects.clip.js"></script>
+ <script src="../ui/jquery.effects.drop.js"></script>
+ <script src="../ui/jquery.effects.explode.js"></script>
+ <script src="../ui/jquery.effects.fold.js"></script>
+ <script src="../ui/jquery.effects.highlight.js"></script>
+ <script src="../ui/jquery.effects.pulsate.js"></script>
+ <script src="../ui/jquery.effects.scale.js"></script>
+ <script src="../ui/jquery.effects.shake.js"></script>
+ <script src="../ui/jquery.effects.slide.js"></script>
+ <script src="../ui/jquery.effects.transfer.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-kz.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
+ <script>
+ $(function() {
$('.left-nav a').click(function(ev) {
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
<dd><a href="button/index.html">Button</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
+ <dd><a href="menu/index.html">Menu</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
+ <dd><a href="spinner/index.html">Spinner</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd>
+ <dd><a href="tooltip/index.html">Tooltip</a></dd>
<dt>Effects</dt>
<dd><a href="animate/index.html">Color Animation</a></dd>
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
--- /dev/null
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <title>jQuery UI Tooltip - Custom animation demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
++ <script type="text/javascript" src="../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo").tooltip({
+ open: function() {
+ $(this).tooltip("widget").stop(false, true).hide().slideDown();
+ },
+ close: function() {
+ $(this).tooltip("widget").stop(false, true).show().slideUp();
+ }
+ });
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
+ </head>
+ <body>
+
+ <div class="demo">
+
+ <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 tooltip's accordingly.</p>
+ <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+
+ </div><!-- End demo -->
+
+
+
+ <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><!-- End demo-description -->
+
+
+
+ </body>
+ </html>
--- /dev/null
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
++ <script type="text/javascript" src="../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo").tooltip();
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
+ </head>
+ <body>
+
+ <div class="demo">
+
+ <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 tooltip's accordingly.</p>
+ <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+
+ </div><!-- End demo -->
+
+
+
+ <div class="demo-description">
+
+ <p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+
+ </div><!-- End demo-description -->
+
+
+
+ </body>
+ </html>
--- /dev/null
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
++ <script type="text/javascript" src="../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo").tooltip({
+ items: "[href], [title]",
+ content: function(response) {
+ var href = $(this).attr("href");
+ if (/^#/.test(href)) {
+ return $(href).html();
+ } else if (href) {
+ $.get(href, response);
+ return "loading...";
+ }
+ return this.title;
+ }
+ });
+ $("#footnotes").hide();
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
+ </head>
+ <body>
+
+ <div class="demo">
+ <ul>
+ <li>
+ <a href="#footnote1">I'm a link to a footnote.</a>
+ </li>
+ <li>
+ <a href="#footnote2">I'm another link to a footnote.</a>
+ </li>
+ </ul>
+ <input title="This is just an input, nothing special" />
+
+ <ul>
+ <li>
+ <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
+ </li>
+ <li>
+ <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
+ </li>
+ </ul>
+
+ <div id="footnotes">
+ <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+ <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
+ </div>
+ </div><!-- End demo -->
+
+
+
+ <div class="demo-description">
+
+ <p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+
+ </div><!-- End demo-description -->
+
+
+
+ </body>
+ </html>
--- /dev/null
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
++ <script type="text/javascript" src="../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("[title]").tooltip().unbind(".tooltip");
+ $("<button/>").text("Show help").button().toggle(function() {
+ $(":ui-tooltip").tooltip("open");
+ }, function() {
+ $(":ui-tooltip").tooltip("close");
+ }).appendTo("form");
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ .ui-icon { display: inline-block; }
+ fieldset div {
+ margin-bottom: 2em;
+ }
+ .ui-tooltip { width: 210px; }
+ </style>
+ </head>
+ <body>
+
+ <div class="demo">
+
+ <form>
+ <fieldset>
+ <div>
+ <label for="firstname">Firstname</label>
+ <input id="firstname" name="firstname" />
+ <span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="lastname">Lastname</label>
+ <input id="lastname" name="lastname" />
+ <span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="address">Address</label>
+ <input id="address" name="address" />
+ <span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ </fieldset>
+ </form>
+
+ </div><!-- End demo -->
+
+
+
+ <div class="demo-description">
+
+ <p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
+
+ <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
+
+ </div><!-- End demo-description -->
+
+
+
+ </body>
+ </html>
--- /dev/null
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
++ <script type="text/javascript" src="../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo").tooltip({
+ open: function() {
+ var tooltip = $(this).tooltip("widget");
+ $(document).mousemove(function(event) {
+ tooltip.position({
+ my: "left center",
+ at: "right center",
+ offset: "25 25",
+ of: event
+ });
+ })
+ // trigger once to override element-relative positioning
+ .mousemove();
+ },
+ close: function() {
+ $(document).unbind("mousemove");
+ }
+ });
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
+ </head>
+ <body>
+
+ <div class="demo">
+
+ <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 tooltip's accordingly.</p>
+ <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+
+ </div><!-- End demo -->
+
+
+
+ <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><!-- End demo-description -->
+
+
+
+ </body>
+ </html>
--- /dev/null
- <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Tooltip Test Suite</title>
+
+ <link type="text/css" href="../../../themes/base/jquery.ui.tooltip.css" rel="stylesheet" />
+
++ <script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
+
+ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
+ <script type="text/javascript" src="../../../external/qunit.js"></script>
+ <script type="text/javascript" src="../../jquery.simulate.js"></script>
+ <script type="text/javascript" src="../testsuite.js"></script>
+
+ <script type="text/javascript" src="tooltip_core.js"></script>
+ <script type="text/javascript" src="tooltip_defaults.js"></script>
+ <script type="text/javascript" src="tooltip_events.js"></script>
+ <script type="text/javascript" src="tooltip_methods.js"></script>
+ <script type="text/javascript" src="tooltip_options.js"></script>
+ <script type="text/javascript" src="tooltip_tickets.js"></script>
+
+ </head>
+ <body>
+
+ <h1 id="qunit-header">jQuery UI Tooltip Test Suite</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests">
+ </ol>
+
+ <div id="main" style="position: absolute; top: -10000px; left: -10000px;">
+ <div>
+ <a id="tooltipped1" href="#" title="anchortitle">anchor</a>
+ <input title="inputtitle" />
+ </div>
+ </div>
+
+ </body>
+ </html>
<li><a href="button/button.html">Button</a></li>
<li><a href="datepicker/datepicker.html">Datepicker</a></li>
<li><a href="dialog/dialog.html">Dialog</a></li>
+ <li>
+ <a href="menu/menu.html">Menu</a>
+ <ul>
+ <li><a href="menu/contextmenu.html">Context Menu</a></li>
+ <li><a href="menu/nested.html">Nested Menu</a></li>
+ <li><a href="menu/drilldown.html">Drilldown Menu</a></li>
+ </ul>
+ </li>
<li><a href="progressbar/progressbar.html">Progressbar</a></li>
<li><a href="slider/slider.html">Slider</a></li>
+ <li><a href="spinner/spinner.html">Spinner</a></li>
<li><a href="tabs/tabs.html">Tabs</a></li>
+ <li><a href="tooltip/tooltip.html">Tooltip</a></li>
</ul>
</body>
--- /dev/null
- <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <title>Tooltip Visual Test: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
++ <script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript">
+ $(function() {
+ $.fn.themeswitcher && $('<div/>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+
+ function enable() {
+ // default
+ $("#context1, form, #childish").tooltip();
+
+ // custom class, replaces ui-widget-content
+ $("#context2").tooltip().each(function() {
+ $(this).tooltip("widget").addClass("ui-widget-header");
+ })
+ $("#right1").tooltip().tooltip("widget").addClass("ui-state-error");
+
+ // synchronous content
+ $("#footnotes").tooltip({
+ items: "[href^=#]",
+ content: function() {
+ return $($(this).attr("href")).html();
+ }
+ });
+ // asynchronous content
+ $("#ajax").tooltip({
+ content: function(response) {
+ $.get("ajaxcontent.php", response);
+ return "Loading...";
+ }
+ });
+ // asynchronous content with caching
+ var content;
+ $("#ajax2").tooltip({
+ content: function(response) {
+ if (content) {
+ return content;
+ }
+ $.ajax({
+ url: "ajaxcontent.php",
+ cache: false,
+ success: function(result) {
+ content = result;
+ response(result);
+ }
+ });
+ return "Loading...";
+ }
+ });
+
+ // custom position
+ $("#right2").tooltip({
+ position: {
+ my: "center top",
+ at: "center bottom",
+ offset: "0 10"
+ }
+ }).tooltip("widget").addClass("ui-state-highlight");
+
+ $("#button1").button();
+ $("#button2").button({
+ icons: {
+ primary: "ui-icon-wrench"
+ }
+ });
+ $("#button3, #button4").button({
+ icons: {
+ primary: "ui-icon-wrench"
+ },
+ text: false
+ });
+ $("#buttons").tooltip({
+ position: {
+ my: "center bottom",
+ at: "center top",
+ offset: "0 -5"
+ }
+ });
+ }
+ enable();
+
+ $("#disable").toggle(function() {
+ $("*").tooltip("disable");
+ }, function() {
+ $("*").tooltip("enable");
+ });
+ $("#toggle").toggle(function() {
+ $("*").tooltip("destroy");
+ }, function() {
+ enable();
+ });
+ });
+ </script>
+ </head>
+ <body>
+
+ <div style="width:300px">
+ <ul id="context1" class="ui-widget ui-widget-header">
+ <li><a href="#" title="Tooltip text 1">Anchor 1</a></li>
+ <li><a href="#" title="Tooltip text 2">Anchor 2</a></li>
+ <li><a href="#" title="Tooltip text 3">Anchor 3</a></li>
+ <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li>
+ <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li>
+ <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li>
+ </ul>
+
+ <div id="right1" style="position: absolute; right: 1em" title="right aligned element">
+ collision detection should kick in around here
+ </div>
+
+ <div id="footnotes" style="margin: 2em 0">
+ <a href="#footnote1">I'm a link to a footnote.</a>
+ <a href="#footnote2">I'm another link to a footnote.</a>
+ </div>
+
+ <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
+ right aligned with custom position
+ </div>
+
+ <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
+ gets its content via ajax
+ </div>
+ <div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen">
+ gets its content via ajax, caches the response
+ </div>
+
+ <div id="context2" class="ui-widget ui-widget-content">
+ <span title="something" style="border:1px solid blue">span</span>
+ <div title="something else" style="border:1px solid red;">
+ div
+ <span title="something more" style="border:1px solid green;">nested span</span>
+ </div>
+ </div>
+
+ <div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements">
+ Text in <strong>bold</strong>.
+ </div>
+
+ <form style="margin: 2em 0;">
+ <div>
+ <label for="first">First Name:</label>
+ <input id="first" title="Your first name is optional" />
+ </div>
+ <div>
+ <label for="last">Last Name:</label>
+ <input id="last" title="Your last name is optional" />
+ </div>
+ </form>
+
+ <div id="buttons">
+ <button id="button1" title="Button Tooltip">Button Label</button>
+ <button id="button2" title="Icon Button">Button with Icon</button>
+ <button id="button3">Icon Only Button 1</button>
+ <button id="button4">Icon Only Button 2</button>
+ </div>
+
+ <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+ <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
+
+ <button id="disable">Toggle disabled</button>
+ <button id="toggle">Toggle widget</button>
+ </div>
+
+ <div style="height: 2000px"></div>
+
+ </body>
+ </html>
@import url("jquery.ui.button.css");
@import url("jquery.ui.datepicker.css");
@import url("jquery.ui.dialog.css");
+@import url("jquery.ui.menu.css");
@import url("jquery.ui.progressbar.css");
@import url("jquery.ui.resizable.css");
+@import url("jquery.ui.selectable.css");
@import url("jquery.ui.slider.css");
+@import url("jquery.ui.spinner.css");
@import url("jquery.ui.tabs.css");
+ @import url("jquery.ui.tooltip.css");
projects / jquery-ui.git / commitdiff