Guillermo Rauch的MooTools和jQuery的TextboxList

I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel Messi is. He lives in California so he doesn't have to deal with 3 months of bitter cold like I do in Madison. He even takes some of my chicks. All that said...he's just...just...so damn smart. In the end I think some of my bitterness about Guiller is that he's smarter than me. Better than me at MooTools, JavaScript, and even life.

我对你说老实话：我仍然不知道我是否喜欢我的MooTools队友Guillermo Rauch。 他背叛了很多。 他来自阿根廷，所以我每天大约收到10次关于莱昂内尔·梅西有多出色的即时消息。 他住在加利福尼亚，因此他不必像我在麦迪逊市那样经历3个月的严寒。 他甚至带走了我的一些小鸡。 所有这些...他只是...真是太聪明了。 最后，我认为我对吉勒的苦恼是他比我聪明。 在MooTools，JavaScript甚至生活方面都比我更好。

Evidence of Guiller's FTW-age can be found in his TextboxList plugin. TextboxList is a Facebook-style input list originally used by a small startup called Facebook. TextbloxList is available in both MooTools and jQuery flavors and is incredibly easy to implement. Lets walk through a simple example.

可以在他的TextboxList插件中找到Guiller的FTW年龄的证据。 TextboxList是Facebook风格的输入列表，最初由一家名为Facebook的小型创业公司使用。 TextbloxList提供MooTools和jQuery两种版本，并且易于实现。 让我们来看一个简单的例子。

View Demo 观看演示

HTML (The HTML)

Enter tags (with commas)

   
   

    
    
   
   
Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate

An input element. That's it. (Editor's note: Sometimes I don't understand why I even put a small description of the HTML portion of my code examples. Since I follow the "JS for enhancements" philosophy, the HTML part is usually self-explanatory. ....That is all.)

输入元素。 而已。 (编者注：有时我什至不明白为什么我甚至在代码示例HTML部分中都作了简短的描述。由于我遵循“ JS增强”的理念，因此HTML部分通常是不言自明的。就这些。)

CSS (The CSS)

.textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; }
.textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; }
.textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; }
.textboxlist-bit-editable { border: 1px solid #fff; }
.textboxlist-bit-editable-input { border: 0; padding: 2px 0; *padding-bottom: 0; height: 14px; font: 11px "Lucida Grande", Verdana; }
.textboxlist-bit-editable-input:focus { outline: 0; }
.textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 5px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; border: 1px solid #CAD8F3; background: #DEE7F8; cursor: default; }
.textboxlist-bit-box-deletable { padding-right: 15px; }
.textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
.textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; }
.textboxlist-bit-box-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
.textboxlist-bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
.textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; }

TextboxList comes with its own CSS stylesheet so the CSS portion is done for you. There's only one image required for TextboxList and it's sprited, at that. Guiller doesn't leave anything unoptimized. (Editor's note: Guiller's attention to detail both impresses me and pisses me off.)

TextboxList带有其自己CSS样式表，因此CSS部分已为您完成。 TextboxList只需要一张图像，然后就被拼接了。 吉勒不会对任何事情进行优化。 (编者注：吉勒对细节的关注既给我留下深刻印象，也让我很生气。)

MooTools的用法 (The MooTools Usage)

//create an instance 
var t2 = new TextboxList('myListElement', { 
	bitsOptions: {
		editable: {
			addKeys: 188
		}
	}
});
//add a few just for giggles
t2.add('Tag 1').add('Tag 2');

The above example is an extremely simple usage -- type a name, add a comma, and you can see the effect immediately. What's even more awesome is that the plugin is keyboard-compatible, meaning you can press the arrow keys to move "over" or between items, and even delete them. Essentially you never have to use your mouse. Also of note is that Guillermo's TextboxList class works with a bundled autocomplete plugin so you may quickly hook TextboxList in with your database. (Editor's note: There's also a special autocomplete snippet for binary searches....Yeah, I know, I bet you're probably starting to dislike him too...)

上面的示例是一个非常简单的用法-键入名称，添加逗号，您可以立即看到效果。 更棒的是该插件与键盘兼容，这意味着您可以按箭头键在各个项目之间或上方移动，甚至删除它们。 基本上，您不必使用鼠标。 还要注意的是，Guillermo的TextboxList类与捆绑的自动完成插件一起使用，因此您可以快速将TextboxList与数据库挂钩。 (编者注：对于二进制搜索，还有一个特殊的自动完成代码段...。是的，我知道，我敢打赌，您可能也开始不喜欢他...)

View Demo 观看演示

All jokes aside, Guillermo Rauch is an awesome developer. You can follow him on Twitter, poach his code on GitHub (he's a Node.js guru as well), or check out his musings on his blog. He also has project pages created for both the MooTools and jQuery versions of TextboxList so be sure to hit those to get the details on class options, events, and usages.

撇开所有笑话，Guillermo Rauch是一位了不起的开发人员。 您可以在Twitter上关注他 ，在GitHub上搜索他的代码(他也是Node.js专家)，或者在他的博客上查看他的想法 。 他还为MooTools和jQuery版本的TextboxList创建了项目页面，因此请务必选中它们以获取有关类选项，事件和用法的详细信息。

If you do by chance get a moment to throw a tweet at him be sure to thank him for creating the MooTools Forge!

如果您有机会抽出时间向他发送推文，请务必感谢他创建了MooTools Forge ！

翻译自: https://davidwalsh.name/mootools-jquery-textbox-list