mootools

mootools

The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort. OverText is one of those plugins. OverText generates labels on top of your input boxes that serve as directives to your users as to what they should place into a given field.

MooTools More库是一个金矿。 宝藏 如果愿意的话，海盗赃物(当然，我愿意)。 充满了更多插件，这些插件可以毫不费力地为您的网站添加很多类和功能。 OverText是这些插件之一。 OverText在您的输入框上方生成标签，这些标签可作为用户应将其放置在给定字段中的指令。

View Demo 观看演示

HTML (The HTML)

<input type="text" name="first_name" id="first-name" title="Your first name..." />

Nothing special here -- just an input box with a title attribute containing the desired label text.

这里没什么特别的-只是一个带有标题属性的输入框，其中包含所需的标签文本。

CSS (The CSS)

.overTxtLabel { color:#999; }

I've chosen to style my OverText labels with a lighter color -- feel free to customize however you'd like.

我选择用较浅的颜色设置OverText标签的样式-可以随意自定义。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('load',function() { new OverText('first-name',{ //there are many more options available!! positionOptions: { offset: { x: 8, y: 8 } } }); });

The usage of OverText doesn't even require a description. You feed it a text field, any custom options you'd like, and that's it.

OverText的用法甚至不需要描述。 您将其输入文本字段，所需的任何自定义选项，仅此而已。

View Demo 观看演示

I love how MooTools can give your website an instant upgrade with plugins like this. MooTools FTW!

我喜欢MooTools如何通过此类插件为您的网站提供即时升级。 MooTools FTW！

翻译自: https://davidwalsh.name/mootools-overtext

mootools

相关资源：jdk-8u281-windows-x64.exe