jQuery表单输入框标签插件jQuery FormLabels_脚本分享网 -JS/jQuery代码 -演示与下载 -时代Java

jQuery Form labels Plugin Demo Back to the tutorial

Default Functionality

Runs plugin with default configuration options

Code

                            $.fn.formLabels();
                        
Submit the form to see returned values

Option: 'excludeElts'

Excludes certain elements from being 'labelized'

Code

                            $.fn.formLabels({
                                excludeElts: 'input[name=secretWord]'
                            });
                        
Submit the form to see returned values

Option: 'refreshOnResize'

Whether or not refresh labels on window resize event.
Play with plus/minus buttons - you should notice that labels position is also changing accordingly to iframe size.

Code

                            $.fn.formLabels({
                                labelParent : 'body',
                                refreshOnResize : true
                            });
                        
Submit the form to see returned values

Option: 'safemode'

if enabled the plugin runs in safe mode without animation and other special features. Useful when dealing with unusual situations. Default: false

Code

                            $.fn.formLabels({
                                safemode : true
                            });
                        
Submit the form to see returned values

Option: 'labelParent'

Parent container for your 'labels'. Default: 'form' - labels will be inserted in closest form. Inspect source to find that labels was placed outside the form in the #labels div

Code

                            $.fn.formLabels({
                                labelParent : '#labels'
                            });
                        
Submit the form to see returned values

Option: 'semantic'

Although it's not recommended to turn off this function, sometimes it can be useful. Setting it to false prevents insserting <label/> before input element and appends it at the end of a form

Code

                            $.fn.formLabels({
                                semantic : false
                            });
                        
Submit the form to see returned values

Option: 'semantic'

Refresh labels' position. Useful when input position has been changed due to DOM manipulations, elements resizing, etc.
Click on "+" to move the form, then hit "refresh" to recalculate positions

Code

                            $("#refreshB").click(function(){
                                $.fn.formLabels.refreshLabels()
                                pushMessage("Labels were refreshed...");
                            })
                        
Submit the form to see returned values

代码整理:时代Java(NowJava.com) 更多相关效果,请到脚 本之家 脚本下载栏目

注:此代码仅供学习交流,请勿用于商业用途。

时代Java(NowJava.com)素材中心整理。




下载代码说明
X关闭

jQuery表单输入框标签插件jQuery FormLabels

jQuery实现的表单输入框效果插件,当焦点放到文本框内,文本框内的标签文本变淡,焦点离开,恢复原有标签