dojo创建浮动工具栏_使用Dojo工具包创建动态Flickr图像搜索

最新推荐文章于 2024-07-18 20:13:39 发布

culuo8053

最新推荐文章于 2024-07-18 20:13:39 发布

阅读量212

点赞数

文章标签： java javascript vue python js ViewUI

原文链接：https://davidwalsh.name/dojo-flickr

版权

dojo创建浮动工具栏

The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.

Dojo Toolkit是很棒JavaScript类的宝库。您可以在Dojo中找到用于AJAX，节点操纵，动画等的基本JavaScript功能类。您可以在Dijit中找到优雅，功能强大的UI小部件，例如DropDown菜单，选项卡式界面和表单元素替换。在DojoX中，您可以找到图表库，特殊数据存储，矢量图形助手等。

This post aims to mesh the three collections together. We'll be creating a tabbed interface for grabbing Flickr images using Dijit's TabContainer, DojoX's Flickr data store, and basic Dojo code for event handling and node manipulation.

这篇文章的目的是将这三个集合网格化。我们将创建一个选项卡式界面，以使用Dijit的TabContainer， DojoX的Flickr数据存储以及用于事件处理和节点操作的基本Dojo代码来捕获Flickr图像。

View Demo 观看演示

选择一个主题 (Select a Theme)

There are two main steps in adding a theme to the page: importing the theme stylesheet and adding the theme as a class name to the BODY element.

将主题添加到页面有两个主要步骤：导入主题样式表，并将主题作为类名称添加到BODY元素。


<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
	
	/* define styles per the images */
	a.thumb	{ display:inline-block; margin:0 20px 20px 0; }
	
</style>


<body class="claro">

The claro theme is new in Dojo 1.5 and happens to be my favorite.

claro主题是Dojo 1.5中的新功能，恰好是我的最爱。

从CDN导入Dojo，parseOnLoad：true (Import Dojo From CDN, parseOnLoad:true)

Pulling from Google's CDN makes Dojo load lightning-fast. Adding a djConfig attribute with parseOnLoad:true instructs Dojo to scour the page looking for widgets.

从Google的CDN中拉出后，Dojo的加载速度很快。使用parseOnLoad:true添加djConfig属性指示Dojo parseOnLoad:true页面以查找小部件。


<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

Alternatively you could configure Dojo by using the djConfig JavaScript variable:

或者，您可以使用djConfig JavaScript变量配置Dojo：


djConfig = {
	parseOnLoad: true
};

Either way will suffice.

无论哪种方式都足够。

创建HTML结构：选项卡容器和搜索表单 (Create the HTML Structure: Tab Container and Search Form)

Setting up the form comes first. The form is going to be very simple, containing only a search box and a submit button. Each node (FORM, INPUT, and BUTTON) is converted to its Dijit widget equivalent to provide extra functionality and themed display.

首先设置表格。表单将非常简单，仅包含一个搜索框和一个提交按钮。每个节点( FORM ， INPUT和BUTTON )都转换为等效的Dijit小部件，以提供额外的功能和主题显示。


<!-- search will be here -->
<form dojoType="dijit.form.Form" id="searchForm">
	<input dojoType="dijit.form.ValidationTextBox" 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>

The search box becomes a dijit.form.ValidationTextBox which allows me to require a value and display an error message if no term is provided. I've also used the placeholder attribute to display a message in the search box when there is no value. Dojo's internal awesomeness adds JavaScript support for the same functionality if the user's browser doesn't support placeholder yet.

搜索框变成dijit.form.ValidationTextBox ，如果没有提供任何术语，它可以让我要求一个值并显示错误消息。当没有值时，我还使用了placeholder属性在搜索框中显示消息。如果用户的浏览器尚不支持placeholder则Dojo的内部功能会为同一功能添加JavaScript支持。

The second piece is placing the TabContainer and its initial content pane in the page. The initial ContentPane content will simply be a "welcome" tab so that there's always one tab within the container:

第二部分是将TabContainer及其初始内容窗格放置在页面中。最初的ContentPane内容将只是一个“欢迎”标签，因此容器内始终只有一个标签：


<!-- will set the eventual dimensions for the tab container -->
<div style="width:675px;height:400px">
	<!-- will host all tabs and their content panes -->
	<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
		<!-- welcome pane: title is tab name, make this tab selected -->
		<div dojoType="dijit.layout.ContentPane" title="Welcome Pane" selected="true">
			<p>
				Welcome to the Flickr Search data store and Tab Container example.  
				Submit your search and watch the tab load!
			</p>
		</div>
	</div>
</div>

Future tabs will be closable.

将来的标签页将关闭。

需要Dojo / Dijit / DojoX依赖关系 (Require Dojo/Dijit/DojoX Dependencies)

Before we can create our widgets and use Dojo classes, we need to load them:

在创建小部件和使用Dojo类之前，我们需要加载它们：


/* 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.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

Dojo's internal functionality will also direct dependencies of dependencies to be loaded. If you aren't familiar with Dojo class loading, be sure to read The Beauty of dojo.require().

Dojo的内部功能还将指示要加载的依赖项的依赖项。如果您不熟悉Dojo类加载，请务必阅读dojo.require()之美。

Dojo，Dijit，DojoX：让它发生 (Dojo, Dijit, DojoX: Make It Happen)

Now that the theme is in place, HTML structure is there, and we've required the necessary classes, we can code our application-specific JavaScript. There's a decent amount of JavaScript need to make this work so let's break it down.

既然已经有了主题，就已经有了HTML结构，并且我们需要必需的类，我们可以编写特定于应用程序JavaScript。要完成这项工作，需要大量JavaScript，所以让我们对其进行分解。

Start by creating an object which will hold all of our open tabs and an instance of dojox.data.FlickrStore which will be used to query Flickr:

首先创建一个对象，该对象将保存所有打开的选项卡，以及一个dojox.data.FlickrStore实例，该实例将用于查询Flickr：


/* settings */
var tabSubjects = {};
var flickrStore = new dojox.data.FlickrStore();

Then collect the form elements as well as the TabContainer:

然后收集表单元素以及TabContainer ：


/* collect proper elements */
var searchForm = dijit.byId('searchForm');
var searchBox = dijit.byId('searchBox');
var searchButton = dijit.byId('searchButton');
var tabContainer = dijit.byId('tabContainer');

Add a "submit" event listener to the TabContainer...

向TabContainer添加“提交”事件侦听器...


/* connect click event to search */
dojo.connect(searchForm,'onSubmit',function(e) {

...which stops the normal form submission:

...这将停止常规表单提交：


//stop!
dojo.stopEvent(e);

...grabs the value of the search box:

...获取搜索框的值：


//store value - set to lower case to save to caching object
var value = searchBox.get('value').toLowerCase();

If a value is present, make sure there isn't currently a search tab open for that term. If there is, focus on it. If this is a new search term, direct the dojox.data.FlickrStore instance to search and return images for the given term. Upon search, a new tab for this term is created with a default title and content string, added to the TabContainer, and this new tab is selected:

如果存在值，请确保当前没有针对该术语打开搜索选项卡。如果有，请集中精力。如果这是一个新的搜索词，请指示dojox.data.FlickrStore实例搜索并返回给定词的图像。搜索后，将使用默认标题和内容字符串创建该术语的新标签，并将其添加到TabContainer中，并选择以下新标签：


//if a value exists...
if(value) {
	//if the tab isn't already there...
	if(!tabSubjects[value]) {
		//do the search...
		flickrStore.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]);
			},

When the search is complete, we clear the contents of the tab's pane and loop through each returned image, injecting it into the content pane. Lastly, we create a tooltip for the image which displays the image name when the user focuses on the image:

搜索完成后，我们清除选项卡窗格的内容，并循环浏览每个返回的图像，并将其注入到内容窗格中。最后，我们为图像创建一个工具提示，当用户专注于图像时显示图像名称：


	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 link's ID for the tooltip
				var id = new Date().getTime() + '_' + i;
				var a = dojo.create('a',{ 
					href: flickrStore.getValue(item,'link'),
					className: 'thumb',
					target: '_blank',
					id:  id,
					innerHTML: '<img src="' + flickrStore.getValue(item,'imageUrlSmall') + '" alt="' + flickrStore.getValue(item,'title') +'" />'
				},tabSubjects[value].domNode);
				//tooltip!
				new dijit.Tooltip({ label: flickrStore.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:

这是此应用程序的完整JavaScript块：


/* 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.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

/* when all classes have loaded... */
dojo.ready(function() {
	
	/* settings */
	var tabSubjects = {};
	var flickrStore = new dojox.data.FlickrStore();
	
	/* collect proper elements */
	var searchForm = dijit.byId('searchForm');
	var searchBox = dijit.byId('searchBox');
	var searchButton = dijit.byId('searchButton');
	var tabContainer = dijit.byId('tabContainer');
	
	/* connect click 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...
				flickrStore.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 link's ID for the tooltip
								var id = new Date().getTime() + '_' + i;
								var a = dojo.create('a',{ 
									href: flickrStore.getValue(item,'link'),
									className: 'thumb',
									target: '_blank',
									id:  id,
									innerHTML: '<img src="' + flickrStore.getValue(item,'imageUrlSmall') + '" alt="' + flickrStore.getValue(item,'title') +'" />'
								},tabSubjects[value].domNode);
								//tooltip!
								if(flickrStore.getValue(item,'title')) { new dijit.Tooltip({ label: flickrStore.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]);
			}
		}
	});
});

How long would you say this took to write? Half hour? Hour? Three hours? Nope. This mini-application only took me about 15 minutes to write! DojoX also features a class for pulling images from Picasa.

您说要花多长时间写？半小时？小时？三个小时？不。这个微型应用程序只花了我大约15分钟即可完成！ DojoX还具有用于从Picasa提取图像的类。

View Demo 观看演示

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 application 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!

好吧由于Dojo的紧密编织类系统，使Dojo，Dijit和DojoX类的网格划分变得轻而易举。我要求您创建一个简单的应用程序，然后看看您在一小时内可以做什么。如果您需要灵感，请使用主题测试器作为帮手！并始终分享完成后创建的内容！

翻译自: https://davidwalsh.name/dojo-flickr

dojo创建浮动工具栏

culuo8053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo创建浮动工具栏_使用Dojo工具包创建动态Flickr图像搜索

dojo创建浮动工具栏 The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Do...
复制链接

扫一扫