Jquery ui jquery小部件如何跟踪初始jquery对象？（事件案例场景）
我会尽量简单： 我在jqueryui的帮助下编写了一个jquery小部件（转到themeroller，下载一个主题，解压缩它，然后在Jquery ui jquery小部件如何跟踪初始jquery对象？（事件案例场景）,jquery-ui,widget,singleton,jquery,Jquery Ui,Widget,Singleton,Jquery,我会尽量简单： 我在jqueryui的帮助下编写了一个jquery小部件（转到themeroller，下载一个主题，解压缩它，然后在development bundle文件夹中找到一个名为ui的文件夹，然后只包含jquery.ui.widget.js，以便运行本例）： 然后是我们的小部件消息： from _onapply, this: jQuery17102845835909852654, toString, href, target, download, ping, rel, hreflang
development bundleuijquery.ui.widget.jsfrom _onapply, this:
jQuery17102845835909852654, toString, href, target, download, ping, rel, hreflang,
type, text, coords, charset, name, rev, shape, protocol, host, hostname ...
\utoString, href, target, download, ping, rel, hreflang, type, text, coords, charset,
name, rev, shape, protocol, host, hostname, port, pathname, search, hash
链接位置的引用
真的，找不到库所提供的抽象…继续搜索源代码以寻找答案。。。
谢谢。在寻找答案后，我得出以下结论：
对于Q.a）函数\u onapply（）
位于小部件的选项
会在内部更改执行上下文，因为它被分配给小部件的连接元素，所以它是元素的引用
对于Q.b）事件系统实现可观察模式；有人扮演被他人观察的角色，这就是小部件。一个可观察的对象不能响应它自己的信号（请参见注释（15）），因此，我们需要观察者来完成这项工作，即将事件处理程序附加到小部件所发信号的特定事件的其他元素上，您就得到了它，一个可观察的对象的响应（这是一个带有代码的新注释（16））
我们没有说过或写过的是，在小部件构造中可以有两种类型的可观察对象：一种是使用函数this.element.trigger（eventtype，data）
——一种通用触发器，另一种是称为this.\u触发器（eventtype，event，data）
，用于调用连接到小部件的函数，同时向可观察对象发送选项触发信号
在注释（9）和（11）下，我实现了这两种类型。选项触发器
的奇怪之处在于，它能够在事件名为namespacewidgetname
的地方调用并发出信号，而不需要连接点或任何东西
根据调用的函数的位置，选项触发器可分为两个子类：
-构造选项触发调用在构造中定义的函数的
和
-用户选项触发
，调用用户定义的函数并扩展小部件的语义，即使很难理解它的可用性，因为开发人员无法预测用户的扩展
对于Q.c）和Q.d）我觉得回答不安全
对于我的标题问题，关于jquery对象和小部件之间的连接，答案是没有，因为小部件与事件系统等元素紧密相连，jquery充当中间查找元素和附加属性的角色
让我们测试一下：
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Custom Effect Methods</title>
<style>
h1 {
color: #808080;
}
h1:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
a {
color: #808080;
background-color: #CCFF33;
}
</style>
</head>
<body>
<h1>Click Me</h1>
<div class=content>
<p>
<a href="http://speckyboy.com/2010/01/20/25-tutorials-and-resources-for-learning-jquery-ui/">spekyboy</a>
</p>
<p>
<a href="http://www.learningjquery.com/">learning jquery</a>
</p>
</div>
<script src="../jquery-1.7.1.js"></script>
<script src="../jquery.ui.widget.js"></script>
<script>
////////////////////////Plugin Creation (Widget Factory)////////////////////////
///////////////////////////mycompany.linkLocation///////////////////////////////
(function($, window, document, undefined){
//1. use jQuery.widget() method, the Widget factory, to create plugins
//--------------------------------------------------------------------
$.widget( "mycompany.linkLocation", {
//2. widget properties "foreground" and "background" (see docs)
//-------------------------------------------------------------
options: {
that: this,
color: "black",
"background-color": "transparent",
done: false,
//3. a callback from the relevant widget event: linkLocation_onapply (see docs)
//-----------------------------------------------------------------------------
//this refers to the element referencing the plugin (element.data property?)
//evt refers to the custom jquery event object
_onapply: function(evt, options){
//4. where is the reference to widget linkLocation for evt.target?
//----------------------------------------------------------------
$(evt.target).css(options);
}
},
//5. used during construction by the Widget Factory (see docs)
//------------------------------------------------------------
//this refers to the object built by the Widget Factory
_create: function() {
},
//6. used after initialization (see docs)
//---------------------------------------
//called as $("selector").linkLocation("option", option_object)
//or,
//$("selector").linkLocation("option", "key", "value")
//this refers to the object built by the Widget Factory
_setOption: function(key, value){
this.options[ key ] = value;
},
//7. public method apply()
//------------------------
//this refers to the object built by the Widget Factory
apply: function(evt){
if(!this.options.done){
//create a jquery object that wraps a specific dom element accessed
//through the this.element provided by the Widget Factory
var $this = $(this.element);
this._css($this);
////////////////////////////////////////////////////////////////////////////
//8. maybe one reason we done all these: add memory and execute only once!//
////////////////////////////////////////////////////////////////////////////
//--------------------------------------------------------------------------
this.options.done = true;
//9. if apply() main code is executed once then,
//onapply() & trigger are executed only once
//------------------------------------------
//(!!!construction options trigger!!!) register observers for event linkLocation_onapply
//--------------------------------------------------------------------------------------
this._trigger("_onapply", evt, {color: "white", "background-color": "purple"});
//(!!!user options trigger!!!) register observers for event linkLocation_onuserapply
//----------------------------------------------------------------------------------
this._trigger("_onuserapply", evt, {color: "white", "background-color": "orange"});
//(!!!general trigger!!!) register observers for the event shown
//---------------------------------------------------------------
this.element.trigger("mycompany.linkLocation.customevent", this.options);
}
},
//10. a private method _css()
//--------------------------
//this refers to the object built by the Widget Factory
_css: function($elem){
$elem.css({
"background-color": this.options.background,
"color": this.options.foreground
});
},
_destroy: function() {
}
});
}(jQuery, window, document));
//11. user overwites public property: this.options
//------------------------------------------------
//for the objects created by the Widget Factory
var options2 = {
color: "blue",
"background-color": "yellow",
//a user supplied function that will trigger a custom event
_onuserapply: function(evt, options){
$(evt.target).css(options);
}
};
//12. construct an object for every <a> element using the Widget Factory
var widgets = $( "a" ).linkLocation(options2);
//13. call widget apply() methods
//-------------------------------
$('h1').on('click', function(evt){
//14. at this point this refers to h1 element
//...
$( "a" ).linkLocation("apply").on("linklocation_onapply",
//15. an observable cannot catch it's own signals!!!
function(evt, data){
attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onapply on observable\'s event function, data:\n'+attrs);
}
);
});
//16. register observers on widget mycompany.linkLocation
$("div.content").on({
//an observer to a custom event mycompany.linkLocation.customevent
"mycompany.linkLocation.customevent": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From mycompany.linkLocation.customevent event on div.content event function, data:\n'+attrs);
},
//an observer to a custom event linklocation_onapply
"linklocation_onapply": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onapply event on div.content event function, data:\n'+attrs);
},
//an observer to a custom event linklocation_onuserapply
"linklocation_onuserapply": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onuserapply event on div.content event function, data:\n'+attrs);
}
});
</script>
</body>
</html>
自定义效果方法
h1{
颜色：#808080；
}
h1：悬停{
颜色：#000000；
文字装饰：无；
光标：指针；
}
a{
颜色：#808080；
背景色：#CCFF33；
}
点击我
////////////////////////插件创建（小部件工厂）////////////////////////
///////////////////////////mycompany.linkLocation///////////////////////////////
（函数（$，窗口，文档，未定义）{
//1.使用jQuery.widget（）方法，即小部件工厂来创建插件
//--------------------------------------------------------------------
$.widget（“mycompany.linkLocation”{
//2.窗口小部件属性“前台”和“后台”（参见文档）
//-------------------------------------------------------------
选项：{
那,这个,，
颜色：“黑色”，
“背景色”：“透明”，
完成：错误，
//3.来自相关小部件事件的回调：linkLocation\u onapply（参见文档）
//-----------------------------------------------------------------------------
//这是指引用插件的元素（element.data属性？）
//evt引用自定义jquery事件对象
_onapply：函数（evt、选项）{
//4.evt.target的widget linkLocation引用在哪里？
//----------------------------------------------------------------
$（evt.target）.css（选项）；
}
},
//5.小工具工厂在施工期间使用（见文件）
//------------------------------------------------------------
//这是指小部件工厂构建的对象
_创建：函数（）{
},
//6.初始化后使用（见单据）
//---------------------------------------
//称为$（“选择器”）.linkLocation（“选项”，选项\对象）
//或者，
//$（“选择器”）.linkLocation（“选项”、“键”、“值”）
//这是指小部件工厂构建的对象
_设置选项：功能（键、值）{
this.options[键]=值；
},
//7.公共方法应用（）
//------------------------
//这是指小部件工厂构建的对象
应用：功能（evt）{
如果（！this.options.done）{
//创建一个jquery对象，该对象包装所访问的特定dom元素
//通过Widget工厂提供的this.element
var$this=$（this.element）；
这个。_css（$this）；
////////////////////////////////////////////////////////////////////////////
//
from _onapply 1st arg, evt:
type=linklocation_onapply
timeStamp=1382545296011
jQuery17102845835909852654=true
...
toString, href, target, download, ping, rel, hreflang, type, text, coords, charset,
name, rev, shape, protocol, host, hostname, port, pathname, search, hash
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Custom Effect Methods</title>
<style>
h1 {
color: #808080;
}
h1:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
a {
color: #808080;
background-color: #CCFF33;
}
</style>
</head>
<body>
<h1>Click Me</h1>
<div class=content>
<p>
<a href="http://speckyboy.com/2010/01/20/25-tutorials-and-resources-for-learning-jquery-ui/">spekyboy</a>
</p>
<p>
<a href="http://www.learningjquery.com/">learning jquery</a>
</p>
</div>
<script src="../jquery-1.7.1.js"></script>
<script src="../jquery.ui.widget.js"></script>
<script>
////////////////////////Plugin Creation (Widget Factory)////////////////////////
///////////////////////////mycompany.linkLocation///////////////////////////////
(function($, window, document, undefined){
//1. use jQuery.widget() method, the Widget factory, to create plugins
//--------------------------------------------------------------------
$.widget( "mycompany.linkLocation", {
//2. widget properties "foreground" and "background" (see docs)
//-------------------------------------------------------------
options: {
that: this,
color: "black",
"background-color": "transparent",
done: false,
//3. a callback from the relevant widget event: linkLocation_onapply (see docs)
//-----------------------------------------------------------------------------
//this refers to the element referencing the plugin (element.data property?)
//evt refers to the custom jquery event object
_onapply: function(evt, options){
//4. where is the reference to widget linkLocation for evt.target?
//----------------------------------------------------------------
$(evt.target).css(options);
}
},
//5. used during construction by the Widget Factory (see docs)
//------------------------------------------------------------
//this refers to the object built by the Widget Factory
_create: function() {
},
//6. used after initialization (see docs)
//---------------------------------------
//called as $("selector").linkLocation("option", option_object)
//or,
//$("selector").linkLocation("option", "key", "value")
//this refers to the object built by the Widget Factory
_setOption: function(key, value){
this.options[ key ] = value;
},
//7. public method apply()
//------------------------
//this refers to the object built by the Widget Factory
apply: function(evt){
if(!this.options.done){
//create a jquery object that wraps a specific dom element accessed
//through the this.element provided by the Widget Factory
var $this = $(this.element);
this._css($this);
////////////////////////////////////////////////////////////////////////////
//8. maybe one reason we done all these: add memory and execute only once!//
////////////////////////////////////////////////////////////////////////////
//--------------------------------------------------------------------------
this.options.done = true;
//9. if apply() main code is executed once then,
//onapply() & trigger are executed only once
//------------------------------------------
//(!!!construction options trigger!!!) register observers for event linkLocation_onapply
//--------------------------------------------------------------------------------------
this._trigger("_onapply", evt, {color: "white", "background-color": "purple"});
//(!!!user options trigger!!!) register observers for event linkLocation_onuserapply
//----------------------------------------------------------------------------------
this._trigger("_onuserapply", evt, {color: "white", "background-color": "orange"});
//(!!!general trigger!!!) register observers for the event shown
//---------------------------------------------------------------
this.element.trigger("mycompany.linkLocation.customevent", this.options);
}
},
//10. a private method _css()
//--------------------------
//this refers to the object built by the Widget Factory
_css: function($elem){
$elem.css({
"background-color": this.options.background,
"color": this.options.foreground
});
},
_destroy: function() {
}
});
}(jQuery, window, document));
//11. user overwites public property: this.options
//------------------------------------------------
//for the objects created by the Widget Factory
var options2 = {
color: "blue",
"background-color": "yellow",
//a user supplied function that will trigger a custom event
_onuserapply: function(evt, options){
$(evt.target).css(options);
}
};
//12. construct an object for every <a> element using the Widget Factory
var widgets = $( "a" ).linkLocation(options2);
//13. call widget apply() methods
//-------------------------------
$('h1').on('click', function(evt){
//14. at this point this refers to h1 element
//...
$( "a" ).linkLocation("apply").on("linklocation_onapply",
//15. an observable cannot catch it's own signals!!!
function(evt, data){
attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onapply on observable\'s event function, data:\n'+attrs);
}
);
});
//16. register observers on widget mycompany.linkLocation
$("div.content").on({
//an observer to a custom event mycompany.linkLocation.customevent
"mycompany.linkLocation.customevent": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From mycompany.linkLocation.customevent event on div.content event function, data:\n'+attrs);
},
//an observer to a custom event linklocation_onapply
"linklocation_onapply": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onapply event on div.content event function, data:\n'+attrs);
},
//an observer to a custom event linklocation_onuserapply
"linklocation_onuserapply": function(evt, data){
var attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onuserapply event on div.content event function, data:\n'+attrs);
}
});
</script>
</body>
</html>