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
});
// ...
});
Related
Can you specify/change the scope of a data-dojo-attach-point to something other than the current widget?
eg. I have a templated widget called parent. In that template I have another widget called child1. Nested in child1, I have some widgets. I want to bind these nested widgets to child1 rather than parent.
Edit:
<div data-dojo-type="someContainer" data-dojo-attach-point="parent">
<div data-dojo-type="somePane" data-dojo-attach-point="child1">
<span data-dojo-attach-point="(I want to be bound to somePane)"></span>
</div>
</div>
I'd like to bind the "span" to somePane without having to go through someContainer.
Separate the span into it's own widget and you can add them to the parent like this.
Parent template that contains the content panes
<div style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/LayoutContainer" style="width: 100%; height: 100%" data-dojo-attach-point="mainNode">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
<div >
<!--some content-->
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">
<div data-dojo-attach-point="centerNode"></div>
</div>
</div>
</div>
In postCreate method of your parent widget create new instance of the child and attach it to the parent
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/Parent.html",
"somePath/childWidget",
'dojo/domReady!'
], function (
declare,
_WidgetBase,
_TemplatedMixin,
_WidgetsInTemplateMixin,
parentTemplate,
ChildWidget
) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: parentTemplate,
postCreate: function () {
this.inherited(arguments);
var myChild = new ChildWidget();
myChild.placeAt(this.centerNode);
myChild.startup();
}
});
});
Then because the span is inside it's own widget, you might have a template for it that looks like this
<div>
<span data-dojo-attach-point="spanNode"></span>
</div>
So now the span attach point is decoupled from the parent. You can directly reference the 'spanNode' from within the widget you created for the span.
Declaratively,
in your childWidget that contains the span you can give give it a class name like this
return declare("childWidget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { ...
And in the parent template instead of using an attach point to attach the widget use data-dojo-type like this
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">
<div data-dojo-type="childWidget"><!--child widget will get attached here--></div>
</div>
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);
});
});
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
</div>
I have a tab widget, displaying content from different urls.
I need an expression, to get the contents (HTML string) of the currently displayed content, in the tab panel. Something like
alert($('tabs').tabs('option', 'selectedpanel').innerHTML);
The only reference I have is the JQuery documentation http://api.jqueryui.com/tabs/ , but I could not get an suitable answer from the API documentation there.
Just use the load event of the tabs as below :
<script>
$(function() {
$( "#tabs" ).tabs({
load: function( event, ui ) {
alert(ui.panel.html());
}
});
});
</script>
JS:
define(["dojo/_base/declare","dojo/dom",
"dijit/_Widget", "dijit/_TemplatedMixin",
"dojo/text!./templates/MainViewWidget.html",
"dijit/layout/TabContainer", "dijit/layout/ContentPane","dijit/layout/BorderContainer","dijit/form/TextBox", "dijit/layout/AccordionContainer"],
function(declare, dom, _Widget, _TemplatedMixin, template){
return declare("package.MainViewWidget", [_Widget, _TemplatedMixin], {
widgetsInTemplate: true,
templateString: template,
constructor: function(){
},
startup: function(){
},
search: function(evt){
alert('hi');
alert(evt);
}
});
});
templates/MainViewWidget.html:
<div class="mainContainer">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" style="width:100%;height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left', splitter:true">
<h2>List of trips</h2>
<br />
<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange:'search'"/>
<br />
</div>
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-attach-point="tabContainerDiv" data-dojo-props="region: 'center', tabPosition: 'top', tabStrip:'true', style:'width:80%;height:100%'">
<div data-dojo-type="dijit.layout.ContentPane" title="Summary" data-dojo-props="selected:'true', title:'About'">Welcome. Navigate through the Left pane.</div>
</div>
</div>
</div>
The thing is, I want to capture events on the TextBox. I was looking to do this with just markup as you can see from data-dojo-attach-event="onchange:'search'". I have tried many variations of this and I can't get it to work. Basically what I want is to define a function in JS and attach it as handler in the markup. Please help.
This isn't supported, sadly. I just spent about two hours discovering this. Any node in your template with a data-dojo-type attribute is ignored by _TemplatedMixin._attachTemplateNodes (see line 177). In other words, data-dojo-attach-event will only bind to plain DOM nodes (not Dijits).
This at least applies to v1.8. The attach processing is different in v1.9 (there's an _AttachMixin), so it might work there.
Try:
data-dojo-attach-event="onChange:search"
Camelcase onChange, and no quotes around search.
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.