https://www.ihs.com.tr/edestek/scripts/js_ihs_sitemesh/jquery.styleSelect.js

1/*
2 * 	 styleSelect - apply style to a select box
3 *   (http://www.8stream.com)
4 *
5 * 	 Copyright (c) 2009 Siim Sindonen, 8STREAM <[email protected]>
6 *   Dual licensed under the MIT and GPL licenses:
7 *   http://www.opensource.org/licenses/mit-license.php
8 *   http://www.gnu.org/licenses/gpl.html
9 * 
10 *   Requires jQuery version: >= 1.3.2
11 * 	 $Version: 1.2.1 | 22.09.2009
12 */
13 
14(function($){
15
16	$.fn.styleSelect = function(options){
17		
18		var tabindex = 1;
19		
20		var opts = $.extend({}, $.fn.styleSelect.defaults , options);
21		
22		//set tabindex		
23		$('input,select,textarea,button').each(function() {
24			
25			var input = $(this);
26				
27			if (!input.attr('tabindex')){
28				
29				input.attr('tabindex', tabindex);
30				tabindex++;
31				
32			} 
33		});
34		
35		return this.each(function(){
36	
37			mainSelect = $(this);
38			var mainId = mainSelect.attr('name');
39			
40			var styledTabIndex = mainSelect.attr('tabindex');
41			
42			var date = new Date;
43			var selectId = 'selectbox_'+mainId+date.getTime();
44			
45			//Hidde select box
46			mainSelect.hide();
47	
48			//Main container 

49			var mainContainer = $('<div tabindex="'+styledTabIndex+'"></div>').css({position : 'relative'})
50					.addClass(opts.styleClass)
51					.attr('id', selectId)
52					.insertBefore(mainSelect);
53			
54			//Options container
55			var subContainer = $('<ul></ul>').css({'position' : 'absolute', 'z-index' : '100', 'top' : opts.optionsTop, 'left' : opts.optionsLeft})
56					.appendTo($(mainContainer))
57					.hide();
58				
59			//Generate options list
60			var optionsList = "";
61			
62			mainSelect.find('option').each(function(){
63			
64				optionsList += '<li id="'+$(this).val()+'"';
65				if($(this).attr('class')) optionsList += ' class="'+$(this).attr('class')+'" ';
66				optionsList += '>';
67				optionsList += '<span style="display: block;"';
68				if ($(this).attr('selected')) optionsList += ' class="selected" ';
69				optionsList += '>';
70				optionsList += $(this).text();
71				optionsList += '</span>';
72				optionsList += '</li>';
73				
74			});
75
76				subContainer.append(optionsList);
77				
78				checkSelected(opts.styleClass,opts.optionsWidth);
79				
80			//Show otions
81			$('#'+selectId).click(function(){
82				$(this).find('ul').slideToggle(opts.speed);
83			});
84			
85			//On click
86			$('#'+selectId+' li').click(function(){
87				
88				doSelection($(this));
89
90			});
91			
92			//Keyboard support
93			$('#'+selectId).keydown(function(event){
94				
95				var active = $(this).find('.selected').parent();
96				
97				if (event.keyCode == 40 || event.keyCode == 39 ){ doSelection(active.next()); }
98				if (event.keyCode == 37 || event.keyCode == 38 ){ doSelection(active.prev()); }
99				
100				if (event.keyCode == 13 || event.keyCode == 0){ $(this).find('ul').slideToggle(opts.speed); }
101				if (event.keyCode == 9){ $(this).find('ul').hide(opts.speed); }
102				
103			});
104			
105			//Do selection
106			var doSelection = function(item){
107				
108				item.siblings().find("span").removeClass('selected');
109				item.find("span").addClass('selected');
110		
111				var selectedItem = item.attr('id');
112
113				var realSelector = $('select[name="'+mainId+'"]');
114				realSelector.siblings().selected = false;
115				realSelector.find('option[value="'+selectedItem+'"]').attr('selected','selected');
116				realSelector.trigger(opts.selectTrigger);
117		
118				checkSelected(opts.styleClass,opts.optionsWidth);
119			
120			}
121			
122			$('#'+selectId).click(function(e) {
123				e.stopPropagation();
124			});
125			
126			$(document).click(function() {
127				$('#'+selectId+' ul').hide();
128			});
129			
130			});	
131		}
132		
133		//Selected items check
134		function checkSelected(mainClass,mainWidth){
135				
136				$('.'+mainClass).each(function(){
137				
138					var elementList = $(this).find('ul');
139					
140					$(this).find('span').each(function(){
141					
142						var spanClass = $(this).attr("class");
143						if (spanClass == "passiveSelect" || spanClass == "activeSelect") $(this).remove();
144					
145					});
146					
147					var selectedName = $(this).find('.selected');
148					
149					$('<span></span>').text(selectedName.text())
150							.attr('id', selectedName.parent().attr('id'))
151							.addClass('passiveSelect')
152							.appendTo($(this));
153					
154					if (mainWidth === 0){
155						$(this).css({'width' :  elementList.width()});
156					}
157					
158				});
159				
160				$('.'+mainClass+' span').each(function(){
161					if ($(this).attr('id')){
162						$(this).removeClass();
163						$(this).addClass('activeSelect');
164					}
165				});
166		}	
167	
168		$.fn.styleSelect.defaults = {
169		
170			optionsTop: '26px',
171			optionsLeft: '0px',
172			optionsWidth: 0,
173			styleClass: 'selectMenu',
174			speed: 0,
175			selectTrigger: 'change'
176			
177		};
178	
179})(jQuery);