Skip to content

drewlee/focusify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Focusify is a simple jQuery plugin for visually enhancing forms and form elements. Problems surface when there is a requirement to provide visual cues from interactions with form fields. Since CSS works from a top down, left to right hierarchy, there is no simple way to style an element that precedes, or is the parent of, an active field in the form. Focusify intends to resolve this issue by dynamically altering the class name of the related focused element, therefore providing a hook for the custom styling of the element's states.

##Usage Simply initialize the plugin on the intended element(s):

$('input.text').focusify();

##Options The plugin accepts three optional settings, a custom class name to apply to the field's related target (default class name is 'infocus'), and two jQuery selector strings, which specify the related elements to apply the 'infocus' class name to (default is applied to the preceding element, assuming the label element adjacent to the field is the intended target).

$('input.text').focusify({
  // default classname is 'infocus'
  classname: 'my-focus',
	
  // default uses .prev() to target the preceding element
  // if specifying a custom selector, .parents('selector') method is used instead,
  // where 'selector' is the specified jQuery string
  parent: 'div.wrapper'

  // use if targeting an adjacent element, uses .siblings( ) selector
  sibling: 'label'
});

##Methods Use the 'destroy' method when you need to remove focusify events and behaviors from your elements.

$('input.text').focusify('destroy');

##Additional Info See demo/index.html for implementation examples.

About

A jQuery plugin to visually enhance form elements.

Resources

License

Stars

Watchers

Forks

Packages

No packages published