0
私はウィジェットファクトリを使ってJQuery UIウィジェットを作成しました。このウィジェットファクトは、新しい空の要素を呼び出す予定であり、ウィジェットのプライベート関数のテンプレートに基づいて新しいHTML構造に置き換えられます。JQuery UIウィジェットチェーン：ウィジェットファクトウィジェットが初期化された後、初期化関数によって返されるものを変更するにはどうすればよいですか？
私はこのような表情で、ウィジェットのコンストラクタを呼び出したい要素：
<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);
ありがとう！この提案を提供#jquery IRCチャンネルでオーバーTaplarする