dojo创建浮动工具栏_创建由Dojo驱动的WordPress网站视图

dojo创建浮动工具栏

Yesterday I showed you WordPress' awesome JSON plugin named JSON API. Now that I can get my blog posts in JSON format, it's time to create an awesome AJAX'ed web app with that data. I've chosen to use the power of Dojo and Dijit to create a stylish, AJAX-powered web app which provides intelligent views of all of my blog posts. You wont want to miss this post!

昨天我向您展示了WordPress很棒的JSON插件JSON API 。现在，我可以使用JSON格式获取博客文章，是时候使用该数据创建一个很棒的AJAX版本的Web应用程序了。我选择使用Dojo和Dijit的功能来创建一个时尚的，由AJAX驱动的网络应用程序，该应用程序可提供所有博客文章的智能视图。您不会想错过这篇文章！

View Demo观看演示

HTML (The HTML)

There's very little HTML (initially) to get the app going; simply create a container DIV with explicit size dimensions which will act as a application "holder":

最初只有很少HTML可以使应用程序运行；只需创建具有明确大小尺寸的容器DIV，即可用作应用程序的“持有人”：


<body class="claro">
<!-- will set the eventual dimensions for the tab container -->
<div style="width:900px;height:1000px" id="appbase"></div>
</body>

These size dimensions will allow use to use height and width settings of 100% for our inner widgets. Note that I'm showing you the BODY tag -- I'll be using the claro theme for my page.

这些尺寸尺寸将允许我们为内部小部件使用100％的高度和宽度设置。请注意，我正在向您显示BODY标签-我将在页面中使用claro主题。

CSS (The CSS)

There's no app-specific CSS required. You do, however, need to pull in the CSS file for the desired theme.

不需要特定于应用程序CSS。但是，您确实需要提取所需主题CSS文件。


/* bring in the claro theme */
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";

As I mentioned above, I'm using the new claro theme.

如上所述，我正在使用新的claro主题。

Dojo JavaScript (The Dojo JavaScript)

There's a good amount of JavaScript required to make this awesome layout work so I've broken it down by task.

要使这种出色的布局有效，需要大量JavaScript，因此我已按任务对其进行了细分。

要求Dijit类 (Requiring Dijit Classes)

As always, requiring Dojo and the classes we will use on the page will always be the first step.

与往常一样，要求Dojo和我们将在页面上使用的类始终是第一步。


/* 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() {
// subsequent code goes here
});

Try keeping your dependencies down -- less classes to load means faster application performance.

尝试降低依赖关系-减少要加载的类意味着更快的应用程序性能。

建立版面 (Building the Layout)

The first step is to build the layout. I'm going to create a two column layout, encompassed by a BorderContainer, in which the left side will provide categories and articles via an AccordionContainer layout. The right side will feature a TabContainer layout with a separate tab opening for every article requested.

第一步是构建布局。我将创建一个由BorderContainer包围的两列布局，其中左侧将通过AccordionContainer布局提供类别和文章。右侧将具有TabContainer布局，并为每个请求的文章提供单独的选项卡开口。


/* 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('div',{ style:'height:100%;width:100%;' },appbase));
// create the left sidebar
var accordionContainer = new dijit.layout.AccordionContainer({
splitter: true,
region: 'leading'
},dojo.create('div',{ 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('div',{ 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: 'Click on any of the posts you see on the left side of the page.  All post previews will display here!'
},dojo.create('div',{},tabContainer.domNode)));
// start the layout up!
container.startup();

A persistent "welcome" tab is added just so there is always a tab open.

添加持久性“ welcome”选项卡只是为了始终打开一个选项卡。

JSON内容加载-类别和帖子 (JSON Content Loading - Categories & Posts)

Loading the category list is the first order of business. When the JSON list of categories is returned, a new AccordionPane is added to the Accordion for every category returned:

加载类别列表是第一要务。当返回类别的JSON列表时，对于返回的每个类别，将新的AccordionPane添加到手风琴：


// 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('div',{ innerHTML: 'Loading ' + category.title + ' posts...' },accordionContainer.domNode));
accordionContainer.addChild(pane);

After the AccordionPane is within the Accordion, the next step is adding an onShow event to the AccordionPane which will load posts within the given category when the category receives focus:

在AccordionPane放入Accordion之后，下一步是向on AccordionPane添加一个onShow事件，当该类别获得焦点时，该事件将加载给定类别内的帖子：


// 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;  limit 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!

When the posts are loaded, a list of links is added to the AccordionPane:

加载帖子后，链接列表将添加到AccordionPane：


// make content!
var ul = dojo.create('ul',{},pane.domNode);
dojo.forEach(postsResponse.posts,function(post) {
//create list items and links
var li = dojo.create('li',{},ul),
a = dojo.create('a',{
href: '/' + post.slug,
innerHTML: post.title
},li);

With every link we create, it's necessary to add a click event which stops the user from leaving the page and generates a tab within the right TabContainer widget:

对于我们创建的每个链接，有必要添加一个click事件，该事件将阻止用户离开页面并在右侧的TabContainer小部件内生成一个标签：


// when the link is clicked, create a new tab pane and "select" it
dojo.connect(a,'onclick',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]);

The next step is turning the "Continue Reading" and "Discussion" links into Dijit Button instances:

下一步是将“继续阅读”和“讨论”链接转换为Dijit Button实例：


// make links into buttons
dojo.behavior.add({
'.conred,.concom,.demo': function(node) {
var button = new dijit.form.Button({},node);
dojo.connect(button,'onClick',function() {
window.location = node.href;
});
}
});
dojo.behavior.apply();
//when this tab is closed, remove it from the opened list
dojo.connect(displayedPosts[post.slug],'onClose',function() {
displayedPosts[post.slug] = false;
return true;
});

To finish things off, we direct the first AccordionPane to show (and thus load posts) and then direct the Accordion to start up:

为了完成任务，我们指示第一个AccordionPane显示(并因此加载帖子)，然后指示Accordion启动：


}
// 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 code itself should be fairly self explanatory; my comments should be of help.

该代码本身应该是相当自我解释的；我的意见应该有所帮助。

完整JavaScript (The Complete JavaScript)

Here's the complete JavaScript source:

这是完整JavaScript来源：


/* 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('div',{ style:'height:100%;width:100%;' },appbase));
// create the left sidebar
var accordionContainer = new dijit.layout.AccordionContainer({
splitter: true,
region: 'leading'
},dojo.create('div',{ 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('div',{ 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: 'Click on any of the posts you see on the left side of the page.  All post previews will display here!'
},dojo.create('div',{},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('div',{ 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;  limit 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 list items and links
var li = dojo.create('li',{},ul),
a = dojo.create('a',{
href: '/' + post.slug,
innerHTML: post.title
},li);
// when the link is clicked, create a new tab pane and "select" it
dojo.connect(a,'onclick',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 links into buttons
dojo.behavior.add({
'.conred,.concom,.demo': function(node) {
var button = new dijit.form.Button({},node);
dojo.connect(button,'onClick',function() {
window.location = node.href;
});
}
});
dojo.behavior.apply();
//when this tab is closed, remove it from the opened list
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();
});

It may look like there's a lot of JavaScript but don't get intimidated by it; when you break down each code block, it should all make sense.

看起来好像有很多JavaScript，但不要被它吓倒了。当您分解每个代码块时，它们都应该有意义。

有待改进 (Room For Improvement)

I've chosen to simply load posts and their previews. You could easily load the complete posts with comments and all! JSON API provides you more than enough methods to create a complete blog layout with JSON and whichever JavaScript toolkit you'd like.

我选择仅加载帖子及其预览。您可以轻松地在完整的帖子中添加评论和所有内容！ JSON API为您提供了足够多的方法，可以使用JSON和所需的任何JavaScript工具包创建完整的博客布局。

If I were looking to port this code to other sites or simply want to keep adding to the class, I would make this code into a custom Dijit widget. I may do that in the future to show you how it's done.

如果我想将此代码移植到其他站点，或者只是想继续添加到类中，则可以将此代码制作到自定义Dijit小部件中。将来我可能会告诉您它是如何完成的。

View Demo观看演示

There you have it! The amount of existing code provided to you by Dojo, paired with its intelligent design and awesome Dijit architecture, makes creating advanced layouts quick, easy, and accessible. I especially like how easy dealing with JSON and callbacks is with Dojo promises. Have any suggestions for this layout? Share them!

你有它！ Dojo提供给您的大量现有代码，再加上其智能的设计和令人敬畏的Dijit架构，使得创建快速布局，快速，轻松和可访问性成为可能。我特别喜欢使用Dojo promises来轻松处理JSON和回调。对这种布局有什么建议吗？分享他们！