aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
Diffstat (limited to 'demos')
-rw-r--r--demos/accordion/hoverintent.html61
-rw-r--r--demos/autocomplete/combobox.html155
-rw-r--r--demos/sortable/portlets.html1
3 files changed, 119 insertions, 98 deletions
diff --git a/demos/accordion/hoverintent.html b/demos/accordion/hoverintent.html
index 023682d4b..0ff63a321 100644
--- a/demos/accordion/hoverintent.html
+++ b/demos/accordion/hoverintent.html
@@ -16,11 +16,11 @@
});
});
- var cfg = ($.hoverintent = {
- sensitivity: 7,
- interval: 100
- });
-
+ /*
+ * hoverIntent | Copyright 2011 Brian Cherne
+ * http://cherne.net/brian/resources/jquery.hoverIntent.html
+ * modified by the jQuery UI team
+ */
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
@@ -29,41 +29,56 @@
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
- var that = this,
+ var currentX, currentY, timeout,
args = arguments,
target = $( event.target ),
- cX, cY, pX, pY;
+ previousX = event.pageX,
+ previousY = event.pageY;
function track( event ) {
- cX = event.pageX;
- cY = event.pageY;
+ currentX = event.pageX;
+ currentY = event.pageY;
};
- pX = event.pageX;
- pY = event.pageY;
+
function clear() {
target
.unbind( "mousemove", track )
- .unbind( "mouseout", arguments.callee );
+ .unbind( "mouseout", clear );
clearTimeout( timeout );
}
+
function handler() {
- if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
+ var prop,
+ orig = event;
+
+ if ( ( Math.abs( previousX - currentX ) +
+ Math.abs( previousY - currentY ) ) < 7 ) {
clear();
- event.type = "hoverintent";
- // prevent accessing the original event since the new event
+
+ event = $.Event( "hoverintent" );
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ // Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
- event.originalEvent = {};
- jQuery.event.handle.apply( that, args );
+ delete event.originalEvent;
+
+ target.trigger( event );
} else {
- pX = cX;
- pY = cY;
- timeout = setTimeout( handler, cfg.interval );
+ previousX = currentX;
+ previousY = currentY;
+ timeout = setTimeout( handler, 100 );
}
}
- var timeout = setTimeout( handler, cfg.interval );
- target.mousemove( track ).mouseout( clear );
- return true;
+
+ timeout = setTimeout( handler, 100 );
+ target.bind({
+ mousemove: track,
+ mouseout: clear
+ });
}
};
</script>
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 0d59db670..f89f260eb 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -37,91 +37,52 @@
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
- var input,
- that = this,
- wasOpen = false,
- select = this.element.hide(),
- selected = select.children( ":selected" ),
- value = selected.val() ? selected.text() : "",
- wrapper = this.wrapper = $( "<span>" )
- .addClass( "ui-combobox" )
- .insertAfter( select );
-
- function removeIfInvalid( element ) {
- var value = $( element ).val(),
- matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
- valid = false;
- select.children( "option" ).each(function() {
- if ( $( this ).text().match( matcher ) ) {
- this.selected = valid = true;
- return false;
- }
- });
+ this.wrapper = $( "<span>" )
+ .addClass( "ui-combobox" )
+ .insertAfter( this.element );
- if ( !valid ) {
- // remove invalid value, as it didn't match anything
- $( element )
- .val( "" )
- .attr( "title", value + " didn't match any item" )
- .tooltip( "open" );
- select.val( "" );
- setTimeout(function() {
- input.tooltip( "close" ).attr( "title", "" );
- }, 2500 );
- input.data( "ui-autocomplete" ).term = "";
- }
- }
+ this._createAutocomplete();
+ this._createShowAllButton();
+ },
+
+ _createAutocomplete: function() {
+ var selected = this.element.children( ":selected" ),
+ value = selected.val() ? selected.text() : "";
- input = $( "<input>" )
- .appendTo( wrapper )
+ this.input = $( "<input>" )
+ .appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
- .addClass( "ui-state-default ui-combobox-input" )
+ .addClass( "ui-state-default ui-combobox-input ui-widget ui-widget-content ui-corner-left" )
.autocomplete({
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 {
- label: text.replace(
- new RegExp(
- "(?![^&;]+;)(?!<[^<>]*)(" +
- $.ui.autocomplete.escapeRegex(request.term) +
- ")(?![^<>]*>)(?![^&;]+;)", "gi"
- ), "<strong>$1</strong>" ),
- value: text,
- option: this
- };
- }) );
- },
- select: function( event, ui ) {
- ui.item.option.selected = true;
- that._trigger( "selected", event, {
- item: ui.item.option
- });
- },
- change: function( event, ui ) {
- if ( !ui.item ) {
- removeIfInvalid( this );
- }
- }
+ source: $.proxy( this, "_source" )
})
- .addClass( "ui-widget ui-widget-content ui-corner-left" );
+ .tooltip({
+ tooltipClass: "ui-state-highlight"
+ });
+
+ this._on( this.input, {
+ autocompleteselect: function( event, ui ) {
+ ui.item.option.selected = true;
+ this._trigger( "select", event, {
+ item: ui.item.option
+ });
+ },
+
+ autocompletechange: "_removeIfInvalid"
+ });
+ },
- input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
- return $( "<li>" )
- .append( "<a>" + item.label + "</a>" )
- .appendTo( ul );
- };
+ _createShowAllButton: function() {
+ var wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
- .appendTo( wrapper )
+ .appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
@@ -136,18 +97,62 @@
.click(function() {
input.focus();
- // close if already visible
+ // Close if already visible
if ( wasOpen ) {
return;
}
- // pass empty string as value to search for, displaying all results
+ // Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
+ },
+
+ _source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( this.element.children( "option" ).map(function() {
+ var text = $( this ).text();
+ if ( this.value && ( !request.term || matcher.test(text) ) )
+ return {
+ label: text,
+ value: text,
+ option: this
+ };
+ }) );
+ },
+
+ _removeIfInvalid: function( event, ui ) {
- input.tooltip({
- tooltipClass: "ui-state-highlight"
+ // Selected an item, nothing to do
+ if ( ui.item ) {
+ return;
+ }
+
+ // Search for a match (case-insensitive)
+ var value = this.input.val(),
+ valueLowerCase = value.toLowerCase(),
+ valid = false;
+ this.element.children( "option" ).each(function() {
+ if ( $( this ).text().toLowerCase() === valueLowerCase ) {
+ this.selected = valid = true;
+ return false;
+ }
});
+
+ // Found a match, nothing to do
+ if ( valid ) {
+ return;
+ }
+
+ // Remove invalid value
+ this.input
+ .val( "" )
+ .attr( "title", value + " didn't match any item" )
+ .tooltip( "open" );
+ this.element.val( "" );
+ this._delay(function() {
+ this.input.tooltip( "close" ).attr( "title", "" );
+ }, 2500 );
+ this.input.data( "ui-autocomplete" ).term = "";
},
_destroy: function() {
diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html
index 24582f502..5a3f2b662 100644
--- a/demos/sortable/portlets.html
+++ b/demos/sortable/portlets.html
@@ -11,6 +11,7 @@
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
+ body { min-width: 520px; }
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-10 13:45:33 +0000