https://kirov-portal.ru/template/js/radioboxSelect/radioboxSelect.jquery.js

1/*
2 * radioboxSelect - jQuery Plugin
3 * Simple and fancy radiobox select
4 *
5 * Copyright (c) 2015 Aleksandr Povyshev
6 *
7 * Version: 1.0.0 (25/11/2015)
8 * Requires: jQuery v1.8.2+
9 *
10 * Dual licensed under the MIT and GPL licenses:
11 *   http://www.opensource.org/licenses/mit-license.php
12 *   http://www.gnu.org/licenses/gpl.html
13 *
14 * EXAMPLE (JSON):
15	HTML:
16	<input type='hidden' name='CATEGORY' value=''>
17
18	JS:
19	$('input[name=CATEGORY]').radioboxSelect({
20		items: [
21			{ id: 1, text: 'Level 1' },
22			{ id: 2, text: 'Level 2' },
23			{ id: 3, text: 'Level 3' },
24		],
25		onChange: function(elementNode, tVal) {
26			// alert(tVal);
27		}
28	});
29 *
30 *
31 *
32 */
33
34(function( $ ) {
35	$.fn.radioboxSelect = function(options) {
36		var options = $.extend({
37			elementNode: null,
38			onStart: null,
39			onChange: null,
40			items: null,
41			multiSelected: false,
42			accessEmptyValue: false,
43			typeStyle: 'default',
44		}, options);
45
46		if( $(this).length == 0 ) return;
47		if( options.items == null || options.items.length == 0 ) return;
48
49		var elementNode = $(this),
50			tParent = elementNode.parent(),
51			radioboxBlockNode = $("<div class='radioboxBlock "+options.typeStyle+"' style=''></div>"),
52			wScreenH = $(document).width();
53
54		elementNode.hide();
55		tParent.prepend(radioboxBlockNode);
56
57
58		var tVal = explode('|', elementNode.val() );
59		for( var i=0, tmp=''; i<options.items.length; i++ ) {
60			if( in_array(options.items[i].id,tVal) ) {
61				tmp += "<div class='radioboxItem SEL' name='"+options.items[i].id+"'>"+options.items[i].text+"</div>";
62			} else {
63				tmp += "<div class='radioboxItem' name='"+options.items[i].id+"'>"+options.items[i].text+"</div>";
64			}
65		}
66		radioboxBlockNode.html(tmp);
67
68		if( options.onStart != null ) {
69			options.onStart(elementNode, tVal);
70		}
71
72
73		if( wScreenH > 640 ) {
74			$(tParent).on('mouseenter', 'div.radioboxItem', function() {
75				$(this).addClass('H');
76			});
77			$(tParent).on('mouseleave', 'div.radioboxItem', function() {
78				$(this).removeClass('H');
79			});
80		}
81
82		$(tParent).on('click', 'div.radioboxItem', function() {
83			if( options.multiSelected == false ) {
84				if( $(this).hasClass('SEL') && options.accessEmptyValue == true ) {
85					$('div.radioboxItem', radioboxBlockNode).removeClass('SEL');
86				} else {
87					$('div.radioboxItem', radioboxBlockNode).removeClass('SEL');
88					$(this).addClass('SEL');
89				}
90			} else {
91				if( options.accessEmptyValue == true ) {
92					$(this).toggleClass('SEL');
93				} else {
94					$(this).toggleClass('SEL');
95					if( $(tParent).find('div.radioboxItem.SEL').length <= 0 ) $(this).addClass('SEL');
96				}
97			}
98
99			var tVal = [];
100			$(tParent).find('div.radioboxItem.SEL').each(function(e) {
101				tVal.push( $(this).attr('name') );
102			});
103
104			elementNode.val( implode('|', tVal) );
105
106			if( options.onChange != null ) {
107				options.onChange(elementNode, tVal);
108			}
109		});
110	}
111})(jQuery);