jQuery FormStyler Modern ^2.x

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

• Demo
• Changelog
• Contributing
• Download

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 					}; 				} 			} 		} 	} } );