Форум

2de · #1 (**permalink**) 26.10.2010, 13:21

Интересует следующее решение:

Есть страничка на ней расположены рисунки, необходимо организовать массовое выделение рисунков (как например файлы в винде), как это лучше сделать если возможно?

ksa · #2 (**permalink**) 26.10.2010, 13:28

Например сделать специальный класс в ЦСС и присвоить этот класс всем выделеным картинкам... Т.о. они будут визуально выглядеть отмечеными.

2de · #3 (**permalink**) 26.10.2010, 13:32

Это да, но перед этим же нужно выделить как то эти объекты дабы присвоить им этот класс.

ksa · #4 (**permalink**) 26.10.2010, 13:45

Про условия выборки ты не писал...

exec · #5 (**permalink**) 26.10.2010, 13:57

Разметка:

<div id='images'>
	<img src='…' />
	<img src='…' />
	<img src='…' />
</div>

javascript:

document.getElementById("images").onclick = function (event) {
	var target = (event = event || window.event);
	if (/\bselected\b/.test(target.className))
		target.className = target.className.replace(/\bselected\b/, "");
	else
		target.className += " selected";
};

Выделенное изображение будет иметь класс selected.

2de · #6 (**permalink**) 26.10.2010, 15:00

Может быть я не совсем точно изложил суть того чего я хочу.

Мне нужно выделить объекты скопом не кликая по каждому. Тоесть делаю так кликаю в верхнем левом углу и начинаю тянуть мышку в нижний правый угол. В итоге id всех объектов которые лежат в регионе который я очертил дожны будут заполнены в массив.

Кликать по каждому отдельно не хочется.

exec · #7 (**permalink**) 26.10.2010, 15:58

Есть кое-какие наработки:

<html>
<body>
<script type="text/javascript">

var T, L, A = [], C = false;

document.onmousedown = function (event) {
	T = event.pageY;
	L = event.pageX;
	document.onmousemove = function (evt) {
		var rect = document.createElement("DIV"),
		X = evt.pageX, Y = evt.pageY;
		A[A.length] = rect;
		rect.style.position = "absolute";
		rect.style.top = Y > T ? T : Y;
		rect.style.left = X > L ? L : X;
		if (C)
			rect.style.border = "1px solid #555555";
		else
			rect.style.backgroundColor = "#555555";
		rect.style.height = Math.abs(Y - T);
		rect.style.width = Math.abs(X - L);
		if (A[A.length - 2]) document.body.removeChild(A[A.length - 2]);
		document.body.appendChild(rect);
	};
	return false;
};
document.onmouseup = function () {
	A = [];
	document.onmousemove = new Function;
};

</script>
</body>
</html>

Дальше сами или за доплату.

2de · #8 (**permalink**) 26.10.2010, 16:09

У меня такая же идея была, по дауну узнавать сорс елемента на котором кликнули, а после апа сорс на котором закончили дальше найти найти координаты этих объектов и все остальные проверить на попадание в эту область. Вот только это мне показалось очень длинным решением. А за код спасибо пригодится.

Вот нашел реализацию на jquery http://jqueryui.com/demos/selectable/#display-grid только не хочется его использовать слишком громоздкий код получится.

exec · #9 (**permalink**) 26.10.2010, 18:50

<html>
<head>
<title>
Selectable
</title>
</head>
<style type='text/css'>
	#images img {
		margin: 10px;
	}
</style>
<body>
<div id='images'>
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
</div>

<script type="text/javascript">

var T, L, A = [], C = true, F = document.getElementById("images").getElementsByTagName("IMG");

function fix(event) {
	event = event || window.event;
	if ( !event.pageX || !event.pageY ) {
		var html = document.documentElement, body = document.body;
		event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
		event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
	}
	if ( !event.target ) event.target = event.srcElement;
	return event;
}

function opacity(object, value) {
	if (document.all && !window.opera)
		object.style.filter = "alpha(opacity=" + (value * 100) + ")";
	else
		object.style.opacity = value;
}

function getOffset(element) {
	var offsetLeft = 0, offsetTop = 0;
	do {
		offsetLeft += element.offsetLeft;
		offsetTop  += element.offsetTop;
	} while (element = element.offsetParent)
	return {
		top: offsetTop,
		left: offsetLeft
	}
}

function each(object, handler) {
	for (var i = 0; i < object.length; i++)
		handler.call(object[i]);
}

each(F, function () {
	var offset = getOffset(this);
	this.top = offset.top, this.left = offset.left;
});

document.onmousedown = function (event) {
	event = fix(event);
	if (event.target.parentNode.id != "images")
		each(F, function () {
			opacity(this, 1);
		});
	else
		each(F, function () {
			opacity(this, 1);
		}),
		opacity(event.target, 0.5);
	A = [];
	T = event.pageY;
	L = event.pageX;
	document.onmousemove = function (evt) {
		evt = fix(evt);
		var rect = document.createElement("DIV"),
		X = evt.pageX, Y = evt.pageY;
		A[A.length] = rect;
		rect.style.position = "absolute";
		rect.style.top = Y > T ? T : Y;
		rect.style.left = X > L ? L : X;
		if (C)
			rect.style.border = "1px solid #555555";
		else
			rect.style.backgroundColor = "#555555";
		rect.style.height = Math.abs(Y - T);
		rect.style.width = Math.abs(X - L);
		rect.className = "rect";

		var images = document.getElementById("images").getElementsByTagName("IMG");
		for (var i = 0; i < images.length; i++) {
			if ( X > L && Y > T )
				var condition = images[i].top > T && images[i].top < Y && images[i].left > L && images[i].left < X;
			if ( X < L && Y < T )
				var condition = images[i].top < T && images[i].top > Y && images[i].left < L && images[i].left > X;
			if ( X < L && Y > T )
				var condition = images[i].top > T && images[i].top < Y && images[i].left < L && images[i].left > X;
			if ( X > L && Y < T )
				var condition = images[i].top < T && images[i].top > Y && images[i].left > L && images[i].left < X;
			if ( condition )
				opacity(images[i], 0.5);
			else
				opacity(images[i], 1);
		}

		if (A[A.length - 2]) document.body.removeChild(A[A.length - 2]);
		document.body.appendChild(rect);
		return false;
	};
	return false;
};
document.onmouseup = document.onclick = function () {
	each(document.getElementsByTagName("DIV"), function () {
		if (this.className == "rect")
			document.body.removeChild(this);
	});
	document.onmousemove = new Function;

};

</script>
</body>
</html>

А так?

2de · #10 (**permalink**) 26.10.2010, 18:55

Нажал запустить появилось окошко но в нем не выделяются ниодин из рисунков в 2х правых столбцах, а на самом деле то что нужно, спасибо.

Форум

Справочник

Discord чат

Курсы javascript