[Resolvido] Listar e identificar DIVs

PauloRJ · Julho 20, 2012

Amigos, tenho o seguinte problema:

tenho 2 DIV com class de nome igual

quero alterar a propriedade de uma delas via jquery isso sei fazer.

O problema que preciso criar uma lista na qual pelo index pude-se identificar qual é a primeira e a segunda e efetuar as alterações na div que eu quero, atribuindo um ID nesta exata div do loop.

sugestões??

Progjunior Daniel · Julho 20, 2012

Voce pode colocar id diferentes. E chamar no jquery via ID depois de uma condição dizendo qual delas irá ser configurada.

PauloRJ · Julho 20, 2012

Sim sim, porem elas sao geradas pelo jquerycrop. E nao estou conseguindo no codigo identificar para atribuir um ID e diferenciar, entende.

Progjunior Daniel · Julho 20, 2012

sim. Deixa eu entender realmente, as divs são criadas automaticamente pelo jquerycrop, ok e voce não consegue ver esse código? porque ae voce poderia colocar uma variavel js para identificar. Se o problema for identificar mesmo colocando uma variavel. Só vendo o código para tentar ver uma solução e te ajudar. Se puder colocar esse código do jquerycrop criando a div seria bom.

PauloRJ · Julho 20, 2012

segue:


/**
* jquery.Jcrop.js v0.9.8
* jQuery Image Cropping Plugin
* @author Kelly Hallman <khallman@gmail.com>
* Copyright (c) 2008-2009 Kelly Hallman - released under MIT License {{{
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:

* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.

* }}}
*/

(function($) {

$.Jcrop = function(obj,opt)
{
// Initialization {{{

// Sanitize some options {{{
var obj = obj, opt = opt;

if (typeof(obj) !== 'object') obj = $(obj)[0];
if (typeof(opt) !== 'object') opt = { };

// Some on-the-fly fixes for MSIE...sigh
if (!('trackDocument' in opt))
{
	opt.trackDocument = $.browser.msie ? false : true;
	if ($.browser.msie && $.browser.version.split('.')[0] == '8')
		opt.trackDocument = true;
}

if (!('keySupport' in opt))
		opt.keySupport = $.browser.msie ? false : true;

// }}}
// Extend the default options {{{
var defaults = {

	// Basic Settings
	trackDocument:		true,
	baseClass:			'jcrop',
	addClass:			null,

	// Styling Options
	bgColor:			'black',
	bgOpacity:			.6,
	borderOpacity:		.4,
	handleOpacity:		.5,

	handlePad:			5,
	handleSize:			9,
	handleOffset:		5,
	edgeMargin:			14,

	aspectRatio:		0,
	keySupport:			true,
	cornerHandles:		true,
	sideHandles:		true,
	drawBorders:		true,
	dragEdges:			true,

	boxWidth:			0,
	boxHeight:			0,

	boundary:			8,
	animationDelay:		20,
	swingSpeed:			3,

	allowSelect:		true,
	allowMove:			true,
	allowResize:		true,

	minSelect:			[ 0, 0 ],
	maxSize:			[ 0, 0 ],
	minSize:			[ 0, 0 ],

	// Callbacks / Event Handlers
	onChange: function() { },
	onSelect: function() { }

};
var options = defaults;
setOptions(opt);

// }}}
// Initialize some jQuery objects {{{

var $origimg = $(obj);
var $img = $origimg.clone().removeAttr('id').css({ position: 'absolute' });

$img.width($origimg.width());
$img.height($origimg.height());
$origimg.after($img).hide();

presize($img,options.boxWidth,options.boxHeight);

var boundx = $img.width(),
	boundy = $img.height(),

	$div = $('<div />')
		.width(boundx).height(boundy)
		.addClass(cssClass('holder'))
		.css({
			position: 'relative',
			backgroundColor: options.bgColor
		}).insertAfter($origimg).append($img);
;

if (options.addClass) $div.addClass(options.addClass);
//$img.wrap($div);

var $img2 = $('<img />')/*{{{*/
		.attr('src',$img.attr('src'))
		.css('position','absolute')
		.width(boundx).height(boundy)
;/*}}}*/
var $img_holder = $('<div />')/*{{{*/
	.width(pct(100)).height(pct(100))
	.css({
		zIndex: 310,
		position: 'absolute',
		overflow: 'hidden'
	})
	.append($img2)
;/*}}}*/
var $hdl_holder = $('<div />')/*{{{*/
	.width(pct(100)).height(pct(100))
	.css('zIndex',320);
/*}}}*/
var $sel = $('<div />')/*{{{*/
	.css({
		position: 'absolute',
		zIndex: 300
	})
	.insertBefore($img)
	.append($img_holder,$hdl_holder)
;/*}}}*/

var bound = options.boundary;
var $trk = newTracker().width(boundx+(bound*2)).height(boundy+(bound*2))
	.css({ position: 'absolute', top: px(-bound), left: px(-bound), zIndex: 290 })
	.mousedown(newSelection);	

/* }}} */
// Set more variables {{{

var xlimit, ylimit, xmin, ymin;
var xscale, yscale, enabled = true;
var docOffset = getPos($img),
	// Internal states
	btndown, lastcurs, dimmed, animating,
	shift_down;

// }}}


	// }}}
// Internal Modules {{{

var Coords = function()/*{{{*/
{
	var x1 = 0, y1 = 0, x2 = 0, y2 = 0, ox, oy;

	function setPressed(pos)/*{{{*/
	{
		var pos = rebound(pos);
		x2 = x1 = pos[0];
		y2 = y1 = pos[1];
	};
	/*}}}*/
	function setCurrent(pos)/*{{{*/
	{
		var pos = rebound(pos);
		ox = pos[0] - x2;
		oy = pos[1] - y2;
		x2 = pos[0];
		y2 = pos[1];
	};
	/*}}}*/
	function getOffset()/*{{{*/
	{
		return [ ox, oy ];
	};
	/*}}}*/
	function moveOffset(offset)/*{{{*/
	{
		var ox = offset[0], oy = offset[1];

		if (0 > x1 + ox) ox -= ox + x1;
		if (0 > y1 + oy) oy -= oy + y1;

		if (boundy < y2 + oy) oy += boundy - (y2 + oy);
		if (boundx < x2 + ox) ox += boundx - (x2 + ox);

		x1 += ox;
		x2 += ox;
		y1 += oy;
		y2 += oy;
	};
	/*}}}*/
	function getCorner(ord)/*{{{*/
	{
		var c = getFixed();
		switch(ord)
		{
			case 'ne': return [ c.x2, c.y ];
			case 'nw': return [ c.x, c.y ];
			case 'se': return [ c.x2, c.y2 ];
			case 'sw': return [ c.x, c.y2 ];
		}
	};
	/*}}}*/
	function getFixed()/*{{{*/
	{
		if (!options.aspectRatio) return getRect();
		// This function could use some optimization I think...
		var aspect = options.aspectRatio,
			min_x = options.minSize[0]/xscale, 
			min_y = options.minSize[1]/yscale,
			max_x = options.maxSize[0]/xscale, 
			max_y = options.maxSize[1]/yscale,
			rw = x2 - x1,
			rh = y2 - y1,
			rwa = Math.abs(rw),
			rha = Math.abs(rh),
			real_ratio = rwa / rha,
			xx, yy
		;
		if (max_x == 0) { max_x = boundx * 10 }
		if (max_y == 0) { max_y = boundy * 10 }
		if (real_ratio < aspect)
		{
			yy = y2;
			w = rha * aspect;
			xx = rw < 0 ? x1 - w : w + x1;

			if (xx < 0)
			{
				xx = 0;
				h = Math.abs((xx - x1) / aspect);
				yy = rh < 0 ? y1 - h: h + y1;
			}
			else if (xx > boundx)
			{
				xx = boundx;
				h = Math.abs((xx - x1) / aspect);
				yy = rh < 0 ? y1 - h : h + y1;
			}
		}
		else
		{
			xx = x2;
			h = rwa / aspect;
			yy = rh < 0 ? y1 - h : y1 + h;
			if (yy < 0)
			{
				yy = 0;
				w = Math.abs((yy - y1) * aspect);
				xx = rw < 0 ? x1 - w : w + x1;
			}
			else if (yy > boundy)
			{
				yy = boundy;
				w = Math.abs(yy - y1) * aspect;
				xx = rw < 0 ? x1 - w : w + x1;
			}
		}

		// Magic %-)
		if(xx > x1) { // right side
		  if(xx - x1 < min_x) {
			xx = x1 + min_x;
		  } else if (xx - x1 > max_x) {
			xx = x1 + max_x;
		  }
		  if(yy > y1) {
			yy = y1 + (xx - x1)/aspect;
		  } else {
			yy = y1 - (xx - x1)/aspect;
		  }
		} else if (xx < x1) { // left side
		  if(x1 - xx < min_x) {
			xx = x1 - min_x
		  } else if (x1 - xx > max_x) {
			xx = x1 - max_x;
		  }
		  if(yy > y1) {
			yy = y1 + (x1 - xx)/aspect;
		  } else {
			yy = y1 - (x1 - xx)/aspect;
		  }
		}

		if(xx < 0) {
			x1 -= xx;
			xx = 0;
		} else  if (xx > boundx) {
			x1 -= xx - boundx;
			xx = boundx;
		}

		if(yy < 0) {
			y1 -= yy;
			yy = 0;
		} else  if (yy > boundy) {
			y1 -= yy - boundy;
			yy = boundy;
		}

		return last = makeObj(flipCoords(x1,y1,xx,yy));
	};
	/*}}}*/
	function rebound(p)/*{{{*/
	{
		if (p[0] < 0) p[0] = 0;
		if (p[1] < 0) p[1] = 0;

		if (p[0] > boundx) p[0] = boundx;
		if (p[1] > boundy) p[1] = boundy;

		return [ p[0], p[1] ];
	};
	/*}}}*/
	function flipCoords(x1,y1,x2,y2)/*{{{*/
	{
		var xa = x1, xb = x2, ya = y1, yb = y2;
		if (x2 < x1)
		{
			xa = x2;
			xb = x1;
		}
		if (y2 < y1)
		{
			ya = y2;
			yb = y1;
		}
		return [ Math.round(xa), Math.round(ya), Math.round(xb), Math.round(yb) ];
	};
	/*}}}*/
	function getRect()/*{{{*/
	{
		var xsize = x2 - x1;
		var ysize = y2 - y1;

		if (xlimit && (Math.abs(xsize) > xlimit))
			x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit);
		if (ylimit && (Math.abs(ysize) > ylimit))
			y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit);

		if (ymin && (Math.abs(ysize) < ymin))
			y2 = (ysize > 0) ? (y1 + ymin) : (y1 - ymin);
		if (xmin && (Math.abs(xsize) < xmin))
			x2 = (xsize > 0) ? (x1 + xmin) : (x1 - xmin);

		if (x1 < 0) { x2 -= x1; x1 -= x1; }
		if (y1 < 0) { y2 -= y1; y1 -= y1; }
		if (x2 < 0) { x1 -= x2; x2 -= x2; }
		if (y2 < 0) { y1 -= y2; y2 -= y2; }
		if (x2 > boundx) { var delta = x2 - boundx; x1 -= delta; x2 -= delta; }
		if (y2 > boundy) { var delta = y2 - boundy; y1 -= delta; y2 -= delta; }
		if (x1 > boundx) { var delta = x1 - boundy; y2 -= delta; y1 -= delta; }
		if (y1 > boundy) { var delta = y1 - boundy; y2 -= delta; y1 -= delta; }

		return makeObj(flipCoords(x1,y1,x2,y2));
	};
	/*}}}*/
	function makeObj(a)/*{{{*/
	{
		return { x: a[0], y: a[1], x2: a[2], y2: a[3],
			w: a[2] - a[0], h: a[3] - a[1] };
	};
	/*}}}*/

	return {
		flipCoords: flipCoords,
		setPressed: setPressed,
		setCurrent: setCurrent,
		getOffset: getOffset,
		moveOffset: moveOffset,
		getCorner: getCorner,
		getFixed: getFixed
	};
}();

/*}}}*/
var Selection = function()/*{{{*/
{
	var start, end, dragmode, awake, hdep = 370;
	var borders = { };
	var handle = { };
	var seehandles = false;
	var hhs = options.handleOffset;

	/* Insert draggable elements {{{*/

	// Insert border divs for outline
	if (options.drawBorders) {
		borders = {
				top: insertBorder('hline')
					.css('top',$.browser.msie?px(-1):px(0)),
				bottom: insertBorder('hline'),
				left: insertBorder('vline'),
				right: insertBorder('vline')
		};
	}

	// Insert handles on edges
	if (options.dragEdges) {
		handle.t = insertDragbar('n');
		handle.b = insertDragbar('s');
		handle.r = insertDragbar('e');
		handle.l = insertDragbar('w');
	}

	// Insert side handles
	options.sideHandles &&
		createHandles(['n','s','e','w']);

	// Insert corner handles
	options.cornerHandles &&
		createHandles(['sw','nw','ne','se']);

	/*}}}*/
	// Private Methods
	function insertBorder(type)/*{{{*/
	{
		var jq = $('<div />')
			.css({position: 'absolute', opacity: options.borderOpacity })
			.addClass(cssClass(type));
		$img_holder.append(jq);
		return jq;
	};
	/*}}}*/
	function dragDiv(ord,zi)/*{{{*/
	{
		var jq = $('<div />')
			.mousedown(createDragger(ord))
			.css({
				cursor: ord+'-resize',
				position: 'absolute',
				zIndex: zi 
			})
		;
		$hdl_holder.append(jq);
		return jq;
	};
	/*}}}*/
	function insertHandle(ord)/*{{{*/
	{
		return dragDiv(ord,hdep++)
			.css({ top: px(-hhs+1), left: px(-hhs+1), opacity: options.handleOpacity })
			.addClass(cssClass('handle'));
	};
	/*}}}*/
	function insertDragbar(ord)/*{{{*/
	{
		var s = options.handleSize,
			o = hhs,
			h = s, w = s,
			t = o, l = o;

		switch(ord)
		{
			case 'n': case 's': w = pct(100); break;
			case 'e': case 'w': h = pct(100); break;
		}

		return dragDiv(ord,hdep++).width(w).height(h)
			.css({ top: px(-t+1), left: px(-l+1)});
	};
	/*}}}*/
	function createHandles(li)/*{{{*/
	{
		for(i in li) handle[li[i]] = insertHandle(li[i]);
	};
	/*}}}*/
	function moveHandles(c)/*{{{*/
	{
		var midvert  = Math.round((c.h / 2) - hhs),
			midhoriz = Math.round((c.w / 2) - hhs),
			north = west = -hhs+1,
			east = c.w - hhs,
			south = c.h - hhs,
			x, y;

		'e' in handle &&
			handle.e.css({ top: px(midvert), left: px(east) }) &&
			handle.w.css({ top: px(midvert) }) &&
			handle.s.css({ top: px(south), left: px(midhoriz) }) &&
			handle.n.css({ left: px(midhoriz) });

		'ne' in handle &&
			handle.ne.css({ left: px(east) }) &&
			handle.se.css({ top: px(south), left: px(east) }) &&
			handle.sw.css({ top: px(south) });

		'b' in handle &&
			handle.b.css({ top: px(south) }) &&
			handle.r.css({ left: px(east) });
	};
	/*}}}*/
	function moveto(x,y)/*{{{*/
	{
		$img2.css({ top: px(-y), left: px(-x) });
		$sel.css({ top: px(y), left: px(x) });
	};
	/*}}}*/
	function resize(w,h)/*{{{*/
	{
		$sel.width(w).height(h);
	};
	/*}}}*/
	function refresh()/*{{{*/
	{
		var c = Coords.getFixed();

		Coords.setPressed([c.x,c.y]);
		Coords.setCurrent([c.x2,c.y2]);

		updateVisible();
	};
	/*}}}*/

	// Internal Methods
	function updateVisible()/*{{{*/
		{ if (awake) return update(); };
	/*}}}*/
	function update()/*{{{*/
	{
		var c = Coords.getFixed();

		resize(c.w,c.h);
		moveto(c.x,c.y);

		options.drawBorders &&
			borders['right'].css({ left: px(c.w-1) }) &&
				borders['bottom'].css({ top: px(c.h-1) });

		seehandles && moveHandles(c);
		awake || show();

		options.onChange(unscale(c));
	};
	/*}}}*/
	function show()/*{{{*/
	{
		$sel.show();
		$img.css('opacity',options.bgOpacity);
		awake = true;
	};
	/*}}}*/
	function release()/*{{{*/
	{
		disableHandles();
		$sel.hide();
		$img.css('opacity',1);
		awake = false;
	};
	/*}}}*/
	function showHandles()//{{{
	{
		if (seehandles)
		{
			moveHandles(Coords.getFixed());
			$hdl_holder.show();
		}
	};
	//}}}
	function enableHandles()/*{{{*/
	{ 
		seehandles = true;
		if (options.allowResize)
		{
			moveHandles(Coords.getFixed());
			$hdl_holder.show();
			return true;
		}
	};
	/*}}}*/
	function disableHandles()/*{{{*/
	{
		seehandles = false;
		$hdl_holder.hide();
	};
	/*}}}*/
	function animMode(v)/*{{{*/
	{
		(animating = v) ? disableHandles(): enableHandles();
	};
	/*}}}*/
	function done()/*{{{*/
	{
		animMode(false);
		refresh();
	};
	/*}}}*/

	var $track = newTracker().mousedown(createDragger('move'))
			.css({ cursor: 'move', position: 'absolute', zIndex: 360 })


	$img_holder.append($track);
	disableHandles();

	return {
		updateVisible: updateVisible,
		update: update,
		release: release,
		refresh: refresh,
		setCursor: function (cursor) { $track.css('cursor',cursor); },
		enableHandles: enableHandles,
		enableOnly: function() { seehandles = true; },
		showHandles: showHandles,
		disableHandles: disableHandles,
		animMode: animMode,
		done: done
	};
}();
/*}}}*/
var Tracker = function()/*{{{*/
{
	var onMove		= function() { },
		onDone		= function() { },
		trackDoc	= options.trackDocument;

	if (!trackDoc)
	{
		$trk
			.mousemove(trackMove)
			.mouseup(trackUp)
			.mouseout(trackUp)
		;
	}

	function toFront()/*{{{*/
	{
		$trk.css({zIndex:450});
		if (trackDoc)
		{
			$(document)
				.mousemove(trackMove)
				.mouseup(trackUp)
			;
		}
	}
	/*}}}*/
	function toBack()/*{{{*/
	{
		$trk.css({zIndex:290});
		if (trackDoc)
		{
			$(document)
				.unbind('mousemove',trackMove)
				.unbind('mouseup',trackUp)
			;
		}
	}
	/*}}}*/
	function trackMove(e)/*{{{*/
	{
		onMove(mouseAbs(e));
	};
	/*}}}*/
	function trackUp(e)/*{{{*/
	{
		e.preventDefault();
		e.stopPropagation();

		if (btndown)
		{
			btndown = false;

			onDone(mouseAbs(e));
			options.onSelect(unscale(Coords.getFixed()));
			toBack();
			onMove = function() { };
			onDone = function() { };
		}

		return false;
	};
	/*}}}*/

	function activateHandlers(move,done)/* {{{ */
	{
		btndown = true;
		onMove = move;
		onDone = done;
		toFront();
		return false;
	};
	/* }}} */

	function setCursor(t) { $trk.css('cursor',t); };

	$img.before($trk);
	return {
		activateHandlers: activateHandlers,
		setCursor: setCursor
	};
}();
/*}}}*/
var KeyManager = function()/*{{{*/
{
	var $keymgr = $('<input type="radio" />')
			.css({ position: 'absolute', left: '-30px' })
			.keypress(parseKey)
			.blur(onBlur),

		$keywrap = $('<div />')
			.css({
				position: 'absolute',
				overflow: 'hidden'
			})
			.append($keymgr)
	;

	function watchKeys()/*{{{*/
	{
		if (options.keySupport)
		{
			$keymgr.show();
			$keymgr.focus();
		}
	};
	/*}}}*/
	function onBlur(e)/*{{{*/
	{
		$keymgr.hide();
	};
	/*}}}*/
	function doNudge(e,x,y)/*{{{*/
	{
		if (options.allowMove) {
			Coords.moveOffset([x,y]);
			Selection.updateVisible();
		};
		e.preventDefault();
		e.stopPropagation();
	};
	/*}}}*/
	function parseKey(e)/*{{{*/
	{
		if (e.ctrlKey) return true;
		shift_down = e.shiftKey ? true : false;
		var nudge = shift_down ? 10 : 1;
		switch(e.keyCode)
		{
			case 37: doNudge(e,-nudge,0); break;
			case 39: doNudge(e,nudge,0); break;
			case 38: doNudge(e,0,-nudge); break;
			case 40: doNudge(e,0,nudge); break;

			case 27: Selection.release(); break;

			case 9: return true;
		}

		return nothing(e);
	};
	/*}}}*/

	if (options.keySupport) $keywrap.insertBefore($img);
	return {
		watchKeys: watchKeys
	};
}();
/*}}}*/

// }}}
// Internal Methods {{{

function px(n) { return '' + parseInt(n) + 'px'; };
function pct(n) { return '' + parseInt(n) + '%'; };
function cssClass(cl) { return options.baseClass + '-' + cl; };
function getPos(obj)/*{{{*/
{
	// Updated in v0.9.4 to use built-in dimensions plugin
	var pos = $(obj).offset();
	return [ pos.left, pos.top ];
};
/*}}}*/
function mouseAbs(e)/*{{{*/
{
	return [ (e.pageX - docOffset[0]), (e.pageY - docOffset[1]) ];
};
/*}}}*/
function myCursor(type)/*{{{*/
{
	if (type != lastcurs)
	{
		Tracker.setCursor(type);
		//Handles.xsetCursor(type);
		lastcurs = type;
	}
};
/*}}}*/
function startDragMode(mode,pos)/*{{{*/
{
	docOffset = getPos($img);
	Tracker.setCursor(mode=='move'?mode:mode+'-resize');

	if (mode == 'move')
		return Tracker.activateHandlers(createMover(pos), doneSelect);

	var fc = Coords.getFixed();
	var opp = oppLockCorner(mode);
	var opc = Coords.getCorner(oppLockCorner(opp));

	Coords.setPressed(Coords.getCorner(opp));
	Coords.setCurrent(opc);

	Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect);
};
/*}}}*/
function dragmodeHandler(mode,f)/*{{{*/
{
	return function(pos) {
		if (!options.aspectRatio) switch(mode)
		{
			case 'e': pos[1] = f.y2; break;
			case 'w': pos[1] = f.y2; break;
			case 'n': pos[0] = f.x2; break;
			case 's': pos[0] = f.x2; break;
		}
		else switch(mode)
		{
			case 'e': pos[1] = f.y+1; break;
			case 'w': pos[1] = f.y+1; break;
			case 'n': pos[0] = f.x+1; break;
			case 's': pos[0] = f.x+1; break;
		}
		Coords.setCurrent(pos);
		Selection.update();
	};
};
/*}}}*/
function createMover(pos)/*{{{*/
{
	var lloc = pos;
	KeyManager.watchKeys();

	return function(pos)
	{
		Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]);
		lloc = pos;

		Selection.update();
	};
};
/*}}}*/
function oppLockCorner(ord)/*{{{*/
{
	switch(ord)
	{
		case 'n': return 'sw';
		case 's': return 'nw';
		case 'e': return 'nw';
		case 'w': return 'ne';
		case 'ne': return 'sw';
		case 'nw': return 'se';
		case 'se': return 'nw';
		case 'sw': return 'ne';
	};
};
/*}}}*/
function createDragger(ord)/*{{{*/
{
	return function(e) {
		if (options.disabled) return false;
		if ((ord == 'move') && !options.allowMove) return false;
		btndown = true;
		startDragMode(ord,mouseAbs(e));
		e.stopPropagation();
		e.preventDefault();
		return false;
	};
};
/*}}}*/
function presize($obj,w,h)/*{{{*/
{
	var nw = $obj.width(), nh = $obj.height();
	if ((nw > w) && w > 0)
	{
		nw = w;
		nh = (w/$obj.width()) * $obj.height();
	}
	if ((nh > h) && h > 0)
	{
		nh = h;
		nw = (h/$obj.height()) * $obj.width();
	}
	xscale = $obj.width() / nw;
	yscale = $obj.height() / nh;
	$obj.width(nw).height(nh);
};
/*}}}*/
function unscale(c)/*{{{*/
{
	return {
		x: parseInt(c.x * xscale), y: parseInt(c.y * yscale), 
		x2: parseInt(c.x2 * xscale), y2: parseInt(c.y2 * yscale), 
		w: parseInt(c.w * xscale), h: parseInt(c.h * yscale)
	};
};
/*}}}*/
function doneSelect(pos)/*{{{*/
{
	var c = Coords.getFixed();
	if (c.w > options.minSelect[0] && c.h > options.minSelect[1])
	{
		Selection.enableHandles();
		Selection.done();
	}
	else
	{
		Selection.release();
	}
	Tracker.setCursor( options.allowSelect?'crosshair':'default' );
};
/*}}}*/
function newSelection(e)/*{{{*/
{
	if (options.disabled) return false;
	if (!options.allowSelect) return false;
	btndown = true;
	docOffset = getPos($img);
	Selection.disableHandles();
	myCursor('crosshair');
	var pos = mouseAbs(e);
	Coords.setPressed(pos);
	Tracker.activateHandlers(selectDrag,doneSelect);
	KeyManager.watchKeys();
	Selection.update();

	e.stopPropagation();
	e.preventDefault();
	return false;
};
/*}}}*/
function selectDrag(pos)/*{{{*/
{
	Coords.setCurrent(pos);
	Selection.update();
};
/*}}}*/
function newTracker()
{
	var trk = $('<div></div>').addClass(cssClass('tracker'));
	$.browser.msie && trk.css({ opacity: 0, backgroundColor: 'white' });
	return trk;
};

// }}}
// API methods {{{

function animateTo(a)/*{{{*/
{
	var x1 = a[0] / xscale,
		y1 = a[1] / yscale,
		x2 = a[2] / xscale,
		y2 = a[3] / yscale;

	if (animating) return;

	var animto = Coords.flipCoords(x1,y1,x2,y2);
	var c = Coords.getFixed();
	var animat = initcr = [ c.x, c.y, c.x2, c.y2 ];
	var interv = options.animationDelay;

	var x = animat[0];
	var y = animat[1];
	var x2 = animat[2];
	var y2 = animat[3];
	var ix1 = animto[0] - initcr[0];
	var iy1 = animto[1] - initcr[1];
	var ix2 = animto[2] - initcr[2];
	var iy2 = animto[3] - initcr[3];
	var pcent = 0;
	var velocity = options.swingSpeed;

	Selection.animMode(true);

	var animator = function()
	{
		return function()
		{
			pcent += (100 - pcent) / velocity;

			animat[0] = x + ((pcent / 100) * ix1);
			animat[1] = y + ((pcent / 100) * iy1);
			animat[2] = x2 + ((pcent / 100) * ix2);
			animat[3] = y2 + ((pcent / 100) * iy2);

			if (pcent < 100) animateStart();
				else Selection.done();

			if (pcent >= 99.8) pcent = 100;

			setSelectRaw(animat);
		};
	}();

	function animateStart()
		{ window.setTimeout(animator,interv); };

	animateStart();
};
/*}}}*/
function setSelect(rect)//{{{
{
	setSelectRaw([rect[0]/xscale,rect[1]/yscale,rect[2]/xscale,rect[3]/yscale]);
};
//}}}
function setSelectRaw(l) /*{{{*/
{
	Coords.setPressed([l[0],l[1]]);
	Coords.setCurrent([l[2],l[3]]);
	Selection.update();
};
/*}}}*/
function setOptions(opt)/*{{{*/
{
	if (typeof(opt) != 'object') opt = { };
	options = $.extend(options,opt);

	if (typeof(options.onChange)!=='function')
		options.onChange = function() { };

	if (typeof(options.onSelect)!=='function')
		options.onSelect = function() { };

};
/*}}}*/
function tellSelect()/*{{{*/
{
	return unscale(Coords.getFixed());
};
/*}}}*/
function tellScaled()/*{{{*/
{
	return Coords.getFixed();
};
/*}}}*/
function setOptionsNew(opt)/*{{{*/
{
	setOptions(opt);
	interfaceUpdate();
};
/*}}}*/
function disableCrop()//{{{
{
	options.disabled = true;
	Selection.disableHandles();
	Selection.setCursor('default');
	Tracker.setCursor('default');
};
//}}}
function enableCrop()//{{{
{
	options.disabled = false;
	interfaceUpdate();
};
//}}}
function cancelCrop()//{{{
{
	Selection.done();
	Tracker.activateHandlers(null,null);
};
//}}}
function destroy()//{{{
{
	$div.remove();
	$origimg.show();
};
//}}}

function interfaceUpdate(alt)//{{{
// This method tweaks the interface based on options object.
// Called when options are changed and at end of initialization.
{
	options.allowResize ?
		alt?Selection.enableOnly():Selection.enableHandles():
		Selection.disableHandles();

	Tracker.setCursor( options.allowSelect? 'crosshair': 'default' );
	Selection.setCursor( options.allowMove? 'move': 'default' );

	$div.css('backgroundColor',options.bgColor);

	if ('setSelect' in options) {
		setSelect(opt.setSelect);
		Selection.done();
		delete(options.setSelect);
	}

	if ('trueSize' in options) {
		xscale = options.trueSize[0] / boundx;
		yscale = options.trueSize[1] / boundy;
	}

	xlimit = options.maxSize[0] || 0;
	ylimit = options.maxSize[1] || 0;
	xmin = options.minSize[0] || 0;
	ymin = options.minSize[1] || 0;

	if ('outerImage' in options)
	{
		$img.attr('src',options.outerImage);
		delete(options.outerImage);
	}

	Selection.refresh();
};
//}}}

// }}}

$hdl_holder.hide();
interfaceUpdate(true);

var api = {
	animateTo: animateTo,
	setSelect: setSelect,
	setOptions: setOptionsNew,
	tellSelect: tellSelect,
	tellScaled: tellScaled,

	disable: disableCrop,
	enable: enableCrop,
	cancel: cancelCrop,

	focus: KeyManager.watchKeys,

	getBounds: function() { return [ boundx * xscale, boundy * yscale ]; },
	getWidgetSize: function() { return [ boundx, boundy ]; },

	release: Selection.release,
	destroy: destroy

};

$origimg.data('Jcrop',api);
return api;
};

$.fn.Jcrop = function(options)/*{{{*/
{
function attachWhenDone(from)/*{{{*/
{
	var loadsrc = options.useImg || from.src;
	var img = new Image();
	img.onload = function() { $.Jcrop(from,options); };
	img.src = loadsrc;
};
/*}}}*/
if (typeof(options) !== 'object') options = { };

// Iterate over each object, attach Jcrop
this.each(function()
{
	// If we've already attached to this object
	if ($(this).data('Jcrop'))
	{
		// The API can be requested this way (undocumented)
		if (options == 'api') return $(this).data('Jcrop');
		// Otherwise, we just reset the options...
		else $(this).data('Jcrop').setOptions(options);
	}
	// If we haven't been attached, preload and attach
	else attachWhenDone(this);
});

// Return "this" so we're chainable a la jQuery plugin-style!
return this;
};
/*}}}*/

})(jQuery);

Rafael Fernandes_150844 · Julho 20, 2012

Use o eq

$('.nomedaclasse').eq(0).html()
$('.nomedaclasse').eq(1).html()

PauloRJ · Julho 20, 2012

Rafael funcionou PERFEITAMENTE! Muito grato, não conhecia o eq.

Grato \o/

testei assim:

function lou1() {

$('.jcrop-tracker').eq(0).css('background-color', 'blue','border','3px solid blue');

}

function lou2() {

$('.jcrop-tracker').eq(1).css('background-color','red','border','3px solid red');

}

Rafael Fernandes_150844 · Julho 20, 2012

^^

conheci a pouco tempo também.

Progjunior Daniel · Julho 20, 2012

Eu também não conhecia essa funcao eq(). Só que eu não estava entendo como ele criava sozinho as div, agora eu vi, bem legal esse Jcrop. Tenho uma boa experiência programando, então as vezes consigo ajudar por isso. Mas a dica do Rafael foi execelente isso ae Rafael.

Rafael Fernandes_150844 · Julho 20, 2012

Obrigado :thumbsup:

PauloRJ · Julho 23, 2012

Perfeito! Muito bom trocar conhecimentos.

Aos interessados. Estou na segunda etapa do projeto em -> ARRASTAR IMAGEM DENTRO DE DIV

abraço!

Arquivado

[Resolvido] Listar e identificar DIVs

Recommended Posts

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Progjunior Daniel 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Progjunior Daniel 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Fernandes_150844 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Fernandes_150844 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Progjunior Daniel 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Fernandes_150844 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Fóruns

Tempo Real

Informação importante