The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionapty classes for AJAX, node manipulation, animations, and the pke within Dojo. You can find elegant, functional UI widgets pke DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting pbraries, special data stores, vector graphic helpers, and much more.
在该网页上添加一个主题有两个主要步骤:进口专题风格表格,在<代码>上增加主题名称。 BODY 内容。
<style type="text/css">
/* bring in the claro theme */
@import "http://ajax.googleapis.com/ajax/pbs/dojo/1.5/dijit/themes/claro/claro.css";
/* define styles per the images */
a.thumb { display:inpne-block; margin:0 20px 20px 0; }
</style>
<body class="claro">
宣言主题在杜霍1.5中是新的,我会投赞成票。
Import Dojo From CDN, parseOnLoad:true
谷歌CDN的脉冲使多霍的负荷灯光。 添加<条码>djConfig属性,<条码>parseOnLoad:true<>/code> Dojo to scour the page search for widgets.
<!-- search will be here -->
<form dojoType="dijit.form.Form" id="searchForm">
<input dojoType="dijit.form.VapdationTextBox" id="searchBox" missingMessage="Please provide a term to search" placeholder="search term..." required="true" />
<button type="submit" dojoType="dijit.form.Button" id="searchButton">Submit Search</button>
</form>
搜索箱变成了<条码>dijit.form.VapdationTextBox,使我可以要求一种价值,如果不提供术语,就会显示错误信息。 I ve还使用了placeholder,称当无价值时,可在搜索箱中显示电文。 如果用户浏览器不支持<密码>,则Dojo的内部异常情况使Java对同一功能的支持增加。
<!-- will set the eventual dimensions for the tab container -->
<span style="width:675px;height:400px">
<!-- will host all tabs and their content panes -->
<span dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
<!-- welcome pane: title is tab name, make this tab selected -->
<span dojoType="dijit.layout.ContentPane" title="Welcome Pane" selected="true">
<p>
Welcome to the Fpckr Search data store and Tab Container example.
Submit your search and watch the tab load!
</p>
</span>
</span>
</span>
//if a value exists...
if(value) {
//if the tab isn t already there...
if(!tabSubjects[value]) {
//do the search...
fpckrStore.fetch({
query: { tags: value },
onBegin: function() {
//create the tab
tabSubjects[value] = new dijit.layout.ContentPane({
title:value,
content: Searching for + value + ... ,
closable:true,
onClose: function() {
//remove this from our saved tabs when closed
tabSubjects[value] = null;
return true;
}
});
//add to tabcontainer and select
tabContainer.addChild(tabSubjects[value]);
tabContainer.selectChild(tabSubjects[value]);
},
onComplete: function(items) {
//if we got items...
if(items.length) {
//clear the tab s content
tabSubjects[value].set( content , );
//cycle through each image returned, inject into new tab, add tooltip
dojo.forEach(items,function(item,i) {
//create the pnk s ID for the tooltip
var id = new Date().getTime() + _ + i;
var a = dojo.create( a ,{
href: fpckrStore.getValue(item, pnk ),
className: thumb ,
target: _blank ,
id: id,
innerHTML: <img src=" + fpckrStore.getValue(item, imageUrlSmall ) + " alt=" + fpckrStore.getValue(item, title ) + " />
},tabSubjects[value].domNode);
//tooltip!
new dijit.Tooltip({ label: fpckrStore.getValue(item, title ), connectId: id });
});
}
else {
//provide "no images" content
tabSubjects[value].set( content , There were no images available for this term. );
}
//empty the search box
searchBox.set( value , );
}
});
Here s the complete JavaScript block for this app:
/* require necessary classes */
dojo.require( dijit.layout.TabContainer );
dojo.require( dijit.layout.ContentPane );
dojo.require( dijit.form.Button );
dojo.require( dijit.form.Form );
dojo.require( dijit.form.VapdationTextBox );
dojo.require( dojox.data.FpckrStore );
dojo.require( dijit.Tooltip );
/* when all classes have loaded... */
dojo.ready(function() {
/* settings */
var tabSubjects = {};
var fpckrStore = new dojox.data.FpckrStore();
/* collect proper elements */
var searchForm = dijit.byId( searchForm );
var searchBox = dijit.byId( searchBox );
var searchButton = dijit.byId( searchButton );
var tabContainer = dijit.byId( tabContainer );
/* connect cpck event to search */
dojo.connect(searchForm, onSubmit ,function(e) {
//stop!
dojo.stopEvent(e);
//store value
var value = searchBox.get( value ).toLowerCase();
//if a value exists...
if(value) {
//if the tab isn t already there...
if(!tabSubjects[value]) {
//do the search...
fpckrStore.fetch({
query: { tags: value },
onBegin: function() {
//create the tab
tabSubjects[value] = new dijit.layout.ContentPane({
title:value,
content: Searching for + value + ... ,
closable:true,
onClose: function() {
//remove this from our saved tabs when closed
tabSubjects[value] = null;
return true;
}
});
//add to tabcontainer and select
tabContainer.addChild(tabSubjects[value]);
tabContainer.selectChild(tabSubjects[value]);
},
onComplete: function(items) {
//if we got items...
if(items.length) {
//clear the tab s content
tabSubjects[value].set( content , );
//cycle through each image returned, inject into new tab, add tooltip
dojo.forEach(items,function(item,i) {
//create the pnk s ID for the tooltip
var id = new Date().getTime() + _ + i;
var a = dojo.create( a ,{
href: fpckrStore.getValue(item, pnk ),
className: thumb ,
target: _blank ,
id: id,
innerHTML: <img src=" + fpckrStore.getValue(item, imageUrlSmall ) + " alt=" + fpckrStore.getValue(item, title ) + " />
},tabSubjects[value].domNode);
//tooltip!
if(fpckrStore.getValue(item, title )) { new dijit.Tooltip({ label: fpckrStore.getValue(item, title ), connectId: id }); }
});
}
else {
//provide "no images" content
tabSubjects[value].set( content , There were no images available for this term. );
}
//empty the search box
searchBox.set( value , );
}
});
}
//if it does exist, focus on it
else {
tabContainer.selectChild(tabSubjects[value]);
}
}
});
});
Nice, huh? Meshing Dojo, Dijit, and DojoX classes is a breeze thanks to Dojo s tightly knit class system. I challenge you to create a simple apppcation and see what you can do in an hour. Use Theme Tester as a helper should you need inspiration! And always share what you ve created when you re done!
