jQuery Как добавить портлет

Question

Как добавить портлет пользовательского интерфейса jQuery в существующий набор портлетов?

(Проверка: http://jqueryui.com/demos/sortable/portlets.html)

Как добавить портлет после загрузки?

В моем личном проекте я реализовал портлеты: http://www.soliman.nl/test/jqueryui/ui_2.php , и я хотел бы сделать кнопку, чтобы добавить портлет. Я попытался добавить его в .column, но CSS не загружен (конечно), когда вы .addClass, все другие портлеты тоже затронуты. Должен быть простой способ ... но как?

Answer 1

В настоящее время, вы делаете

$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
.find(".portlet-header") 
.addClass("ui-widget-header ui-corner-all") 
.prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
.end() 
.find(".portlet-content"); 

Что делать, если вы избавиться от $(".portlet") и сохранить с помощью $(".addspace") вы имели перед ReplaceWith, как это?

$('.addspace').replaceWith(html) 
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
.find(".portlet-header") 
.addClass("ui-widget-header ui-corner-all") 
.prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
.end() 
.find(".portlet-content"); 

Answer 2

После создания нескольких портлетов добавьте последний div с добавлением класса.

Затем создайте функцию с .replaceWith и .addClass.

$('.addspace').replaceWith(html); 

Пример возвращаемого HTML:

<div class="portlet" id="portletname"> <!-- make sure portletname is unique --> 
<div class="portlet-header">test</div> 
<div class="portlet-content">test</div> 
</div> 

<!-- New addspace (replaceWith replaces the old one) --> 
<div class="addspace" > 
</div 

Добавить класс портлета Div по идентификатору:

$('#portletname') 
     .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
     .find(".portlet-header") 
     .addClass("ui-widget-header ui-corner-all") 
     .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
     .end() 
     .find(".portlet-content");