library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Widget: Style updates

Browse Source 
Ref #14246
Ref gh-1588
This commit is contained in:
Alexander Schmitz 2015-08-21 00:13:00 -04:00
parent 1f7164660e
commit b5f0fae57a
2 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demos/widget/default.html
View File

@ -30,12 +30,12 @@
green: 0,
blue: 0,
// callbacks
// Callbacks
change: null,
random: null
},
// the constructor
// The constructor
_create: function() {
this.element
// add a class for theming
@ -50,7 +50,7 @@
.appendTo( this.element )
.button();
// bind click events on the changer button to the random method
// Bind click events on the changer button to the random method
this._on( this.changer, {
// _on won't call random when widget is disabled
click: "random"
@ -58,7 +58,7 @@
this._refresh();
},
// called when created, and later when changing options
// Called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
@ -66,11 +66,11 @@
this.options.blue + ")"
);
// trigger a callback/event
// Trigger a callback/event
this._trigger( "change" );
},
// a public method to change the color to a random value
// A public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
@ -79,13 +79,13 @@
blue: Math.floor( Math.random() * 256 )
};
// trigger an event, check if it's canceled
// Trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},
// events bound via _on are removed automatically
// Events bound via _on are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
@ -115,16 +115,16 @@
}
});
// initialize with default options
// Initialize with default options
$( "#my-widget1" ).colorize();
// initialize with two customized options
// Initialize with two customized options
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});
// initialize with custom green value
// Initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
@ -133,7 +133,7 @@
}
});
// click to toggle enabled/disabled
// Click to toggle enabled/disabled
$( "#disable" ).on( "click", function() {
// use the custom selector created for each widget to find all instances
// all instances are toggled together, so we can check the state from the first
@ -144,7 +144,7 @@
}
});
// click to set options after initialization
// Click to set options after initialization
$( "#green" ).on( "click", function() {
$( ":custom-colorize" ).colorize( "option", {
red: 64,

65
ui/widget.js
View File

@ -40,7 +40,7 @@ $.cleanData = ( function( orig ) {
$( elem ).triggerHandler( "remove" );
}
// http://bugs.jquery.com/ticket/8235
// Http://bugs.jquery.com/ticket/8235
} catch ( e ) {}
}
orig( elems );
@ -49,7 +49,8 @@ $.cleanData = ( function( orig ) {
$.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
// proxiedPrototype allows the provided prototype to remain unmodified
// ProxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
@ -66,7 +67,7 @@ $.widget = function( name, base, prototype ) {
prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
}
// create selector for plugin
// Create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName );
};
@ -74,30 +75,35 @@ $.widget = function( name, base, prototype ) {
$[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword
// Allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}
// allow instantiation without initializing for simple inheritance
// Allow instantiation without initializing for simple inheritance
// must use "new" keyword (the code above always passes args)
if ( arguments.length ) {
this._createWidget( options, element );
}
};
// extend with the existing constructor to carry over any static properties
// Extend with the existing constructor to carry over any static properties
$.extend( constructor, existingConstructor, {
version: prototype.version,
// copy the object used to create the prototype in case we need to
// Copy the object used to create the prototype in case we need to
// redefine the widget later
_proto: $.extend( {}, prototype ),
// track widgets that inherit from this widget in case this widget is
// Track widgets that inherit from this widget in case this widget is
// redefined after a widget inherits from it
_childConstructors: []
} );
basePrototype = new base();
// we need to make the options hash a property directly on the new instance
// We need to make the options hash a property directly on the new instance
// otherwise we'll modify the options hash on the prototype that we're
// inheriting from
basePrototype.options = $.widget.extend( {}, basePrototype.options );
@ -131,6 +137,7 @@ $.widget = function( name, base, prototype ) {
} )();
} );
constructor.prototype = $.widget.extend( basePrototype, {
// TODO: remove support for widgetEventPrefix
// always use the name + a colon as the prefix, e.g., draggable:start
// don't prefix for widgets that aren't DOM-based
@ -150,11 +157,12 @@ $.widget = function( name, base, prototype ) {
$.each( existingConstructor._childConstructors, function( i, child ) {
var childPrototype = child.prototype;
// redefine the child widget using the same prototype that was
// Redefine the child widget using the same prototype that was
// originally used, but inherit from the new version of the base
$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
} );
// remove the list of existing child constructors from the old constructor
// Remove the list of existing child constructors from the old constructor
// so the old child constructors can be garbage collected
delete existingConstructor._childConstructors;
} else {
@ -176,12 +184,15 @@ $.widget.extend = function( target ) {
for ( key in input[ inputIndex ] ) {
value = input[ inputIndex ][ key ];
if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
// Clone objects
if ( $.isPlainObject( value ) ) {
target[ key ] = $.isPlainObject( target[ key ] ) ?
$.widget.extend( {}, target[ key ], value ) :
// Don't extend strings, arrays, etc. with objects
$.widget.extend( {}, value );
// Copy everything else by reference
} else {
target[ key ] = value;
@ -257,7 +268,7 @@ $.Widget.prototype = {
classes: {},
disabled: false,
// callbacks
// Callbacks
create: null
},
_createWidget: function( options, element ) {
@ -281,9 +292,11 @@ $.Widget.prototype = {
}
} );
this.document = $( element.style ?
// element within the document
// Element within the document
element.ownerDocument :
// element is window or document
// Element is window or document
element.document || element );
this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
}
@ -310,7 +323,7 @@ $.Widget.prototype = {
that._removeClass( value, key );
} );
// we can probably remove the unbind calls in 2.0
// We can probably remove the unbind calls in 2.0
// all event bindings should go through this._on()
this.element
.off( this.eventNamespace )
@ -319,7 +332,7 @@ $.Widget.prototype = {
.off( this.eventNamespace )
.removeAttr( "aria-disabled" );
// clean up events and states
// Clean up events and states
this.bindings.off( this.eventNamespace );
},
_destroy: $.noop,
@ -335,12 +348,14 @@ $.Widget.prototype = {
i;
if ( arguments.length === 0 ) {
// don't return a reference to the internal hash
// Don't return a reference to the internal hash
return $.widget.extend( {}, this.options );
}
if ( typeof key === "string" ) {
// handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
// Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
options = {};
parts = key.split( "." );
key = parts.shift();
@ -494,14 +509,14 @@ $.Widget.prototype = {
var delegateElement,
instance = this;
// no suppressDisabledCheck flag, shuffle arguments
// No suppressDisabledCheck flag, shuffle arguments
if ( typeof suppressDisabledCheck !== "boolean" ) {
handlers = element;
element = suppressDisabledCheck;
suppressDisabledCheck = false;
}
// no element argument, shuffle and use this.element
// No element argument, shuffle and use this.element
if ( !handlers ) {
handlers = element;
element = this.element;
@ -513,7 +528,8 @@ $.Widget.prototype = {
$.each( handlers, function( event, handler ) {
function handlerProxy() {
// allow widgets to customize the disabled handling
// Allow widgets to customize the disabled handling
// - disabled as an array instead of boolean
// - disabled class as method for disabling individual parts
if ( !suppressDisabledCheck &&
@ -525,7 +541,7 @@ $.Widget.prototype = {
.apply( instance, arguments );
}
// copy the guid so direct unbinding works
// Copy the guid so direct unbinding works
if ( typeof handler !== "string" ) {
handlerProxy.guid = handler.guid =
handler.guid || handlerProxy.guid || $.guid++;
@ -595,11 +611,12 @@ $.Widget.prototype = {
event.type = ( type === this.widgetEventPrefix ?
type :
this.widgetEventPrefix + type ).toLowerCase();
// the original event may come from any element
// The original event may come from any element
// so we need to reset the target on the new event
event.target = this.element[ 0 ];
// copy original event properties over to the new event
// Copy original event properties over to the new event
orig = event.originalEvent;
if ( orig ) {
for ( prop in orig ) {