15 个Mootools 插件美化 HTML 表单

最新推荐文章于 2020-08-06 15:08:10 发布

水墨熊猫

最新推荐文章于 2020-08-06 15:08:10 发布

阅读量4k

点赞数

分类专栏： JavaScript 文章标签： mootools html calendar javascript autocomplete input

本文链接：https://blog.csdn.net/lxbin/article/details/5831959

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

原文地址：http://appslog.com/blog/1-blog/863-15-exciting-mootools-for-html-forms.html

01. Calendar

This is a really good looking Calendar script. I has been created as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks . View the Calendar stylesheet for examples of the CSS ; see the Styling Your Calendar section in the Manual for references to the XHTML .

Calendar has been successfully tested in Safari , Firefox , Opera and Internet Explorer . The class requires Mootools 1.1 with Fx.Style , Element and Window . In order to enable dragging , the class also requires the Drag component.

mootools-form

02.Mootools Class – Form Hilighter

Simple Mootools class that will animate a highlight effect (on focus) of text input and textarea fields in any form.

mootools-form

03. Textboxlist meets autocompletion

TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.

mootools-form

04. Mootools Form Validation

optional onFail function.
optional onSuccess function which will overide the form submition, this can be used to validate an ajax form.
onBlur validating
shows errors next to item or in a list.

mootools-form

05. Ajax Username Availability Checker

This plugin allows you to check the username availability without reloading the page.

mootools-form

06. FormCheck – Form validation class

FormCheck is a class that allows you to perform different tests on form to validate them before submission.

mootools-form

07. Form Validator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.

Works perfect with iMask as it’s complement.
Multiple forms per page supported.
Number of verified fields is not limited.
Number of filters per field is not limited.
Predefined formats: required, alpha, alphanum, integer, real, date, email, phone, url. (all customizable)
Support to register missing formats.
Highlight fields onValid and onInvalid.
Error reporting just after onBlur.
Easy to set and maintain.
Unobstrutive and XHTML Strict friendly.

mootools-form

08. iMask

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.

mootools-form

09. Custom checkboxes, radio buttons and select lists

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements.

mootools-form

10. Grow a textarea

Just make a form, and this script will add the ability to resize each textarea…if you want to

mootools-form

11. Ajax login form (PHP & Javascript)

Great login script that have been through “blog comment improvement and testing”. There are a lot of comments and the author have answered and updated the script to meet users needs. Consists of 3 javascript files, 2 php files and 1 stylesheet.

mootools-form

12. Multiple Select Widget with Mootools

Awesome looking select box styling with only a few lines of code.

mootools-form

13. AutoCompleter (v1.1)

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML ), a variety of user interactions, custom formatting, multiple selection, animations and much more.

mootools-form

14. Custom Form Elements (CFE)

Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like? You tried hard using the most ass-kicking XHTML/CSS tricks, but didn’t succeed without stuffing unnesscesary tags into your sleek sourcecode? Not to speak of the browsers and their “special abilities” in evaluating CSS.

Now this is for you! CFE finally found their way to SourceForge.net and allow you to style your forms individually!

mootools-form

15. HTML Form Tips Using MooTools

This is Twitter-likechars counter example using MooTools.It is counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field.