我是jQuery的初学者。我想创建可选择的portlet,当它被点击时,立即在第二个标签中显示相同的portlet。
这是我的JavaScript代码。
$(function () {
$(".frame").sortable({
connectWith: ".frame",
handle: ".portlet-header",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".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 portlet-toggle'></span>");
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
$(function () {
$(".frame").selectable({
stop: function () {
var result = $("#select-result").empty();
var add = $("#newExam").empty();
var count = 0;
$(".ui-selected", this).each(function () {
if (this.id > 0) {
result.append(this.id + " ");
count = count + 1;
}
});
add.append(count);
}
});
});
这是我的HTML代码。
<div id="tabs">
<ul>
<li><a href="#master">Master</a></li>
<li><a href="#creation">Add List <span id="newExam" class="badge" >0</span> </a></li>
</ul>
<div id="master" class="master">
<p>exam in the collection</p>
<br /><br />
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<div class="frame" style="align-content: center">
<div class="portlet portlet-count" id="1">
<div class="portlet-header">First</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="2">
<div class="portlet-header">Second</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="3">
<div class="portlet-header">Third</div>
<div class="portlet-content">test</div>
</div>
</div>
</div>
<div id="creation">
</div>
P.S。 Master是第一个选项卡,Creation是第二个选项卡。