RaphaëlForm

Extension of Javascript vector graphics library Raphaël for HTML FORM elements.

Examples (and tests at the same time)

Basics


var paper = Raphael('raphael-exBasics',400,400);

paper.rect(0,0,400,400);

var hlp = paper.set(

paper.path('M65,20,l10,-3,v-7h150v20h-150v-7Z').attr({'stroke-width':2,fill:'cyan'}),

paper.text(150,20,'some help message').attr({'font-size':15})

).hide();

RaphaelForm.label(paper,'Label_1').attr({

x:10,y:10,width:150,fontSize:15,cursor:'help'

}).onmouseover(function(){hlp.show()}).onmouseout(function(){hlp.hide()});

var ell = paper.ellipse(200,200,100,75).attr({fill:'cyan'});

var t = paper.text(200,200,'Text value').attr({'font-size':10});

var ti = RaphaelForm.inputText(paper,'Text value').attr({x:10,y:35,width:150,height:20,fontSize:15});

ti.onchange(function(){t.attr({text:ti.value()})});

var select1 = RaphaelForm.select(paper,['10','20','30','40']).attr({x:10,y:65,fontSize:15,height:20,width:150});

select1.onchange(function(){t.attr({'font-size':select1.value()})});

var select2 = RaphaelForm.select(paper,['small','medium','big','BIG'],{values:[100,125,150,175]});

select2.attr({x:10,y:90,fontSize:15,height:20,width:150});

select2.onchange(function(){var v=select2.value(); ell.attr({rx:v,ry:.75*v});});