Skip to content
release
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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