Create a Twitter Style Login Form with jQuery
利用jQuery创建一个Twitter风格的下拉登录表单。
Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!
网友留言/评论
我要留言/评论
相关开源项目
ProtoForm:基于Prototype框架开发，提供Form校验与Ajax提交功能。能够校验输入框中否必填，校验Email，日期，电话号码和URL等格式是否正确。利用Ajax发送数据，显示请求响应，加亮获取焦点的输入框等。
jquery-image-dropdown:这个jQuery插件能够将普通的select下拉选择控件转换成，一个可以为下拉框中的每个选项添加不同图标的控件。
MooTools FormCheck:MooTools FormCheck用于在表单上实现各种不同校验。支持通过CSS自定义外观，将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括：必填校验，数字校验，长度校验等。还支持表达式校验包括：电话号码、EMail、URL等。
InputMask Class for MooTools:这是一个可以让用户按设定好格式输入的MooTools插件。
textarea自适应高度插件 textareaAutoHeight:jQuery • textareaAutoHeight Plugin
功能: <textarea />输入框自适应高度
特点: 支持剪切/粘贴, 不闪屏, 体积迷你(不到1k)
兼容: 几乎所有主流浏览器(国内山寨货未测试)
演示: 见下图
使用方法:
0. 检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效.
1. 加载jQuery库(1.4+)
2. 加载textareaAutoHeight.js
3. 使用以下接口调用插件:$('textarea').tah({
moreSpace:15, //输入框底部预留的空白, 默认15, 单位像素
maxHeight:600, //指定Textarea的最大高度, 默认600, 单位像素
animateDur:200 //调整高度时的动画过渡时间, 默认200, 单位毫秒});
功能: <textarea />输入框自适应高度
特点: 支持剪切/粘贴, 不闪屏, 体积迷你(不到1k)
兼容: 几乎所有主流浏览器(国内山寨货未测试)
演示: 见下图
使用方法:
0. 检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效.
1. 加载jQuery库(1.4+)
2. 加载textareaAutoHeight.js
3. 使用以下接口调用插件:$('textarea').tah({
moreSpace:15, //输入框底部预留的空白, 默认15, 单位像素
maxHeight:600, //指定Textarea的最大高度, 默认600, 单位像素
animateDur:200 //调整高度时的动画过渡时间, 默认200, 单位毫秒});
标签输入 jQuery TagBox: jQuery TagBox这个jQuery插件用于创建标签辅助输入框。
Formly: 这个jQuery插件提供一种非常简便的方式来美化普通表单的界面，并为其添加校验功能。
FormBox:FormBox是一个采用jQuery与CSS3实现的一个下拉菜单，并支持在下拉菜单中集成一个表单。
美化的选择框控件 Chosen: Chosen是一个javsacript插件，能够将原始的下拉选择框转成更加美观，对用户更友好的选择框控件。当前提供基于jQuery和Prototype实现的两种版本。
InputLabel:InputLabel这个jQuery插件能够为文本输入框添加备注说明。并且当输入框获得焦点时，备注说明自动消失。支持为备注说明设置字体颜色。