How do you specify the selected tab at startup?
How do you programmatically select tabs?
HTML - Use selected attribute.
<div id="tabContainer" dojoType="dijit.layout.TabContainer"
tabStrip="true" style="width: 100%; height: 20em;">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1">Tab 1</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2"
selected="true">Selected tab 2</div>
</div>
JavaScript - Use selectChild method on TabContainer widget.
var cp = new dijit.layout.ContentPane({
title: 'Tab title',
content: 'Selected tab...'
});
var tc = dijit.byId("tabContainer");
tc.addChild(cp);
tc.selectChild(cp);
You can find more examples here: TabContainer Demo
WARNING!!! This demo is from nightly build. Not all features are included in 1.3.2 version.
You can specify the tab to display at startup with the selected attribute.
new dijit.layout.ContentPane({title: "My Tab Title",
content: dojo.byId("MyContent"),selected:true});
After the TabContainer startup, you can use selectChild with the id or the reference to the widget. Note that calling selectChild before the TabContainer startup results in an error.
Related
I need to use BorderContainer inside a TabContainer in dojo. My requirement is to have 3 different pane inside each of the tab which I will create. So for that I am trying to use BorderContainer inside TabContainer but it seems to be not working. Here is what I am trying.
A,B and C are the tabs which i am trying to create.Inside which I am using ContentPane for each of them and then BorderContainer to specify left,center and right region for that particular tab.
But it is not giving me any output. Please advise what i am doing wrong here.
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'top'">
<div data-dojo-type="dijit/layout/ContentPane" title="A" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab A</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="B" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab B</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="C" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab C</div>
</div>
</div>
</div>
Your declarative markup is correct, but since I can't see the rest of your code I would guess that you are not calling require on TabContainer, BorderContainer and ContentPane. Dojo needs you to bring those in before you can use them declaratively like you are doing. So you would need this in your javascript:
require([
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
]);
Here is a pen that shows your code works, so I would check to see if you are pulling in those modules with require.
http://codepen.io/kyledodge/pen/MwpMZm
The other thing to check is if your dojoConfig is set to parseOnLoad:
dojoConfig = {
parseOnLoad: true
};
If not, you'll either need to set that, or require dojo/parser and call parser.parse(). Parser is key to using the data-dojo-type attribute like you are doing. Here is some info that may be helpful:
http://dojotoolkit.org/reference-guide/1.10/dojo/parser.html
I don't exactly have an answer but I think I can pin down exactly why nothing shows up: The border container doesn't seem to "fill" the containing object. I'm trying to put a border container inside another border container, and its child nodes are present but seem to end up with zero height. Apparently you have to explicitly set the border container's dimensions.
I'm using dojox/mobile/Accordion and have added some panes to it.
Is there a property I can set on a pane(ContentPane) or an Accordion so that as the panes get added they are added not collapsed?
<div data-dojo-type="dojox/mobile/Accordion" data-dojo-props='singleOpen:false, iconBase:"images/icons16.png"'>
<div data-dojo-type="dojox/mobile/ContentPane"
data-dojo-props='label:"External Content1", iconPos1:"16,32,16,16", href:"data/fragment1.html"'>
</div>
<div data-dojo-type="dojox/mobile/ContentPane"
data-dojo-props='label:"External Content2", iconPos1:"16,32,16,16", href:"data/fragment2.html"'>
</div>
<div data-dojo-type="dojox/mobile/ContentPane"
data-dojo-props='label:"External Content3", iconPos1:"16,32,16,16", href:"data/fragment3.html"'>
</div>
<div data-dojo-type="dojox/mobile/ContentPane"
data-dojo-props='label:"External Content4", iconPos1:"16,32,16,16", href:"data/fragment4.html"'>
</div>
</div>
Thanks
When you add content panes programmatically you can set selected:true which will initialize them opened
var pane = new ContentPane({
label: "Added Content",
selected:true,
content: "My Content"
});
accordion.byId("testAccordion").addChild(pane2);
Note that this only works in the programmatic approach. Setting selected:true on data-dojo-props declaratively for multiple elements does not work (currently 1.10)
JSFiddle
You can use the selected parameter for your child panes. See this fiddle for an example; you just add selected: true to your data-dojo-props attribute or the properties that you pass to the child widget constructor if doing it programmatically:
Declaratively
<div data-dojo-type="dojox/mobile/ContentPane"
data-dojo-props="label: 'External Content1',
iconPos1: '16,32,16,16',
href: 'data/fragment1.html',
selected: true">
</div>
Programmatically
require([
"dojox/mobile/Accordion",
"dojox/mobile/ContentPane",
"dojox/mobile/parser",
"dojox/mobile",
], function(Accordion, ContentPane) {
// ...
var p1 = new ContentPane({
label: 'External Content1',
iconPos1: '16,32,16,16',
href: 'data/fragment1.html',
selected: true
});
// ...
});
i'm currently create a program that i would like to add any widget selected tab. so i must know information about the selected tab. but i don't know..
how i know selected tab the information that boolean type?
for example:
if(tabs.selected==true){...}
mycode
<div id="tabContainer" data-dojo-type="dijit/layout/TabContainer"
data-dojo-props="region: 'bottom', tabPosition: 'top'"
style="height: 700px;">
<div data-dojo-type="dijit/layout/ContentPane" title="Form" id="content" class="tab" >
<h4>Example</h4>
</div>
</div>
Well, the dijit/layout/TabContainer has a property called selectedChildWidget which holds a reference to the active tab.
So, to validate if a tab is the active tab, you can do the following:
var selectedTab = registry.byId("tabContainer").get("selectedChildWidget"),
tab1 = registry.byId("content"));
if (selectedTab === tab1) {
// "content" is the selected tab
}
A full example can be found on JSFiddle: http://jsfiddle.net/tEbs9/
Maybe this one could help you.
dijit focus
You will be able to focus or track elements.
example from the dojo docs:
Try this code, it's also from the docs.
require([ "dijit/focus" ], function(focusUtil){
focusUtil.on("widget-focus", function(widget){
console.log("Focused widget", widget);
});
focusUtil.on("widget-blur", function(widget){
console.log("Blurred widget", widget);
});
});
I want the dijit splitter to minimize when user click it and go back to its position when clicked again (I don't care for the draggable feature)
how do I do it ?
In this example I want the panel on the right to minimize when click on the splitter
http://77.235.53.170/split/split.htm
You can try use dojox.layout.ExpandoPane at your left pane.
var bc = new BorderContainer({
splitter:true,
gutters:false
}, containerDiv);
new ExpandoPane({
region:"left",
title: "Expandable pane",
className: yourClassName
}).placeAt(bc);
EDIT: update based on request:
put this in your head:
<link href="js/dojox/layout/resources/ExpandoPane.css"
rel="stylesheet" type="text/css" />
change you pane like this:
<div id="leftCol" class="edgePanel" title="Left Expando" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="title:'Left Expando', region: 'leading', splitter: true" style="width: 250px;">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 95%;"
tabstrip="true">
<div data-dojo-type="dijit/layout/ContentPane" title="Layers" selected="true">
<div id="CheckboxTree">
</div>
</div>
</div>
</div>
i want to disable single tab in tabcontainer of dojo .
Here's my workaround for this problem:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"none"});
and:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"inline-block"});
For some reason, altering the disabled property, or calling setDisabled does nothing for me.
You can't do it directly since this is not a feature of the DOJO tab container. There has been a bug against DOJO, open for about 3 years, to add the feature: http://bugs.dojotoolkit.org/ticket/5601
That defect also has a potential workaround in it.
dijit.byId('tab').controlButton.domNode.disabled = true
I answered this question in another thread. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:
How do I dynamically show and hide an entire TabContainer using DOJO?
You can override its default css to make the tabbar invisible.
dojo.attr(dijit.byId('tab'), "disabled", true);
dijit.byId('tab').onClick = function () { };
You can disable tabs by setting the disabled property of the pane:
Source: https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html
pane.set("disabled", true);
Example:
<div data-dojo-type="dijit/layout/TabContainer" style="width: width: 350px; height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data- dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="second" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data- dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
<script type="dojo/require">
registry: "dijit/registry"
</script>
<button type=button onclick="registry.byId('second').set('disabled', !registry.byId('second').get('disabled'));">
toggle tab #2 disabled
</button>
Only problem here is that it's not visible to the user they can't click on it.
You can these additional CSS selectors:
.dijitTab.dijitDisabled {
cursor: not-allowed !important;
}
.dijitTab.dijitDisabled > .tabLabel{
cursor: not-allowed !important;
}