🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

FormStyler Modern is a jQuery plugin to enhance and beautify the ugly form fields with custom styles and advanced features.

Select Checkbox input

Documentation

jQuery FormStyler Modern 2.x

Latest Stable Version Total Downloads License Build Status

Самостоятельное ответвление от плагина jQueryFormStyler

jQuery FormStyler Modern

Info

JQuery HTML form styling and modernization plugin:

  • <input type="checkbox">
  • <input type="radio">
  • <input type="file">
  • <input type="number">
  • <input type="password"> (styling and show/hide password button)
  • <select> (styling and function for search on server by AJAX requests)
  • <input type="range">, <textarea>, <button> and other (styling only with CSS)

Attention!

Settings from plugin vesion 2.x - differ from version 1.x.

Структура настроек плагина версии 2.x - отличаются от настроек оригинального и версии 1.x данного плагина.

Install

Composer:

$ php composer.phar require "ange007/jquery-formstyler-modern"

NPM:

$ npm i jquery.formstyler-modern

Getting Started

Main plugin file - jquery.formStylerModern.js. Connection of styles is possible in two ways:

  • jquery.formStylerModern.css (frame and default style)
  • Frame file - /style/jquery.formStylerModern.frame.css and style file - /style/jquery.formStylerModern.(default|bootstrap|etc).css

Works

Stylish elements.

$( 'input, select, button' ).styler(  { 	locale: 'ru', 	select: {  		search: { 			limit: 10 		} 	}, 	onFormStyled: function( )  	{  		... 	} } );

Reload plugin with certain settings.

$( '#checkbox-indeterminate-change' ).styler( 'reinitialize', { checkbox: { indeterminate: true } } );

Clean style.

$( 'input, select, button' ).styler( 'destroy' );

Repaint after "manual" change.

$( this ).prop( 'disabled', true ) 	.trigger( 'repaint' );

Search from server.

$( '#search' ).styler( 'reinitialize', { 	select: { 		search: { 			ajax: { 				delay: 250, 				cache: true,  				url: 'https://api.github.com/search/repositories', 				data: function( params ) { 					return { 					  q: params.term, 					  page: params.page 					}; 				},  				processResults: function( data, params ) 				{ 					var items = [ ];  					$( data.items ).each( function( index, value ) 					{ 						items.push( { 'value': value.html_url, 									'caption': value.owner.login + '/' + value.name } ); 					} );  					return { 						items: items 					}; 				} 			} 		} 	} } );

You May Also Like