https://motorazborka.ru/scripts/cusel.js

1/* -------------------------------------
2
3	cusel version 2.4
4	last update: 20.07.11
5	смена обычного селект на стильный
6	autor: Evgen Ryzhkov
7	www.xiper.net
8----------------------------------------	
9*/
10function cuSel(params) {
11							
12	jQuery(params.changedEl).each(
13	function(num)
14	{
15	var chEl = jQuery(this),
16		chElWid = chEl.outerWidth(), // ширина селекта
17		chElClass = chEl.prop("class"), // класс селекта
18		chElId = chEl.prop("id"), // id
19		chElName = chEl.prop("name"), // имя
20		defaultVal = chEl.val(), // начальное значение
21		activeOpt = chEl.find("option[value='"+defaultVal+"']").eq(0),
22		defaultText = activeOpt.text(), // начальный текст
23		disabledSel = chEl.prop("disabled"), // заблокирован ли селект
24		scrollArrows = params.scrollArrows,
25		chElOnChange = chEl.prop("onchange"),
26		chElTab = chEl.prop("tabindex"),
27		chElMultiple = chEl.prop("multiple");
28		
29		if(!chElId || chElMultiple)	return false; // не стилизируем селект если не задан id
30		
31		if(!disabledSel)
32		{
33			classDisCuselText = "", // для отслеживания клика по задизайбленному селекту
34			classDisCusel=""; // для оформления задизейбленного селекта
35		}
36		else
37		{
38			classDisCuselText = "classDisCuselLabel";
39			classDisCusel="classDisCusel";
40		}
41		
42		if(scrollArrows)
43		{
44			classDisCusel+=" cuselScrollArrows";
45		}
46			
47		activeOpt.addClass("cuselActive");  // активному оптиону сразу добавляем класс для подсветки
48	
49	var optionStr = chEl.html(), // список оптионов
50
51		
52	/* 
53		делаем замену тегов option на span, полностью сохраняя начальную конструкцию
54	*/
55	
56	spanStr = optionStr.replace(/option/ig,"span").replace(/value=/ig,"val="); // value меняем на val, т.к. jquery отказывается воспринимать value у span
57	
58	/* 
59		для IE проставляем кавычки для значений, т.к. html() возращает код без кавычек
60		что произошла корректная обработка value должно быть последний атрибутом option,
61		например <option class="country" id="ukraine" value="/ukrane/">Украина</option>
62	*/
63	if($.browser.msie && parseInt($.browser.version) < 9)
64	{
65		var pattern = /(val=)(.*?)(>)/g;
66		spanStr = spanStr.replace(pattern, "$1'$2'$3");
67	}
68
69	
70	/* каркас стильного селекта	*/
71	var cuselFrame = '<div class="cusel '+chElClass+' '+classDisCusel+'"'+
72					' id=cuselFrame-'+chElId+
73					' style="width:'+chElWid+'px"'+
74					' tabindex="'+chElTab+'"'+
75					'>'+
76					'<div class="cuselFrameRight"></div>'+
77					'<div class="cuselText">'+defaultText+'</div>'+
78					'<div class="cusel-scroll-wrap"><div class="cusel-scroll-pane" id="cusel-scroll-'+chElId+'">'+
79					spanStr+
80					'</div></div>'+
81					'<input type="hidden" id="'+chElId+'" name="'+chElName+'" value="'+defaultVal+'" />'+
82					'</div>';
83					
84					
85	/* удаляем обычный селект, на его место вставляем стильный */
86	chEl.replaceWith(cuselFrame);
87	
88	/* если был поцеплен onchange - цепляем его полю */
89	if(chElOnChange) jQuery("#"+chElId).bind('change',chElOnChange);
90
91	
92	/*
93		устаналиваем высоту выпадающих списков основываясь на числе видимых позиций и высоты одной позиции
94		при чем только тем, у которых число оптионов больше числа заданного числа видимых
95	*/
96	var newSel = jQuery("#cuselFrame-"+chElId),
97		arrSpan = newSel.find("span"),
98		defaultHeight;
99		
100		if(!arrSpan.eq(0).text())
101		{
102			defaultHeight = arrSpan.eq(1).innerHeight();
103			arrSpan.eq(0).css("height", arrSpan.eq(1).height());
104		} 
105		else
106		{
107			defaultHeight = arrSpan.eq(0).innerHeight();
108		}
109		
110	
111	if(arrSpan.length>params.visRows)
112	{
113		newSel.find(".cusel-scroll-wrap").eq(0)
114			.css({height: defaultHeight*params.visRows+"px", display : "none", visibility: "visible" })
115			.children(".cusel-scroll-pane").css("height",defaultHeight*params.visRows+"px");
116	}
117	else
118	{
119		newSel.find(".cusel-scroll-wrap").eq(0)
120			.css({display : "none", visibility: "visible" });
121	}
122	
123	/* вставляем в оптионы дополнительные теги */
124	
125	var arrAddTags = jQuery("#cusel-scroll-"+chElId).find("span[addTags]"),
126		lenAddTags = arrAddTags.length;
127		
128		for(i=0;i<lenAddTags;i++) arrAddTags.eq(i)
129										.append(arrAddTags.eq(i).attr("addTags"))
130										.removeAttr("addTags");
131										
132	cuselEvents();
133	
134	});
135
136/* ---------------------------------------
137	привязка событий селектам
138------------------------------------------
139*/
140function cuselEvents() {
141jQuery("html").unbind("click");
142
143jQuery("html").click(
144	function(e)
145	{
146
147		var clicked = jQuery(e.target),
148			clickedId = clicked.attr("id"),
149			clickedClass = clicked.prop("class");
150			
151		/* если кликнули по самому селекту (текст) */
152		if((clickedClass.indexOf("cuselText")!=-1 || clickedClass.indexOf("cuselFrameRight")!=-1) && clicked.parent().prop("class").indexOf("classDisCusel")==-1)
153		{
154			var cuselWrap = clicked.parent().find(".cusel-scroll-wrap").eq(0);
155			
156			/* если выпадающее меню скрыто - показываем */
157			cuselShowList(cuselWrap);
158		}
159		/* если кликнули по самому селекту (контейнер) */
160		else if(clickedClass.indexOf("cusel")!=-1 && clickedClass.indexOf("classDisCusel")==-1 && clicked.is("div"))
161		{
162	
163			var cuselWrap = clicked.find(".cusel-scroll-wrap").eq(0);
164			
165			/* если выпадающее меню скрыто - показываем */
166			cuselShowList(cuselWrap);
167	
168		}
169		
170		/* если выбрали позицию в списке */
171		else if(clicked.is(".cusel-scroll-wrap span") && clickedClass.indexOf("cuselActive")==-1)
172		{
173			var clickedVal;
174			(clicked.attr("val") == undefined) ? clickedVal=clicked.text() : clickedVal=clicked.attr("val");
175			clicked
176				.parents(".cusel-scroll-wrap").find(".cuselActive").eq(0).removeClass("cuselActive")
177				.end().parents(".cusel-scroll-wrap")
178				.next().val(clickedVal)
179				.end().prev().text(clicked.text())
180				.end().css("display","none")
181				.parent(".cusel").removeClass("cuselOpen");
182			clicked.addClass("cuselActive");
183			clicked.parents(".cusel-scroll-wrap").find(".cuselOptHover").removeClass("cuselOptHover");
184			if(clickedClass.indexOf("cuselActive")==-1)	clicked.parents(".cusel").find(".cusel-scroll-wrap").eq(0).next("input").change(); // чтобы срабатывал onchange
185		}
186		
187		else if(clicked.parents(".cusel-scroll-wrap").is("div"))
188		{
189			return;
190		}
191		
192		/*
193			скрываем раскрытые списки, если кликнули вне списка
194		*/
195		else
196		{
197			jQuery(".cusel-scroll-wrap")
198				.css("display","none")
199				.parent(".cusel").removeClass("cuselOpen");
200		}
201		
202
203		
204	});
205

206jQuery(".cusel").unbind("keydown"); /* чтобы не было двлйного срабатывания события */
207
208jQuery(".cusel").keydown(
209function(event)
210{
211	
212	/*
213		если селект задизайблин, с не го работает только таб
214	*/
215	var key, keyChar;
216		
217	if(window.event) key=window.event.keyCode;
218	else if (event) key=event.which;
219	
220	if(key==null || key==0 || key==9) return true;
221	
222	if(jQuery(this).prop("class").indexOf("classDisCusel")!=-1) return false;
223		
224	/*
225		если нажали стрелку вниз
226	*/
227	if(key==40)
228	{
229		var cuselOptHover = jQuery(this).find(".cuselOptHover").eq(0);
230		if(!cuselOptHover.is("span")) var cuselActive = jQuery(this).find(".cuselActive").eq(0);
231		else var cuselActive = cuselOptHover;
232		var cuselActiveNext = cuselActive.next();
233			
234		if(cuselActiveNext.is("span"))
235		{
236			jQuery(this)
237				.find(".cuselText").eq(0).text(cuselActiveNext.text());
238			cuselActive.removeClass("cuselOptHover");
239			cuselActiveNext.addClass("cuselOptHover");
240			
241			$(this).find("input").eq(0).val(cuselActiveNext.attr("val"));
242					
243			/* прокручиваем к текущему оптиону */
244			cuselScrollToCurent($(this).find(".cusel-scroll-wrap").eq(0));
245			
246			return false;
247		}
248		else return false;
249	}
250	
251	/*
252		если нажали стрелку вверх
253	*/
254	if(key==38)
255	{
256		var cuselOptHover = $(this).find(".cuselOptHover").eq(0);
257		if(!cuselOptHover.is("span")) var cuselActive = $(this).find(".cuselActive").eq(0);
258		else var cuselActive = cuselOptHover;
259		cuselActivePrev = cuselActive.prev();
260			
261		if(cuselActivePrev.is("span"))
262		{
263			$(this)
264				.find(".cuselText").eq(0).text(cuselActivePrev.text());
265			cuselActive.removeClass("cuselOptHover");
266			cuselActivePrev.addClass("cuselOptHover");
267			
268			$(this).find("input").eq(0).val(cuselActivePrev.attr("val"));
269			
270			/* прокручиваем к текущему оптиону */
271			cuselScrollToCurent($(this).find(".cusel-scroll-wrap").eq(0));
272			
273			return false;
274		}
275		else return false;
276	}
277	
278	/*
279		если нажали esc
280	*/
281	if(key==27)
282	{
283		var cuselActiveText = $(this).find(".cuselActive").eq(0).text();
284		$(this)
285			.removeClass("cuselOpen")
286			.find(".cusel-scroll-wrap").eq(0).css("display","none")
287			.end().find(".cuselOptHover").eq(0).removeClass("cuselOptHover");
288		$(this).find(".cuselText").eq(0).text(cuselActiveText);
289
290	}
291	
292	/*
293		если нажали enter
294	*/
295	if(key==13)
296	{
297		
298		var cuselHover = $(this).find(".cuselOptHover").eq(0);
299		if(cuselHover.is("span"))
300		{
301			$(this).find(".cuselActive").removeClass("cuselActive");
302			cuselHover.addClass("cuselActive");
303		}
304		else var cuselHoverVal = $(this).find(".cuselActive").attr("val");
305		
306		$(this)
307			.removeClass("cuselOpen")
308			.find(".cusel-scroll-wrap").eq(0).css("display","none")
309			.end().find(".cuselOptHover").eq(0).removeClass("cuselOptHover");
310		$(this).find("input").eq(0).change();
311	}
312	
313	/*
314		если нажали пробел и это опера - раскрывем список
315	*/
316	if(key==32 && $.browser.opera)
317	{
318		var cuselWrap = $(this).find(".cusel-scroll-wrap").eq(0);
319		
320		/* ракрываем список */
321		cuselShowList(cuselWrap);
322	}
323		
324	if($.browser.opera) return false; /* специально для опера, чтоб при нажатиии на клавиши не прокручивалось окно браузера */
325
326});
327
328/*
329	функция отбора по нажатым символам (от Alexey Choporov)
330	отбор идет пока пауза между нажатиями сиволов не будет больше 0.5 сек
331	keypress нужен для отлова символа нажатой клавиш
332*/
333var arr = [];
334jQuery(".cusel").keypress(function(event)
335{
336	var key, keyChar;
337		
338	if(window.event) key=window.event.keyCode;
339	else if (event) key=event.which;
340	
341	if(key==null || key==0 || key==9) return true;
342	
343	if(jQuery(this).prop("class").indexOf("classDisCusel")!=-1) return false;
344	
345	var o = this;
346	arr.push(event);
347	clearTimeout(jQuery.data(this, 'timer'));
348	var wait = setTimeout(function() { handlingEvent() }, 500);
349	jQuery(this).data('timer', wait);
350	function handlingEvent()
351	{
352		var charKey = [];
353		for (var iK in arr)
354		{
355			if(window.event)charKey[iK]=arr[iK].keyCode;
356			else if(arr[iK])charKey[iK]=arr[iK].which;
357			charKey[iK]=String.fromCharCode(charKey[iK]).toUpperCase();
358		}
359		var arrOption=jQuery(o).find("span"),colArrOption=arrOption.length,i,letter;
360		for(i=0;i<colArrOption;i++)
361		{
362			var match = true;
363			for (var iter in arr)
364			{
365				letter=arrOption.eq(i).text().charAt(iter).toUpperCase();
366				if (letter!=charKey[iter])
367				{
368					match=false;
369				}
370			}
371			if(match)
372			{
373				jQuery(o).find(".cuselOptHover").removeClass("cuselOptHover").end().find("span").eq(i).addClass("cuselOptHover").end().end().find(".cuselText").eq(0).text(arrOption.eq(i).text());
374			
375			/* прокручиваем к текущему оптиону */
376			cuselScrollToCurent($(o).find(".cusel-scroll-wrap").eq(0));
377			arr = arr.splice;
378			arr = [];
379			break;
380			return true;
381			}
382		}
383		arr = arr.splice;
384		arr = [];
385	}
386	if(jQuery.browser.opera && window.event.keyCode!=9) return false;

387});
388								
389}
390	
391jQuery(".cusel").focus(
392function()
393{
394	jQuery(this).addClass("cuselFocus");
395	
396});
397
398jQuery(".cusel").blur(
399function()
400{
401	jQuery(this).removeClass("cuselFocus");
402});
403
404jQuery(".cusel").hover(
405function()
406{
407	jQuery(this).addClass("cuselFocus");
408},
409function()
410{
411	jQuery(this).removeClass("cuselFocus");
412});
413
414}
415
416function cuSelRefresh(params)
417{
418	/*
419		устаналиваем высоту выпадающих списков основываясь на числе видимых позиций и высоты одной позиции
420		при чем только тем, у которых число оптионов больше числа заданного числа видимых
421	*/
422
423	var arrRefreshEl = params.refreshEl.split(","),
424		lenArr = arrRefreshEl.length,
425		i;
426	
427	for(i=0;i<lenArr;i++)
428	{
429		var refreshScroll = jQuery(arrRefreshEl[i]).parents(".cusel").find(".cusel-scroll-wrap").eq(0);
430		refreshScroll.find(".cusel-scroll-pane").jScrollPaneRemoveCusel();
431		refreshScroll.css({visibility: "hidden", display : "block"});
432	
433		var	arrSpan = refreshScroll.find("span"),
434			defaultHeight = arrSpan.eq(0).outerHeight();
435		
436	
437		if(arrSpan.length>params.visRows)
438		{
439			refreshScroll
440				.css({height: defaultHeight*params.visRows+"px", display : "none", visibility: "visible" })
441				.children(".cusel-scroll-pane").css("height",defaultHeight*params.visRows+"px");
442		}
443		else
444		{
445			refreshScroll
446				.css({display : "none", visibility: "visible" });
447		}
448	}
449	
450}
451/*
452	фукция раскрытия/скрытия списка 
453*/
454function cuselShowList(cuselWrap)
455{
456	var cuselMain = cuselWrap.parent(".cusel");
457	
458	/* если выпадающее меню скрыто - показываем */
459	if(cuselWrap.css("display")=="none")
460	{
461		$(".cusel-scroll-wrap").css("display","none");
462		
463		cuselMain.addClass("cuselOpen");
464		cuselWrap.css("display","block");
465		var cuselArrows = false;
466		if(cuselMain.prop("class").indexOf("cuselScrollArrows")!=-1) cuselArrows=true;
467		if(!cuselWrap.find(".jScrollPaneContainer").eq(0).is("div"))
468		{
469			cuselWrap.find("div").eq(0).jScrollPaneCusel({showArrows:cuselArrows});
470		}
471				
472		/* прокручиваем к текущему оптиону */
473		cuselScrollToCurent(cuselWrap);
474		}
475		else
476		{
477			cuselWrap.css("display","none");
478			cuselMain.removeClass("cuselOpen");
479		}
480}
481
482
483/*
484	функция прокрутки к текущему элементу
485*/
486function cuselScrollToCurent(cuselWrap)
487{
488	var cuselScrollEl = null;
489	if(cuselWrap.find(".cuselOptHover").eq(0).is("span")) cuselScrollEl = cuselWrap.find(".cuselOptHover").eq(0);
490	else if(cuselWrap.find(".cuselActive").eq(0).is("span")) cuselScrollEl = cuselWrap.find(".cuselActive").eq(0);
491
492	if(cuselWrap.find(".jScrollPaneTrack").eq(0).is("div") && cuselScrollEl)
493	{
494		
495		var posCurrentOpt = cuselScrollEl.position(),
496			idScrollWrap = cuselWrap.find(".cusel-scroll-pane").eq(0).attr("id");
497
498		jQuery("#"+idScrollWrap)[0].scrollTo(posCurrentOpt.top);	
499	
500	}	
501}