使用dojo中的dijit的组件中TabContainer制作可以关闭的tab
- data-dojo-props="closable:true,onClose:function(){return confirm('really?');}"
此dojo版本为1.8
- <!DOCTYPE html>
- <html>
- <head>
- <Meta charset="utf-8">
- <title>Tutorial: Hello Dojo!</title>
- <style>
- @import "dojo/resources/dojo.css";
- @import "dijit/themes/tundra/tundra.css";
- </style>
- <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="isDebug: true,async: true,parSEOnLoad: true"></script>
- </head>
- <body class="tundra">
- <div data-dojo-type="dijit/layout/TabContainer" style="height:500px; width:400px;" doLayout="true">
- <div data-dojo-type="dijit/layout/ContentPane" title="tab1" data-dojo-props="closable:true,onClose:function(){return confirm('really?');}">
- date:<input data-dojo-type="dijit/form/DateTextBox"/>
- </div>
- <div data-dojo-type="dijit/layout/ContentPane" title="tab2" data-dojo-props="closable:true,onClose:function(){return confirm('really?');}">
- abc
- </div>
- <div data-dojo-type="dijit/layout/ContentPane" title="tab3" data-dojo-props="closable:true,onClose:function(){return confirm('really?');}">
- efg
- </div>
- </div>
- <script>
- // load requirements for declarative widgets in page content
- require(["dijit/form/DateTextBox","dijit/form/Button","dijit/layout/TabContainer","dijit/layout/ContentPane","dojo/parser","dojo/domReady!"]);
- </script>
- </body>