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;
}
Related
I'm using Bootstrap 3.3.4. I have a panel with a heading and footer, and a glyphicon to indicate the open/closed state of the panel.
If I use the id of the panel body as the selector for collapse then Bootstrap correctly applies the .collapsed class to the heading and the glyphicon changes. However, I want to also collapse the footer so I changed to using a class selector for collapse. The good news is the footer now also collapses; the bad news is that .collapsed is no longer applied to the heading and thus the glyphicon doesn't change.
CSS
.collapsible {
cursor: pointer;
}
.panel-heading.collapsible:after {
font-family:"Glyphicons Halflings";
content:"\e114";
float: right;
color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
content:"\e080";
}
HTML
<div class="panel">
<div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
<div id="theBody2" class="panel-body shrinkme collapse in">
nim pariatur cliche reprehenderit, enim eiusmod high life
</div>
<div id="theFooter2" class="panel-footer shrinkme collapse in">
<button class="btn btn-default">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
jsFiddle demonstrating both selectors
Am I doing something that's keeping .collapsed from being applied? How can I collapse the body and footer when the heading is clicked?
bootstrap only adds the class to there is #id or href and not class.
according to the docs you are suppose to target the collapse using two options
data-toggle="collapse" href="#collapseExample"
or
data-toggle="collapse" data-target="theBody2"
this way you do not have to add a cursor:pointer manually as well
Actually, the there is an workaround, the data-target works with class selector but really doesn't change the parent class.
On the parent element you can handle onClick event, like:
onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"
Here's the answer:
Make the footer panel a child of the body panel.
Use class panel-collapse on the body panel instead of panel
The first item is the key; the second one is for proper styling. I stumbled upon the solution by reading this issue.
Here is the revised jsFiddle with the updated HTML.
Updated HTML
<div class="panel">
<div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
<div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
<div id="theFooter" class="panel-footer collapse in">
<button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
</button>
</div>
</div>
</div>
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
In Zurb Foundation's Orbit Content Slider, how can I remove the little bullets/circles at the top that represent how many slides you have (and are also clickable)? I want them gone.
There is no bullets/circles at the top in zurb-foundation 5.
So I assume you are using this type of orbit.
How about try .orbit-bullets {display: none;}, somewhere in your css file?
You can use the data-options attribute in your ul:
<ul data-orbit data-options="bullets:false;">
<li>
<img src="satelite-orbit.jpg" alt="slide 1" />
</li>
<li>
<img src="andromeda-orbit.jpg" alt="slide 2" />
</li>
<li>
<img src="launch-orbit.jpg" alt="slide 3" />
</li>
</ul>
You can also use Javascript:
$(document).foundation({
orbit: {
timer_speed: 1000,
bullets: false
}
});
Foundation 5 has more documentation toward the bottom of the Orbit page.
It shouldn't matter which version of Foundation you are using. As mentioned in the above answer; setting orbit-bullets to display none should work.
example:
.orbit-bullets { display: none; }
You could also try the following:
.orbit-bullets-container { display: none; }
If neither of these declarations are working I would guess that the issue lies within your CSS. It would appear that you have either set orbit-bullets to display block somewhere in your stylesheet after you have set them to display none, possibly within a parent div; or you are calling your stylesheet before foundation's CSS and it's being overridden after your declaration. When using any framework, you should call those styles and scripts first; before your application files.
If you could provide an example it shouldn't be difficult to resolve.
I have the following structure of the Worklight application page:
<body>
<div with heading/>
<div with view/>
<div with Tab bar/>
<div with simple dialog/>
</body>
When I build the app for iPad and test it on it i have the following problem.
Dialog window puts gray unclickable layer on everything except the tab bar.
Why the tab bar stays available?
Is it a bug or I'm doing wrong?
Have you tried to put the heading, tab bar and dialog in the view?
Who invoke simpleDialog? try this
<body>
<div id="home" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<div with heading/>
<div with simple dialog
<button data-dojo-type='dojox.mobile.Button' onClick="openDialog()">
/>
<div with Tab bar/>
</div>
</body>
for invoke simple dialog, write
function openDialog(){
WL.SimpleDialog.show("text ", "text",[{text: "buttonName", handler: function() {WL.Logger.debug("dfsdfd"); }
}]
}
);
I tried put in views in a different variations, but it still didn't work.
Than while debugging I found out that the grey cover, which should cover everything in background has a
postion: absolute;
than I override this css class with
position: fixed;
and everything became great:)
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.