如何通过jQuery将内容传递到下一个选项卡?

时间:2015-07-15 07:26:02

标签: javascript jquery html tabs portlet

我是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是第二个选项卡。

0 个答案:

没有答案