Add or edit dialog with tabs

Do you've added ever the 'form' blocktype? You could click on tabs in the add or edit dialog.

In this tutorial you would learn to use your own tabs in your add or edit dialog. When reading this tutorial you know how to create your own blocktype. If you don't know: tutorial how to make a concrete5 block.

Create a 'auto.js' file in the root of you block, and fill the file with the code below.

var ccm_ugActiveTab = "ccm-block-text";
 
$("#ccm-block-tabs a").click(function() {
    $("li.ccm-nav-active").removeClass('ccm-nav-active');
    $("#" + ccm_ugActiveTab + "-tab").hide();
    ccm_ugActiveTab = $(this).attr('id');
    $(this).parent().addClass("ccm-nav-active");
    $("#" + ccm_ugActiveTab + "-tab").show();
});

Now it's time to add the tabs to our add or edit dialog. Change the 'form_setup.php' with the code below.

<ul class="ccm-dialog-tabs tabs" id="ccm-block-tabs">
    <li class="ccm-nav-active">
        <a href="javascript:void(0)" id="ccm-block-text">Text</a>
    </li>
    <li>
        <a href="javascript:void(0)" id="ccm-block-options">Options</a>
    </li>
</ul>
<div id="btExample">
    <div id="ccm-block-text-tab">
        //Here you could put the content of your tab
    </div>
    <div id="ccm-block-options-tab" style="display: none;">
        //Here you could put the content of your tab
    </div>
</div>

Now that's all you've succesfull created an add or edit dialog with tabs!