Apaļi stūri ar JS

[fest]

Savajadzējās vienam projektam div'us ar apaļiem stūriem. Atradu netā diezgan daudzus JS library'us, kas ļauj to vienkārši izdarīt. Taču visiem manis atrastajiem risinājumiem bija (vismaz) viens no šiem trūkumiem:

• Stūrīši bija necaurspīdīgi (man ir backgrounds ar gradientu)
  
• Jāizmanto viens vai vairāki attēli (man bija nepieciešami vienkārši balti noapaļoti stūri)
  
• Jāizmanto extra markups, kas man neder, jo visi divi tiek ģenerēti dinamiski un negribējās tur neko mainīt
  

Tāpēc iedvesmojoties no viena risinājuma, uzrakstīju savu JS funkciju, kuru tad arī jums tagad atrādu. Būtībā elementam augšpusē un apakšpusē tiek pievienoti konteineri, kuros ir vairāki div'i- katrs nākamais ir mazāks par iepriekšējo, tādējādi rodas ilūzija, ka stūri ir noapaļoti.

Kods tika samests kopā diezgan īsā laikā un lielā steigā, tā kā varētu būt gļukains.

	function round(id,radius) {
	//first create obj and check if id is reference or id
	var obj;
	if (typeof(id)=='string') obj=$(id);
	else if (typeof(id)=='object') obj=id;
	else return false;
	//create containers where stripes will be added
	var container_top=Builder.node('div',{style:'padding:0;margin:0;background-color:transparent;width:'+obj.getWidth()+'px;height: '+(radius+1)+'px'});
	var container_bottom=Builder.node('div',{style:'padding:0;margin:0;background-color:transparent;width:'+obj.getWidth()+'px;height: '+(radius+1)+'px'});
	var r2=radius*radius;
	for (var i=0; i<=radius;i++) {
		//calulate the margins of stripe
		var margin=Math.round(radius-Math.sqrt(r2-(i*i))+0.4);
		//create stripe for top container

		var stripe_top=Builder.node('div',
			{style:'padding:0;border:none;background-color:'+
				obj.getStyle('background-color')+';margin:0;margin-left: '+margin+'px;margin-right:'+margin+'px;'+
				'height: 1px;overflow:hidden;'
			});
		//insert this stripe before first child
		container_top.insertBefore(stripe_top,container_top.firstChild);
		//create bottom stripe
		var stripe_bottom=Builder.node('div',
		{
			style:'padding:0;border:none;background-color:'+obj.getStyle('background-color')+';'+
			'margin-left:'+margin+'px;margin-right:'+margin+'px;height: 1px;overflow:hidden;'
		});
		//append this stripe as last child
		container_bottom.appendChild(stripe_bottom);

	}
	//insert both containers in DOM
	obj.parentNode.insertBefore(container_top,obj);
	obj.parentNode.insertBefore(container_bottom,obj.nextSibling);
}

Lietošana: round(<elementa id, vai DOM reference>,<rādiuss>);

 

EDIT: OMFG... Tikko apskatījos uz IE. Kāds negrib uzmest aci? links

Edited June 27, 2007 by fest

[andrisp]

Varbūt pasaki arī kāds frameworks tiek izmantots ? :)

 

IE nebūs iespējams piespiest veidot DIVus 1px augstumā. Labākais, ko esmu dabūjis ir 2/3 px. Bet var mēģināt kaut kā smalkāk to efektu panākt.

Edited June 27, 2007 by andrisp

[fest]

Ups, aizmirsu piebilst, ka tiek izmantots Scriptaculous. Tas tiek izmantots arī pašā projektā, tāpēc izmantoju to arī rakstot šo kodu. Taču manuprāt pārrakstīt lai neizmanto Scriptaculous būtu vienkārši.

 

andrisp, ir kādas idejas, kā panākt līdzīgu efektu? :)

 

Edit: šķiet, ka panācu to ko gribu. Pieliekot pie stripe stila overflow: hidden; viss aizgāja arī uz IE. Un izskatās, ka augstums pat ir 1px (vismaz izskatās identiski FFā un IE).

Edited June 27, 2007 by fest

[GedroX]

Un kā būtu ar AntiAliasing? :)

[fest]

GedroX, man bija nepieciešami stūri ar diezgan mazu rādiusu (2px) tā kā to graudainību īpaši nejūt.

//Laba atmazka slinkumam :D

[Edgars]

nesen pamanīju šādu JS variantu noapaļotajiem stūriem:

http://www.netzgesta.de/corner/

 

pašam vēl nebija laiks testēt. kad būs vajadzība, varbūt pieķeršos, tikmēr mēģiniet paši :)

[fest]

HEEEELP, palīdziet man atrast REPLY pogu, lai nav bezjēdzīgi jāQUOTĒ!

 

Diemžēl par brīvu tikai nekomerciāliem projektiem :/

Bet izskatās ļoti labi- katrā gadījumā labāk, kā mans risinājums (kurš pie tam gļuko uz float'otiem diviem. Taču būs jāpapēta kods, varbūt var aizņemties kādu ideju :)

 

Starp citu, šis izskatās ļoti jauki, un ir bezmaksas http://www.ruzee.com/blog/shadedborder