我已经使用 Widget Factory 编写了一个 JQuery UI 小部件，我计划在新的空元素上调用它，然后将其替换为基于小部件私有函数中的模板的新 HTML 结构。
我想调用小部件的构造函数的元素如下所示：
<span id="b-accordion-1" class="b-accordion" data-accordion-title="Accordion 1"></span>
然后小部件构造函数运行并用新的 HTML 替换这个元素。
但是，我希望在调用此代码后立即链接此新 HTML：
$("#b-accordion-1").bAccordion();
不过，此时调用此构造函数只会返回原始 DOM 元素，即使该元素不再出现在页面上。
这是我目前拥有的小部件代码：
;
(function($, window, document, undefined)
{
$.widget("b.bAccordion", {
options: {
// id: "myID",
// title: "Accordion",
// content: HTML,
// actions: HTML,
},
/* ==============================
Private Methods
============================== */
_create: function() {
// Create a widget from a non-widget element.
this.options.id = this.options.id || null;
this.options.title = this.options.title || this.element.attr("data-accordion-title") || "";
this.options.content = this.options.content || this.element.attr("data-accordion-content") || null;
if (this.element.hasClass("b-accordion-active") === true) {
}
else
if (this.element.hasClass("b-accordion-active") === false) {
console.log(this);
$.event.trigger({
type: "bAccordion.beforeCreate"
});
var myOptions = {
title: this.options.title
};
// Construct new accordion.
var myHTML = $(this._templateAccordion(myOptions));
myHTML.data(this.element.data());
// Save original element for the accordion's content.
if ( !this.options.content ) {
this.options.content = this.element;
}
// If ID is passed, use the passed ID, else use the original element's ID for the accordion if it is set.
if ( this.options.id ) {
myHTML.attr("id", this.options.id);
}
else
if ( this.element.prop("id") ) {
myHTML.attr("id", this.element.prop("id"));
this.element.attr("id", null);
}
// Remove the accordion class from any initialising elements.
if ( this.element.hasClass("b-accordion") ) {
this.element.removeClass("b-accordion");
}
// Replace the original element with the accordion.
this.element.replaceWith(myHTML);
this.element = myHTML;
// console.log($(myHTML)[0]);
// this.bindings[0] = $(myHTML)[0];
// console.log(this.bindings[0]);
// this.bindings = myHTML;
// console.log(this.data("b-bAccordion").bindings);
// Enable the accordion's events.
this._addEventListeners();
$.event.trigger({
type: "bAccordion.onCreate"
});
}
},
_init: function() {
// Initialise this instance of the active dashboard widgets.
this.options.title = this.options.title || this.element.attr("data-accordion-title") || null;
this.options.content = this.options.content || this.element.attr("data-accordion-content") || null;
this.options.actions = this.options.actions || this.element.attr("data-accordion-actions") || null;
this.addContent(this.options.content);
this.addActions(this.options.actions);
$.event.trigger({
type: "bAccordion.onInit",
});
},
_destroy: function() {
this._removeEventListeners();
$.event.trigger({
type: "bAccordion.onDestroy",
});
},
_load: function() {
// Method for loading content into the widget. (Not currently used.)
$.event.trigger({
type: "bAccordion.onLoad",
});
},
_addEventListeners: function() {
// Add default event listeners to this instance of the plugin.
this.element.find('[data-action="Accordion_Expander_Toggle"]').on("click", this.expanderToggle);
},
_removeEventListeners: function() {
// Remove all event listeners from this instance of the plugin.
},
/* ------------------------------
Templates
------------------------------ */
_templateAccordion: function(options) {
/*
options = {
title
}
*/
var returnHML = "";
var myTitle = options.title;
var myTitleHTML = myTitle;
returnHML += '<div class="b-accordion b-accordion-collapsed b-accordion-active">';
returnHML += '<div class="b-accordion-header">';
returnHML += '<div class="b-accordion-expander">';
returnHML += '<div class="b-accordion-expander-container">';
returnHML += '<button type="button" class="b-accordion-expander-button" data-action="Accordion_Expander_Toggle">';
returnHML += '<span class="b-accordion-expander-button-icon glyphicons circle_plus"></span>';
returnHML += '</button>';
returnHML += '</div>';
returnHML += '</div>';
returnHML += '<div class="b-accordion-heading">';
returnHML += '<div class="b-accordion-heading-container">';
returnHML += '<h2 class="b-accordion-heading">' + myTitleHTML + '</h2>';
returnHML += '</div>';
returnHML += '</div>';
returnHML += '<div class="b-accordion-actions">';
returnHML += '<div class="b-accordion-actions-container">';
returnHML += '<!-- Accordion Actions -->>';
returnHML += '</div>';
returnHML += '</div>';
returnHML += '</div>';
returnHML += '<div class="b-accordion-content b-accordion-content-collapsed">';
returnHML += '<!-- Accordion Content -->';
returnHML += '</div>';
returnHML += '</div>';
return returnHML;
},
/* ==============================
Public Methods
============================== */
addContent: function(content, unwrap) {
var myContent;
if (content) {
myContent = $(content);
}
else
{
myContent = $(this.options.content);
}
myContent = $(myContent).remove().html();
// myContent = $(myContent).remove().html();
this.element.find(".b-accordion-content").html(myContent);
},
addActions: function(actions) {
var myActions;
if (actions) {
myActions = $(actions);
}
else
{
myActions = $(this.options.actions);
}
this.element.find(".b-accordion-actions-container").html(myActions);
},
/* ------------------------------
Event Handlers
------------------------------ */
expanderToggle: function(event) {
var $this = $(event.currentTarget).closest(".b-accordion");
if ( $this.find(".b-accordion-content").is(":visible") === true) {
// Collapse
$this.removeClass("b-accordion-expanded");
$this.addClass("b-accordion-collapsed");
$this.find(".b-accordion-content").removeClass("b-accordion-content-expanded");
$this.find(".b-accordion-content").addClass("b-accordion-content-collapsed");
$this.find(".b-accordion-expander-button-icon").addClass("circle_plus");
$this.find(".b-accordion-expander-button-icon").removeClass("circle_minus");
}
else
if ( $this.find(".b-accordion-content").is(":visible") === false) {
// Expand
$this.addClass("b-accordion-expanded");
$this.removeClass("b-accordion-collapsed");
$this.find(".b-accordion-content").addClass("b-accordion-content-expanded");
$this.find(".b-accordion-content").removeClass("b-accordion-content-collapsed");
$this.find(".b-accordion-expander-button-icon").removeClass("circle_plus");
$this.find(".b-accordion-expander-button-icon").addClass("circle_minus");
}
},
});
})(jQuery, window, document);
提前致谢！