基本的に非ライブ関数をライブ関数にすることができる関数があります
(function($) {
$.fn.extend({
collapsiblePanel: function() {
// Call the ConfigureCollapsiblePanel function for the selected element
return $(this).each(ConfigureCollapsiblePanel);
}
});
})(jQuery);
function ConfigureCollapsiblePanel() {
$(this).addClass("ui-widget");
// Wrap the contents of the container within a new div.
$(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");
// Create a new div as the first item within the container. Put the title of the panel in here.
$("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));
// Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
$(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}
function CollapsibleContainerTitleOnClick() {
// The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
$(".collapsibleContainerContent", $(this).parent()).slideToggle();
}
(function ($) {
$.fn.livecollapsiblePanel = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).collapsiblePanel(opts);
}
});
return $();
};
}(jQuery));
$(".collapsibleContainer").livecollapsiblePanel();
私が基本的に行っていることは、ajax 呼び出しで折りたたみ可能なパネルを生成し、それを div で表示することです。各 div を折りたたみ可能なパネルに「アクティブ化」するには、現在、折りたたみ可能なパネルに変換する各 div にマウスを合わせる必要があります... div が ajax からロードされるときにそれを変更できる方法はありますか?それらは折りたたみ可能なパネルになると呼びます。