https://alphavit.ru/bitrix/templates/alphavit/js/jquery.forms.js

1jQuery.fn.styleForm = function(options) {
2	
3	var self = $(this), apis = [];
4	
5	function init() {
6		// Ïåðåáèðàåì âñå ýëåìåíòû ôîðì
7		self.each(function() {
8			var type = $(this).attr('type') || this.nodeName.toLowerCase();
9			self = $(this);
10			
11			switch (type)
12			{
13				case 'text':
14					styleText();
15					break;
16					
17				case 'password':
18					stylePassword();
19					break;
20					
21				case 'textarea':
22					styleTextarea();
23					break;
24					
25				case 'radio':
26					styleRadio();
27					break;
28					
29				case 'checkbox':
30					styleCheckbox();
31					break;
32					
33				case 'select':
34					styleSelect();
35					break;
36					
37				case 'select-one':
38					styleSelect();
39					break;
40			}
41		});
42	}
43	
44	
45	// Îôîðìëÿåì òåêñòîâûå ïîëÿ
46	function styleText() {
47		self.wrap('<div class="form_text"><div class="form_text_center"></div></div>');
48		self.parents('.form_text').prepend('<div class="form_text_left"></div><div class="form_text_right"></div>');
49		
50		self.bind('focus', focusText);
51		self.bind('blur', blurText);
52	}
53	
54	
55	// Îôîðìëÿåì ïîëÿ äëÿ ââîäà ïàðîëÿ
56	function stylePassword() {
57		self.wrap('<div class="form_text"><div class="form_text_center"></div></div>');
58		self.parents('.form_text').prepend('<div class="form_text_left"></div><div class="form_text_right"></div>');
59		
60		self.bind('focus', focusText);
61		self.bind('blur', blurText);
62	}
63	
64	
65	// Îôîðìëÿåì òåêñòàðåà
66	function styleTextarea() {
67		
68	}
69	
70	
71	// Îôîðìëÿåì ðàäèîáàòòîíû
72	function styleRadio() {
73		
74	}
75	
76	
77	// Îôîðìëÿåì ÷åêáîêñû
78	function styleCheckbox() {
79		self.wrap('<div class="form_checkbox"></div>');
80		self.parents('.form_checkbox').append('<div class="checkbox_button"></div>');
81		
82		// Óñòàíàâëèâàåì ñòàíäàðòíûå çíà÷åíèÿ
83		$('.form_checkbox input').each(function() {
84			if ($(this).attr('checked'))
85			{
86				$(this).parents('.form_checkbox').addClass('active');
87			}
88		});
89		
90		// Óñòàíàâëèâàåì ñîáûòèÿ íà êëèê è èçìåíåíèå ñîñòîÿíèÿ
91		self.parents('.form_checkbox').find('.checkbox_button').bind('click', clickCheckbox);
92		self.bind('change', changeCheckbox);
93	}
94	
95	
96	// Îôîðìëÿåì ñåëåêòû
97	function styleSelect() {
98		// Ïåðâîíà÷àëüíàÿ ñòðóêòóðà ñåëåêòà
99		self.wrap('<div class="form_select"><div class="form_select_title"><div class="form_select_title_center"></div></div></div>');
100		self.parents('.form_select_title').prepend('<div class="form_select_title_left"></div><div class="form_select_title_right"></div><div class="form_select_arrow"></div>');
101		
102		// Ïåðåáèðàåì ñåëåêò è îïðåäåëÿåì âûáðàííûé ïóíêò
103		var title, value, option = '';
104		self.find('option').each(function() {
105			if ($(this).attr('selected'))
106			{
107				title = $(this).html();
108				value = $(this).attr('value');
109			}
110			
111			option += '<li><a rel="' + $(this).attr('value') + '" href="#">' + $(this).html() + '</a></li>';
112		});
113		
114		
115		// Çàïèñûâàåì ïåðâûé ïóíêò ñåëåêòà è âûâîäèì ïðî÷óþ ñòðóêòóðó ñåëåêòà
116		self.parents('.form_select_title').before('<input type="hidden" name="' + self.attr('name') + '" value="' + value + '">');
117		self.parent().prepend(title);
118		self.parents('.form_select').append('<div class="form_select_open"><div class="form_select_open_block"><div class="select_margin"><menu>' + option + '</menu></div></div></div>');
119		
120		// Âåøàåì ñîáûòèå íà êëèê ïî íîâîìó ñåëåêòó
121		self.parents('.form_select_title').bind('click', openSelect);
122		self.parents('.form_select').find('.form_select_open menu li').bind('click', clickSelectList);
123		
124		// Óáèðàåì ñòàðûé ýëåìåíò ôîðìû
125		self.remove();
126	}
127	
128	
129	// Ôîêóñ ïî òåêñòîâûì ïîëÿì
130	focusText = function() {
131		$(this).parents('.form_text').addClass('focus');
132	}
133	
134	
135	// Áëþð ïî òåêñòîâûì ïîëÿì
136	blurText = function() {
137		$(this).parents('.form_text').removeClass('focus');
138	}
139	
140	
141	// Êëèê ïî ÷åêáîêñó
142	clickCheckbox = function() {
143		$(this).prev().trigger('click');
144	}
145	
146	
147	// Èçìåíåíèå ñîñòîÿíèÿ ÷åêáîêñà
148	changeCheckbox = function() {
149		if ($(this).attr('checked') == 'checked')
150		{
151			$(this).parent().addClass('active');
152		}
153		else
154		{
155			$(this).parent().removeClass('active');
156		}
157	}
158	
159	
160	// Îòêðûòü ñåëåêò 
161	openSelect = function() {
162		var thisElement = $(this);
163		
164		if (!$(this).parents('.form_select').hasClass('active'))
165		{
166			$(this).parents('.form_select').find('.form_select_title').bind('click', closeSelect);
167			
168			$('.form_select').removeClass('active');
169			$(this).parents('.form_select').addClass('active');
170			
171			$('.form_select .form_select_open').each(function() {
172				if (!$(this).parents('.form_select').hasClass('active'))
173				{
174					$(this).parents('.form_select').find('.form_select_title').unbind('click', closeSelect);
175					$(this).slideUp(240);
176				}
177			});
178			
179			$(this).parents('.form_select').find('.form_select_open').slideDown(240, function() {
180				if ($(this).parents('.form_select').find('menu').height() >= parseInt($(this).parents('.form_select').find('.select_margin').css('max-height')))
181				{
182					$(this).parents('.form_select').find('.select_margin').jScrollPane({showArrows: fal

182se});
183				}
184			});
185			
186			//$('body').bind('click', selectClickBody);
187		}
188		
189		return false;
190	}
191	
192	
193	// Çàêðûòü ñåëåêò
194	closeSelect = function() {
195		$(this).unbind('click', closeSelect);
196		$('.form_select').removeClass('active');
197		$(this).parents('.form_select').find('.form_select_open').slideUp(240);
198	}
199	
200	
201	// Âûáèðàåì ïóíêò â ñåëåêòå
202	clickSelectList = function() {
203		$(this).parents('.form_select').find('.form_select_title_center').html($(this).find('a').html());
204		$(this).parents('.form_select').find(':input').attr('value', $(this).find('a').attr('rel'));
205		$(this).parents('.form_select_open').slideUp(240);
206		$('.form_select').removeClass('active');
207		$(this).parents('.form_select').find('.form_select_title').unbind('click', closeSelect);
208		return false;
209	}
210	
211	
212	// Êëèê ïî body ïðè îòêðûòîì select
213	function selectClickBody()
214	{
215		$('.form_select').find('.form_select_title').unbind('click', closeSelect);
216		$('.form_select .form_select_open').slideUp(240);
217		$('.form_select').removeClass('active');
218		$('body').unbind('click');
219	}
220	
221	
222	// Èíèöèàëèçàöèÿ ñêðîëëèíãà
223	function initScrolling()
224	{
225		if (apis.length)
226		{
227			$.each(apis, function(i) {
228				this.destroy();
229			});
230			
231			apis = [];
232		}
233		
234		$(function()
235		{

236			$('.select_margin').jScrollPane({showArrows: false});
237		});
238	}
239	
240	init();
241}