ange007/jquery-formstyler-modern

2.1.2 2017-07-17 11:35 UTC

README

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"

Bower:

$ bower install --save-dev ange007/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

Сам плагин подключается посредством файла jquery.formStylerModern.js. Подключение стилей возможно в 2х вариантах:

  • Подключение jquery.formStylerModern.css - который в себе содержит каркас и тему по умолчанию (default)
  • Подключение файлов из директории /style/ - jquery.formStylerModern.frame.css (каркас) и одной из тем в той-же директории (например jquery.formStylerModern.bootstrap.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 / Поиск на сервере используя select

$( '#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
					};
				}
			}
		}
	}
} );