edjs/index.html at master · ed3/edjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>EdJS</title>
<style>
body{text-align:center}
.row,.col{display:inline-block}
.col{background:#bee;margin:5px;padding:5px 50px}
</style>
<script src="edjs.js"></script>
<script>
$(function(){
$(document).on("keyup",function(e){
e=e||window.event;
var e=e.charCode||e.keyCode;
if(e==27)alert("Esc");
});
$.fn.extend({
equalheight:function(){
return this.each(function(){
	var tall=0;
	$(this).children().each(function(){
	tall=Math.max($(this).height(),tall);
	}).css({"height":tall+'px'});
});
},
checkBoxSelect:function(options){
var opts=Object.assign({placeholder:"Select options"},options);
return this.each(function() {
	if(this.nodeName !== "SELECT") return;
	var $select=$(this);
	$select.hide();
	var container=$.parseHTML(
	'<div class="edjs-multiselect" style="position:relative;display:inline-block;width:'+($select.width()||200)+'px;font-family:sans-serif; font-size:14px;">'+
	'<div class="edjs-select-trigger" style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #ccc; border-radius:4px;cursor:pointer;background:#fff;user-select:none;">'+
	'<span class="edjs-trigger-text" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px">'+opts.placeholder+ '</span><span class="edjs-trigger-arrow" style="font-size:10px;color:#555;flex-shrink:0;">▼</span></div>'+
	'<div class="edjs-select-dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc; border-top:none;border-radius:0 0 4px 4px;max-height:200px;overflow-y:auto;z-index:999;box-shadow:0 2px 5px rgba(0,0,0,0.1);"></div></div>');
	var liveContainer=container.cloneNode(true);
	if(this.parentNode)this.parentNode.insertBefore(liveContainer, this.nextSibling);
	var $triggerText=$(liveContainer.querySelector('.edjs-trigger-text'));
	var $trigger=$(liveContainer.querySelector('.edjs-select-trigger'));
	var $dropdown=$(liveContainer.querySelector('.edjs-select-dropdown'));
	var sEl=this;
	var updateTriggerText=function(){
		var selected=[];
		for(var i=0; i < sEl.options.length; i++){
			if (sEl.options[i].selected) selected.push(sEl.options[i].text);
		}
		$triggerText.text(selected.length > 0 ? selected.join(', ') : opts.placeholder);
	};
	for(var i=0;i < this.options.length;i++){
		var opt=this.options[i];
		var item=$.parseHTML(
		'<label style="display:flex;align-items:center;padding:8px 12px;cursor:pointer;margin:0;user-select:none">' +
		'<input type="checkbox" value="'+opt.value+'"'+(opt.selected ? ' checked':'')+
		' style="margin-right:8px;cursor:pointer">'+opt.text+'</label>');
		item.addEventListener('mouseover',function(){this.style.background='#f5f5f5';});
		item.addEventListener('mouseout',function(){this.style.background='transparent';});
		var checkbox=item.querySelector('input');
		checkbox.dataset.index=i;
		checkbox.addEventListener('change',function(){
			var index=parseInt(this.dataset.index,10), option=sEl.options[index];
			option.selected=this.checked;
			if(this.checked) option.setAttribute('selected','selected');
			else option.removeAttribute('selected');
			$select[0].dispatchEvent(new Event('change',{bubbles: true}));
			updateTriggerText();
		});
		$dropdown[0].appendChild(item);
	}
	updateTriggerText();
	$trigger.on('click',function(e){
		e.stopPropagation();
		$dropdown.slideToggle(10);
	});
	document.addEventListener('click',function(){
		if(getComputedStyle($dropdown[0]).display !== 'none') $dropdown.slideUp(100);
	});
	$dropdown.on('click',function(e){e.stopPropagation();});
});
}
});
$('.row').equalheight();
$('#mySelect').checkBoxSelect();
});
</script>
</head><body>
<div class="row">
<div class="col" style="height:50px">Div 1</div>
<div class="col">Div 2</div>
</div>
<br/>
<select id="mySelect" multiple>
<option value="1">Java</option>
<option value="2">Php</option>
<option value="3">Perl</option>
<option value="4">JavaScript</option>
</select>
</body></html>