いわゆるポートレットのリストを動的に作成しようとしています。ポートレットは、ボタンをクリックして追加できます。ボタンをクリックすると、3 つの入力フィールドを含むダイアログが開きます。その後、確認すると、新しいポートレットがページに表示されます。これらのポートレットには、ポートレットのテキスト部分を切り替えるために使用できるマイナス アイコンがあります。これは、ページの読み込み時に html を介して追加されたポートレットで機能しますが、動的に追加されたポートレットには、この機能が「バインド」されていないようです。
したがって、この機能を動的に追加されたポートレットに追加する方法を考えています。また、私の jQuery コードがあまり最適に見えないことも認識していますが、ほとんどの場合、これに慣れていないため、コピー アンド ペーストを行ってきました。
編集: このリンクを追加する必要があります: http://jqueryui.com/sortable/#portlets - コードのほとんどを取得した場所であり、マイナスアイコン機能をテストできます。
jQuery:
$(function() {
var title = $( "#title" ),
content = $( "#content" ), column = $( "#column" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add content": function() {
if(column.val()=='col1'){
$( "#col1" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col2'){
$( "#col2" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col3'){
$( "#col3" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col4'){
$( "#col4" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else{
$( "#tempcol" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "#add-content" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
$( ".column" ).sortable({
connectWith: ".column"
});
$( ".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-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});
$( ".column" ).disableSelection();
});
html:
<body>
<div id="centered">
<div id="inset">
<h1>title</h1>
<div id="linear" style="padding: 20px"></div>
</div>
<div id="dialog-form" title="Create portlet">
<form>
<fieldset>
<label for="title">Title</label>
<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
<label for="content">Content</label>
<input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />
<label for="column">Column</label>
<select name="column" id="column" class="ui-spinner-down ui-widget-content ui-corner-all">
<option value="col1">left sidebar</option>
<option value="col2">main</option>
<option value="col3">bottom left</option>
<option value="col4">bottom right</option>
</select>
<!--<input type="text" name="column" id="column" value="" class="text ui-widget-content ui-corner-all" />-->
</fieldset>
</form>
</div>
<button id="add-content" >Add Content</button>
<button id="test" onclick="test()">test</button>
<div id="preview">
<table>
<tbody>
<tr>
<!--sidebar-->
<td>
<div id="col1" class="column">
</div>
</td>
<!--sidebar end-->
<td>
<table>
<tbody>
<!--main-->
<tr>
<div id="col2" class="column">
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</tr>
<!--main end-->
<!--bottom colums-->
<tr>
<td style="border-left: 0px; border-bottom: 0px">
<div id="col3" class="column">
</div>
</td>
<td style="border-right: 0px; border-bottom: 0px">
<div id="col4" class="column">
</div>
</td>
</tr>
<!--bottom colums end-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>