dijit.layout.TabContainer закрываемые закладки

Рассмотрим, как сделать закладки в TabContainer закрываемыми – с крестиком. Результат будет выглядеть вот так:

dijit.layout.TabContainer закрываемые закладки

Для того, чтобы закладка была закрываемой, необходимо указать параметр closable: true . Код страницы для программного создания закладок:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        @import "js/dijit/themes/claro/claro.css";
        @import "js/dojo/resources/dojo.css";
        @import "css/style.css";
    </style>
    <script src="js/dojo/dojo.js" data-dojo-config="parseOnLoad: false"></script>
    <script src="js/script.js"></script>
</head>
<body class="claro">
    <div id="container"></div>
</body>
</html>

Код скрипта программного создания:

require([
    "dojo/ready",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane"
], function(
    ready,
    TabContainer,
    ContentPane
){
    ready(function(){
        var container = new TabContainer({}, "container");
        for (var i = 0; i < 5; i++) {
            var pane = new ContentPane({
                title: "Tab " + i,
                content: "Content of tab " + i,
                closable: true
            });
            container.addChild(pane);
        }
        container.startup();
    });
});

И декларативный пример закрываемых закладок:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        @import "js/dijit/themes/claro/claro.css";
        @import "js/dojo/resources/dojo.css";
        @import "css/style.css";
    </style>
    <script src="js/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
</head>
<body class="claro">
    <div id="container" data-dojo-type="dijit/layout/TabContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable: true" title="First tab">
            Tab Content
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable: true" title="Second tab">
            Tab Content
        </div>
    </div>
</body>
</html>

Post Views: 194