Dojo with JSONP
Dojo with data fetched via jsonpify.com.
by parente
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/themes/tundra/tundra.css">
<div dojoType="dijit.layout.BorderContainer" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" region="top" splitter="false">Header</div>
<div dojoType="dijit.layout.TabContainer" region="center" splitter="true">
<div dojoType="dijit.layout.ContentPane" title="Tab1" id="tab1"></div>
<div dojoType="dijit.layout.ContentPane" title="Tab2">Content2</div>
<div dojoType="dijit.layout.ContentPane" title="Tab3">Content3</div>
</div>
<div dojoType="dijit.layout.AccordionContainer" region="right" splitter="true" minSize="200">
<div dojoType="dijit.layout.ContentPane" title="Pane1">Sidebar1</div>
<div dojoType="dijit.layout.ContentPane" title="Pane2">Sidebar2</div>
<div dojoType="dijit.layout.ContentPane" title="Pane3">Sidebar3</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" splitter="false">Footer</div>
</div>
CSS
html, body, .dijitBorderContainer {width: 100%; height: 100%; padding: 0px;}
.dijitAccordionContainer {width: 200px;}
JavaScript
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.layout.AccordionContainer');
dojo.require('dijit.layout.TabContainer');
dojo.require("dojo.io.script")
dojo.ready(function() {
var url = encodeURIComponent("http://ws.geonames.org/findNearbyPostalCodesJSON?country=US&maxRows=10&postalcode=27713&radius=10");
var args = {
url : 'http://jsonpify.com/api?url='+url+'&format=json',
callbackParamName: 'jsonp',
load: function(obj) {
var ul = dojo.create('ul');
dojo.forEach(obj.postalCodes, function(pc) {
var html = dojo.replace('{placeName} ({postalCode})', pc);
dojo.create('li', {innerHTML : html}, ul);
});
dijit.byId('tab1').attr('content', ul);
},
error: function(err) { console.error(err); }
};
dojo.io.script.get(args);
});