dojo创建浮动工具栏

Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a billion times.  No attempt  to highlight the text and then delete.  It's one tap.  Boom.  Text gone.  With that in mind, I took Dijit's dijit.form.TextBox and created my own widget which features a clear link.

可用性是创建用户界面时的关键功能。 一切都在细节中。 我最近在使用iPhone，它的输入元素中的“ x”图标真棒。 不能按住删除键。 没有按十亿次。 不要尝试突出显示文本然后删除。 一键即可。 繁荣。 文字不见了。 考虑到这一点，我采用了Dijit的dijit.form.TextBox并创建了自己的具有清晰链接的小部件。

CSS (The CSS)

We'll need to add some padding to the TextBox domNode to prevent text running behind the widget.  Then we'll use some absolute positioning to position the clear link to the right.  The border of the TextBox widget is on a wrapping DIV, not the INPUT element itself, so the link will appear inside the bordered box:

我们需要在T​​extBox domNode中添加一些填充，以防止文本在小部件后面运行。 然后，我们将使用一些绝对定位将明链接定位到右侧。 TextBox小部件的边框位于包装的DIV上，而不是INPUT元素本身，因此链接将显示在带边框的框中：

/* Define clear */.claro .davidwalshClearBox { 	padding-right: 25px; 	position: relative; }.claro .davidwalshClearBox a.davidwalshClear { 	width: 12px;	height: 12px;	display: block;	overflow: hidden;	text-indent: -5000px;	position: absolute;	top: 4px; 	right: 5px;	background: url(closeButtonSprite.png) 0 0 no-repeat;	z-index: 2000;	cursor: pointer; }.claro .davidwalshClearBox a.davidwalshClear:hover { 	background-position:-12px 0; }.dj_ie .claro .davidwalshClearBox a.davidwalshClear	{ 	top:2px; }

Unfortunately there's a IE-specific hack to get the link vertically centered within the box.  Damn.

不幸的是，有一个特定于IE的hack使链接在框内垂直居中。 该死的。

Dojo JavaScript (The Dojo JavaScript)

My first attempt had me creating a custom template for the widget;  I copied dijit.form.TextBox's template and added the clear link within the HTML.  The problem with that was if dijit.form.TextBox's template changed, my widget template could be obsolete and troublesome because I inherit from other parts of TextBox.  I instead chose to inject a link and adjust sizing within the postCreate method:

我的第一次尝试是让我为小部件创建自定义模板； 我复制了dijit.form.TextBox的模板，并在HTML中添加了清晰的链接。 问题是如果dijit.form.TextBox的模板更改了，我的窗口小部件模板可能会过时且麻烦，因为我继承自TextBox的其他部分。 相反，我选择在postCreate方法中注入一个链接并调整大小：

// Provide our new classdojo.provide("davidwalsh.form.ClearTextBox");// Request dependenciesdojo.require("dijit.form.TextBox");// Declare our new class// Declare our new classdojo.declare("davidwalsh.form.ClearTextBox", dijit.form.TextBox,{	// The "Delete" word	deleteText: "Delete",		// Fire the change event for every text change	intermediateChanges: true,		// PostCreate method	// Fires *after* nodes are created, before rendered to screen	postCreate: function() {		// Do what the previous does with this method		this.inherited(arguments);		// Add widget class to the domNode		var domNode = this.domNode;		dojo.addClass(domNode, "davidwalshClearBox");		// Create the "X" link		this.clearLink = dojo.create("a", {			className: "davidwalshClear",			innerHTML: this.deleteText		}, domNode, "first");		// Fix the width		var startWidth = dojo.style(domNode, "width"),			pad = dojo.style(this.domNode,"paddingRight");		dojo.style(domNode, "width", (startWidth - pad) + "px");		// Add click event to focus node		this.connect(this.clearLink, "onclick", function(){			// Clear the value			this.set("value", "");			// Focus on the node, not the link			this.textbox.focus();		});		// Add intermediate change for self so that "X" hides when no value		this.connect(this, "onChange", "checkValue");		// Check value right away, hide link if necessary		this.checkValue();	},		checkValue: function(value) {		dojo[(value != "" && value != undefined ? "remove" : "add") + "Class"](this.clearLink, "dijitHidden");	}});

As always, the first steps of creating a Dojo class are providing the new class and requiring its dependencies.  The next step is declaring the new class by providing the class name as the first argument, its dependencies as the second argument, and its properties in method in the third.  The postCreate method within a Dijit widget fires after all nodes in the template have been created but before the widget is rendered to the page.  So once I have the widget's wrapping domNode, I add the widget's special CSS class and create the "X" clear link.  With the link in place, I measure the domNode and subtract the padding we added with the CSS class so that the widget conforms to the width desired by the instance.  The last step is adding a click event to the node clears the INPUT's value and focuses on it.

与往常一样，创建Dojo类的第一步是提供新类并需要其依赖项。 下一步是通过提供类名称作为第一个参数，提供其依赖项作为第二个参数，并在第三个方法中提供其属性来声明新类。 Dijit小部件中的postCreate方法在创建模板中的所有节点之后但在将小部件呈现到页面之前触发。 因此，一旦有了窗口小部件的包装domNode，便添加窗口小部件的特殊CSS类并创建“ X”清除链接。 有了链接后，我测量domNode并减去我们用CSS类添加的填充，以便小部件符合实例所需的宽度。 最后一步是向节点添加click事件，以清除INPUT的值并集中处理。

Thanks to Dojo's powerful inheritance system, my custom class can remain small but lethally potent!  Try out the demo on your mobile phone -- it will work great!

多亏Dojo强大的继承系统，我的自定义类可以保持很小的规模，但致命的强大！ 在您的手机上试用该演示-效果很好！

翻译自:

dojo创建浮动工具栏