[jQuery] Wrapping jQuery Objects
Hi, I'd like to know an elegant and efficient way to wrap jQuery objects.. Before jQuery, I would wrap DOM elements with additional inherited methods (like http://www.codeproject.com/KB/scripting/MiniRacer.aspx).. I know about extend but I need to be able to assign methods to only certain classes of elements, not all jQuery objects.. Can anyone point me in the right direction? Thanks..
[jQuery] jQuery.extend and prototype inheritance?
Hi All,
Sorry if this is my second post but I have no idea if my first post
went through.. Plus I have additional info/questions:
So I'm trying to wrap jQuery/DOM elements with custom methods.. I've
looked around and people claim you can use jQuery.extend (the one
documented under utilities not core) and extend a jQuery object using
prototypes.. Now I've been able to do this, it looks like it's not
actually using prototypes but property copies.. Does anyone have any
ideas about this?
The following is some test code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
titleUntitled Document/title
script type=text/javascript src=../js/jquery.js/script
script type=text/javascript
function baseProto(el) {
if(el){
$(el).click(function(e){
this.doSomething();
e.preventDefault();
});
}
};
baseProto.prototype.doSomething = function()
{
alert(DOING SOMETHING FUNCTION:
\n+this.doSomething);
}
var inherit = new baseProto(null);
function test(){
var answer = baseProto.prototype.isPrototypeOf($
(#a_element).get(0));
alert(Is baseProto a prototype of +$
(#a_element).get(0).id+? Answer: +answer);
var answer =
baseProto.prototype.isPrototypeOf(inherit);
alert(Is baseProto a prototype of inherit
object? Answer: +answer);
baseProto.doSomething= function(){ alert(DOING
SOMETHING ELSE); };
};
$.fn.addProto = function(){
return this.each(function(){
jQuery.extend(this, new baseProto(this));
})
};
$(document).ready(function(){
$('a').addProto();
});
/script
/head
body
div
input name=Check if Prototype type=button value=See if
Prototype onclick=test(); /
/div
a id =a_element href=http://google.com;DO Something or Something
Else/a
/div
/body
/html
[jQuery] Re: Generating a Mousedown event programmatically - similar to click() generation..
Hi B,
I would think this is an important feature so the fact that you are
looking to do the same thing means I am not alone.. I'd like to
submit this as a feature but am still trying to figure out the state
of trigger's undocumented parameter fn:
http://groups.google.com/group/jquery-en/browse_thread/thread/ace02e1b78894fc2/1be5003cc4cd690c#1be5003cc4cd690c
The change is trivial but you have to change both the public trigger
function and the helper function (you'll find two trigger functions in
the jquery source).. Because I don't know where the undocumented fn
param is used, I put my new eventsParam after that:
/* helper trigger function */
trigger: function(type, data, elem, donative, extra, eventParams) {
// Clone the incoming data, if any
data = jQuery.makeArray(data || []);
// Handle a global trigger
if ( !elem ) {
// Only trigger if we've ever bound an event for it
if ( this.global[type] )
jQuery(*).add([window,
document]).trigger(type, data);
// Handle triggering a single element
} else {
// don't do events on text and comment nodes
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return undefined;
var val, ret, fn = jQuery.isFunction( elem[ type ] ||
null ),
// Check to see if we need to provide a fake
event, or not
event = !data[0] || !data[0].preventDefault;
// Pass along a fake event
if ( event ){
if(eventParams!=null){
eventParams.type = type;
eventParams.target= elem;
data.unshift( this.fix(eventParams) );
}
else
data.unshift( this.fix({ type: type,
target: elem }) );
}
// Enforce the right trigger type
data[0].type = type;
// Trigger the event
if ( jQuery.isFunction( jQuery.data(elem, handle) ) )
val = jQuery.data(elem, handle).apply( elem,
data );
// Handle triggering native .onfoo handlers
if ( !fn elem[on+type] elem[on+type].apply(
elem, data )
=== false )
val = false;
// Extra functions don't get the custom event object
if ( event )
data.shift();
// Handle triggering of extra function
if ( extra jQuery.isFunction( extra ) ) {
// call the extra function and tack the current
return value on
the end for possible inspection
ret = extra.apply( elem, val == null ? data :
data.concat( val ) );
// if anything is returned, give it precedence
and have it
overwrite the previous value
if (ret !== undefined)
val = ret;
}
// Trigger the native events (except for clicks on
links)
if ( fn donative !== false val !== false !
(jQuery.nodeName(elem, 'a') type == click) ) {
this.triggered = true;
try {
elem[ type ]();
// prevent IE from throwing an error for some
hidden elements
} catch (e) {}
}
this.triggered = false;
}
return val;
},
/* public trigger function*/
trigger: function( type, data, fn ,eventParams) {
return this.each(function(){
jQuery.event.trigger( type, data, this, true,
fn,eventParams );
});
},
On Feb 4, 5:03 pm, B [EMAIL PROTECTED] wrote:
Hi,
I am trying to also trigger the draggable from within a javascript
function. If possible can you please share your source hack.
Thanks
On Jan 29, 2:49 pm, edwardbaafi [EMAIL PROTECTED] wrote:
http://docs.jquery.com/Eventshasmousedown, mouseup, mousemove, etc
Yes, you are able to trigger these events using trigger( type,
data ), but what about setting the event properties?
In my case, when an element is draggable and it's mousedown event
fires, the
click function in ui.mouse.js is called.. A number of properties of
the event, like e.which, e.target, e.srcElement
[jQuery] Re: Generating a Mousedown event programmatically - similar to click() generation..
Here's an example using the hacked source that starts dragging one
element when you click (mousedown) on another element. Notice the null
value passed as the undocumented fn parameter:
html xmlns=http://www.w3.org/1999/xhtml;head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
titleProgrammatic Draggable/title
script type=text/javascript src=../js/jquery.js/script
script type=text/javascript src=../js/jquery.ui-1.0/
jquery.dimensions.js/script
script type=text/javascript src=../js/jquery.ui-1.0/ui.mouse.js/
script
script type=text/javascript src=../js/jquery.ui-1.0/
ui.draggable.js/script
script type=text/javascript src=../js/jquery.ui-1.0/
ui.draggable.ext.js/script
script type=text/javascript
$(document).ready(function(){
//bind event for one fire
$(#programmatic).one(mousedown,
function(e){
//make draggable element draggable
$(#draggable).draggable();
//trigger a mousedown to start a drag
$(#draggable).trigger(mousedown,
[],null,{srcElement:$
(#draggable),which:e.which,pageX:e.pageX,pageY:e.pageY});
});
});
/script
style type=text/css
#draggable{
width:100px;
height:100px;
background-color:#aa;
}
#programmatic{
width:100px;
height:100px;
background-color:#00aa00;
}
/style
/head
body
div id=draggabledraggable/div
div id=programmaticby dragging here/div
/body
/html
On Feb 4, 5:03 pm, B [EMAIL PROTECTED] wrote:
Hi,
I am trying to also trigger the draggable from within a javascript
function. If possible can you please share your source hack.
Thanks
On Jan 29, 2:49 pm, edwardbaafi [EMAIL PROTECTED] wrote:
http://docs.jquery.com/Eventshasmousedown, mouseup, mousemove, etc
Yes, you are able to trigger these events using trigger( type,
data ), but what about setting the event properties?
In my case, when an element is draggable and it's mousedown event
fires, the
click function in ui.mouse.js is called.. A number of properties of
the event, like e.which, e.target, e.srcElement, e.pageX, e.pageY are
needed but at least some of these properties are undefined..
Is it possible to set these properties when calling
trigger('mousedown') or with some other unpublished way?
Thanks,
Ed
[jQuery] Undocumented fn parameter in Trigger function
Does anyone know what the trigger function's fn parameter is for and
where it is used?
The API/1.2/Events documentation shows only two parameters for the
trigger function (type, data) yet the 1.2.2 source has three (type,
data, fn) and refers to this third parameter as the extra function.
I can't find anywhere that this is actually used within the source so
I would assume it is an undocumented feature..
The reason I'm interested in this is that I've extended the trigger
function to allow for adding event properties and would like to push
this as a necessary feature but this undocumented fn parameter would
still have to be passed.. For example the null param in:
$(#elementID).trigger(mousedown,[],null,{pageX:100,pageY:100});
If fn is used nowhere (in core or plugins) I'd push for this to come
after the event stub..
My original justification for this feature is here:
http://groups.google.com/group/jquery-en/browse_thread/thread/16f919bfcac235d2/87f0e55cf906208b?lnk=stq=#87f0e55cf906208b
and here:
http://groups.google.com/group/jquery-ui/browse_thread/thread/3bb15b95af851b05/d61e21e14f5867e8?lnk=stq=#d61e21e14f5867e8
Thanks,
Ed
[jQuery] Re: Generating a Mousedown event programmatically - similar to click() generation..
http://docs.jquery.com/Events has mousedown, mouseup, mousemove, etc
Yes, you are able to trigger these events using trigger( type,
data ), but what about setting the event properties?
In my case, when an element is draggable and it's mousedown event
fires, the
click function in ui.mouse.js is called.. A number of properties of
the event, like e.which, e.target, e.srcElement, e.pageX, e.pageY are
needed but at least some of these properties are undefined..
Is it possible to set these properties when calling
trigger('mousedown') or with some other unpublished way?
Thanks,
Ed
[jQuery] Generating a Mousedown event programmatically - similar to click() generation..
Hi.. Does anyone know how one could generate a mousedown event programmatically in order to cause a draggable to start dragging? I have a number of overlapping, absolutely positioned divs where certain sections of the background images are transparent.. What I need to do is to allow the user to drag the topmost div that is not transparent at the xy coord of the mouse down event.. What I'd like to do is to register for the mousedown event, iterate through all elements that overlap the xy coord, make the first one that isn't transparent at that point draggable, and fire a mousedown event on that element, starting the drag.. For example, if you look at the diagram (ascii art) at the bottom of this message, there are two rectangles (may be distorted) with a small rectangle cut out of the middle of each.. One rectangle filled with # chars is above the other which is filled with chars, but part of the rect is visible behind the # rect.. The user needs to be able to drag the rect by clicking through the hole in the # rect.. I have an in memory boundary representation of the filled rects, so I can query this to do the hit testing, but need a mechanism to start the dragging programmatically.. Generating a click event doesn't seem to work as this seems to fire after releasing the mouse where dragging occurs on mouse down.. Any thoughts? Thanks.. -Ed
