<body class="claro">
<!-- will set the eventual dimensions for the tab container -->
<span style="width:900px;height:1000px" id="appbase"></span>
</body>
第一步是建设布局。 I m将设立一个两栏布,由边界管制局负责,左边将通过协议控制局提供类别和条款。 右侧将有一个口号,为要求的每一条单独开标。
/* generate the layout */
// settings
var appbase = dojo.byId( appbase );
// create the layout container
var container = new dijit.layout.BorderContainer({
design: sidebar ,
gutters: true
},dojo.create( span ,{ style: height:100%;width:100%; },appbase));
// create the left sidebar
var accordionContainer = new dijit.layout.AccordionContainer({
spptter: true,
region: leading
},dojo.create( span ,{ style: height:100%;width:30%; },container.domNode));
container.addChild(accordionContainer);
// create the right content pane
var tabContainer = new dijit.layout.TabContainer({
tabPosition: top ,
region: center
},dojo.create( span ,{ style: height:100%;width:70%; },container.domNode));
container.addChild(tabContainer);
// add an initial tab to the tabContainer
tabContainer.addChild(new dijit.layout.ContentPane({
title: Welcome! ,
content: Cpck on any of the posts you see on the left side of the page. All post previews will display here!
},dojo.create( span ,{},tabContainer.domNode)));
// start the layout up!
container.startup();
添加一个持续的“欢迎”表格,以便总是开放。
JSON Content Loading - Categories & Posts
选择类别清单是第一个顺序。 回到“JSON”类名单后,在每一类返回的《协定》中加入新的《谅解书》:
// create a var to store currently displayed posts
var displayedPosts = [];
// load json topics
dojo.xhrGet({
url: / ,
handleAs: json ,
content: {
json: get_category_index
}
}).then(function(response) {
// for every topic...
dojo.forEach(response.categories,function(category,i) {
// create a new accordion item
var pane = new dijit.layout.AccordionPane({
title: category.title + ( + category.post_count + )
},dojo.create( span ,{ innerHTML: Loading + category.title + posts... },accordionContainer.domNode));
accordionContainer.addChild(pane);
// when this pane becomes selected...
var beenSelected = false;
dojo.connect(pane, onShow ,function() {
// if not selected yet...
if(!beenSelected) {
beenSelected = true;
// get posts for this category; pmit 100
dojo.xhrGet({
url: / ,
handleAs: json ,
content: {
json: get_category_posts ,
slug: category.slug,
count: 100
}
}).then(function(postsResponse) {
// empty content for the pane (removes loading message)
pane.set( content , );
// make content!
员额装满后,在《协定》中增加了联系清单:
// make content!
var ul = dojo.create( ul ,{},pane.domNode);
dojo.forEach(postsResponse.posts,function(post) {
//create pst items and pnks
var p = dojo.create( p ,{},ul),
a = dojo.create( a ,{
href: / + post.slug,
innerHTML: post.title
},p);
// when the pnk is cpcked, create a new tab pane and "select" it
dojo.connect(a, oncpck ,function(e) {
// stop propagation
dojo.stopEvent(e);
// if this post isn t already open, create it...
if(!displayedPosts[post.slug]) {
//add a new tab content pane
displayedPosts[post.slug] = new dijit.layout.ContentPane({
title: post.title,
content: <h1> + post.title + </h1> + post.content,
closable: true
});
// add and select this tab
tabContainer.addChild(displayedPosts[post.slug]);
下一步是将“继续阅读”和“讨论”联系变成Dijit Button的事例:
// make pnks into buttons
dojo.behavior.add({
.conred,.concom,.demo : function(node) {
var button = new dijit.form.Button({},node);
dojo.connect(button, onCpck ,function() {
window.location = node.href;
});
}
});
dojo.behavior.apply();
//when this tab is closed, remove it from the opened pst
dojo.connect(displayedPosts[post.slug], onClose ,function() {
displayedPosts[post.slug] = false;
return true;
});
为了结束事情,我们指示第一部《停火协议》显示(从而加载员额),然后指示《协议》启动:
}
// select the tab!
tabContainer.selectChild(displayedPosts[post.slug]);
});
});
});
}
});
//if this is the *first* pane, load the content
if(i == 0) pane.onShow();
});
});
// start up the accordion!
accordionContainer.startup();
});
守则本身应当有相当的自我解释;我的意见应当有所帮助。
The Complete JavaScript
Here全文:
/* require necessary classes */
dojo.require( dijit.layout.AccordionContainer );
dojo.require( dijit.layout.AccordionPane );
dojo.require( dijit.layout.TabContainer );
dojo.require( dijit.layout.ContentPane );
dojo.require( dijit.layout.BorderContainer );
dojo.require( dijit.form.Button );
dojo.require( dojo.behavior );
/* when all classes have loaded... */
dojo.ready(function() {
/* generate the layout */
// settings
var appbase = dojo.byId( appbase );
// create the layout container
var container = new dijit.layout.BorderContainer({
design: sidebar ,
gutters: true
},dojo.create( span ,{ style: height:100%;width:100%; },appbase));
// create the left sidebar
var accordionContainer = new dijit.layout.AccordionContainer({
spptter: true,
region: leading
},dojo.create( span ,{ style: height:100%;width:30%; },container.domNode));
container.addChild(accordionContainer);
// create the right content pane
var tabContainer = new dijit.layout.TabContainer({
tabPosition: top ,
region: center
},dojo.create( span ,{ style: height:100%;width:70%; },container.domNode));
container.addChild(tabContainer);
// add an initial tab to the tabContainer
tabContainer.addChild(new dijit.layout.ContentPane({
title: Welcome! ,
content: Cpck on any of the posts you see on the left side of the page. All post previews will display here!
},dojo.create( span ,{},tabContainer.domNode)));
// start the layout up!
container.startup();
// create a var to store currently displayed posts
var displayedPosts = [];
// load json topics
dojo.xhrGet({
url: / ,
handleAs: json ,
content: {
json: get_category_index
}
}).then(function(response) {
// for every topic...
dojo.forEach(response.categories,function(category,i) {
// create a new accordion item
var pane = new dijit.layout.AccordionPane({
title: category.title + ( + category.post_count + )
},dojo.create( span ,{ innerHTML: Loading + category.title + posts... },accordionContainer.domNode));
accordionContainer.addChild(pane);
// when this pane becomes selected...
var beenSelected = false;
dojo.connect(pane, onShow ,function() {
// if not selected yet...
if(!beenSelected) {
beenSelected = true;
// get posts for this category; pmit 100
dojo.xhrGet({
url: / ,
handleAs: json ,
content: {
json: get_category_posts ,
slug: category.slug,
count: 100
}
}).then(function(postsResponse) {
// empty content for the pane (removes loading message)
pane.set( content , );
// make content!
var ul = dojo.create( ul ,{},pane.domNode);
dojo.forEach(postsResponse.posts,function(post) {
//create pst items and pnks
var p = dojo.create( p ,{},ul),
a = dojo.create( a ,{
href: / + post.slug,
innerHTML: post.title
},p);
// when the pnk is cpcked, create a new tab pane and "select" it
dojo.connect(a, oncpck ,function(e) {
// stop propagation
dojo.stopEvent(e);
// if this post isn t already open, create it...
if(!displayedPosts[post.slug]) {
//add a new tab content pane
displayedPosts[post.slug] = new dijit.layout.ContentPane({
title: post.title,
content: <h1> + post.title + </h1> + post.content,
closable: true
});
// add and select this tab
tabContainer.addChild(displayedPosts[post.slug]);
// make pnks into buttons
dojo.behavior.add({
.conred,.concom,.demo : function(node) {
var button = new dijit.form.Button({},node);
dojo.connect(button, onCpck ,function() {
window.location = node.href;
});
}
});
dojo.behavior.apply();
//when this tab is closed, remove it from the opened pst
dojo.connect(displayedPosts[post.slug], onClose ,function() {
displayedPosts[post.slug] = false;
return true;
});
}
// select the tab!
tabContainer.selectChild(displayedPosts[post.slug]);
});
});
});
}
});
//if this is the *first* pane, load the content
if(i == 0) pane.onShow();
});
});
// start up the accordion!
accordionContainer.startup();
});
它可以看一看许多 Java,但不会受到它的威胁;当你打破每一条码时,它就应该感觉到。
Room For Improvement
我选择仅仅装设员额及其预审。 你可以轻松地把全部员额装上评论和大家! 圣母进殿派修女会为你提供了足够的方法,以创建一个complete <>em> blogout with JSON and 每ever都有你喜欢的工具包。
