README

从 jQueryFormStyler 插件自行分支

• 演示
• 变更日志
• 贡献
• 下载

信息

JQuery HTML表单样式和现代化插件

• <input type="checkbox">
• <input type="radio">
• <input type="file">
• <input type="number">
• <input type="password"> (样式和显示/隐藏密码按钮)
• <select> (样式和通过AJAX请求在服务器上搜索的功能)
• <input type="range">、<textarea>、<button> 和其他 (仅使用CSS进行样式设计)

注意！

插件version 2.x 的设置 - 与 version 1.x 不同。

插件版本 2.x 的设置结构 - 与原始版本和此插件 1.x 的设置不同。

安装

Composer

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

NPM

$ npm i jquery.formstyler-modern

入门指南

主要插件文件 - jquery.formStylerModern.js。样式连接有两种方式

• jquery.formStylerModern.css (框架和默认样式)
• 框架文件 - /style/jquery.formStylerModern.frame.css 和样式文件 - /style/jquery.formStylerModern.(default|bootstrap|etc).css

功能

样式元素。

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

使用特定设置重新加载插件。

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

清除样式。

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

在“手动”更改后重绘。

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

从服务器搜索。

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