Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Perfect Widgets: 5-stars Rating Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--JQuery library-->
<script src="http://PerfectWidgets.com/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!--ScriptSharp library-->
<script src="http://PerfectWidgets.com/js/mscorlib.js" type="text/javascript"></script>
<!--Perfectwidgets library-->
<script src="http://PerfectWidgets.com/js/PerfectWidgets.js" type="text/javascript"></script>
<script type="text/javascript">
var widget;
var jsonModel;
var button;
window.onload = function () {
//widget model
jsonModel = {"Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Instrument","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"RoundedRectangle:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"LinearGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4292138196},"Portion":1}],"EndColor":{"knownColor":0,"name":null,"state":2,"value":4292138196},"StartColor":{"knownColor":78,"name":null,"state":1,"value":0}},"JSBindingsText":null,"Name":"RoundedRectangle1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Center":{"Height":150,"Length":570.087712549569,"Rotation":0.26625204915092537,"Width":550,"X":550,"Y":150},"Size":{"Height":300,"Length":1140.175425099138,"Rotation":0.26625204915092537,"Width":1100,"X":1100,"Y":300},"Angle":0,"Radius":50},{"__type":"Guide:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Guide1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Scale:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Scale1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Slider:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Slider1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"PushButton:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"PushButton1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Star:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4294959680},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":166,"name":null,"state":1,"value":0},"Portion":0.62962962962962965},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":164,"name":null,"state":1,"value":0},"Portion":0.66049382716049387},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":166,"name":null,"state":1,"value":0},"Portion":1}]},"JSBindingsText":"this.setStyle(this.getInstrument().getByName('PushButton1') .getHot()?\u000d\u000a \"Highlighted\" \u000d\u000a :(this.getInstrument().getByName('Slider1').getAnimationValue()>0)?\u000d\u000a \"On\" \u000d\u000a :\"Off\"\u000d\u000a \u000d\u000a );\u000a","Name":"Star1","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"On","ToolTipValue":null,"Visible":true,"Angle":0,"Center":{"Height":150,"Length":212.13203435596427,"Rotation":0.78539816339744828,"Width":150,"X":150,"Y":150},"Radius":100,"Sides":5,"InternalRadius":50}]},{"__type":"PushButton:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"PushButton2","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Star:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4284440415},"Portion":0.24074074074074073},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":1}]},"JSBindingsText":"this.setStyle(this.getInstrument().getByName('PushButton2') .getHot()?\u000d\u000a \"Highlighted\" \u000d\u000a :(this.getInstrument().getByName('Slider1').getAnimationValue()>1)?\u000d\u000a \"On\" \u000d\u000a :\"Off\"\u000d\u000a \u000d\u000a );\u000a","Name":"Star2","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"Off","ToolTipValue":null,"Visible":true,"Angle":0,"Center":{"Height":150,"Length":380.7886552931954,"Rotation":0.40489178628508343,"Width":350,"X":350,"Y":150},"Radius":100,"Sides":5,"InternalRadius":50}]},{"__type":"PushButton:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"PushButton3","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Star:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4284440415},"Portion":0.24074074074074073},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":1}]},"JSBindingsText":"this.setStyle(this.getInstrument().getByName('PushButton3') .getHot()?\u000d\u000a \"Highlighted\" \u000d\u000a :(this.getInstrument().getByName('Slider1').getAnimationValue()>2)?\u000d\u000a \"On\" \u000d\u000a :\"Off\"\u000d\u000a \u000d\u000a );\u000a","Name":"Star3","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"Off","ToolTipValue":null,"Visible":true,"Angle":0,"Center":{"Height":150,"Length":570.087712549569,"Rotation":0.26625204915092537,"Width":550,"X":550,"Y":150},"Radius":100,"Sides":5,"InternalRadius":50}]},{"__type":"PushButton:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"PushButton4","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Star:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4284440415},"Portion":0.24074074074074073},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":1}]},"JSBindingsText":"this.setStyle(this.getInstrument().getByName('PushButton4') .getHot()?\u000d\u000a \"Highlighted\" \u000d\u000a :(this.getInstrument().getByName('Slider1').getAnimationValue()>3)?\u000d\u000a \"On\" \u000d\u000a :\"Off\"\u000d\u000a \u000d\u000a );\u000a","Name":"Star4","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"Off","ToolTipValue":null,"Visible":true,"Angle":0,"Center":{"Height":150,"Length":764.85292703891776,"Rotation":0.19739555984988075,"Width":750,"X":750,"Y":150},"Radius":100,"Sides":5,"InternalRadius":50}]},{"__type":"PushButton:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"PushButton5","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Star:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4284440415},"Portion":0.24074074074074073},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":1}]},"JSBindingsText":"this.setStyle(this.getInstrument().getByName('PushButton5') .getHot()?\u000d\u000a \"Highlighted\" \u000d\u000a :(this.getInstrument().getByName('Slider1').getAnimationValue()>4)?\u000d\u000a \"On\" \u000d\u000a :\"Off\"\u000d\u000a \u000d\u000a );\u000a","Name":"Star5","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"Off","ToolTipValue":null,"Visible":true,"Angle":0,"Center":{"Height":150,"Length":961.76920308356728,"Rotation":0.15660187698201536,"Width":950,"X":950,"Y":150},"Radius":100,"Sides":5,"InternalRadius":50}]}],"MaxLimit":{"Kind":0,"Value":0},"MinLimit":{"Kind":0,"Value":0},"Step":1,"Value":1}],"Colorizer":null,"Maximum":5,"Minimum":1,"Reverse":false}],"Margins":{},"Align":0,"EndPoint":{"Height":150,"Length":961.76920308356728,"Rotation":0.15660187698201536,"Width":950,"X":950,"Y":150},"GuideDirection":0,"StartPoint":{"Height":150,"Length":212.13203435596427,"Rotation":0.78539816339744828,"Width":150,"X":150,"Y":150}}],"Enabled":true,"Focused":false,"GridStep":50,"IsFixed":false,"MeasureUnit":{},"Parameters":[],"ShowGrid":true,"Size":{"Height":300,"Length":1140.175425099138,"Rotation":0.26625204915092537,"Width":1100,"X":1100,"Y":300},"SnapToGrid":true,"Styles":[{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":null,"Font":{"Bold":0,"FamilyName":"Microsoft Sans Serif","Italic":0,"Size":10,"Strikeout":0,"Underline":0},"Image":null,"Name":"Default","Stroke":{"__type":"EmptyStroke:#PerpetuumSoft.Framework.Drawing","Width":0}},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4284440415},"Portion":0.24074074074074073},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":78,"name":null,"state":1,"value":0},"Portion":1}]},"Font":null,"Image":null,"Name":"Off","Stroke":null},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"MultiGradientFill:#PerpetuumSoft.Framework.Drawing","Angle":270,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4294959680},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":166,"name":null,"state":1,"value":0},"Portion":0.62962962962962965},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":164,"name":null,"state":1,"value":0},"Portion":0.66049382716049387},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":166,"name":null,"state":1,"value":0},"Portion":1}]},"Font":null,"Image":null,"Name":"On","Stroke":null},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"SphericalFill:#PerpetuumSoft.Framework.Drawing","Angle":0,"Colors":[{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":1090518986},"Portion":0},{"__type":"GradientColor:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":3472883456},"Portion":1}],"Delta":0,"EndColor":{"knownColor":0,"name":null,"state":2,"value":1090518986},"StartColor":{"knownColor":0,"name":null,"state":2,"value":3472883456}},"Font":null,"Image":null,"Name":"Highlighted","Stroke":null}]}
//creating widgets
widget = new PerfectWidgets.Widget("root", jsonModel);
widget.getByName("Slider1").addValueChangedHandler(widgetValueChanged);
//setup textBox
jQuery('#currentValue').keyup(textboxKeyUp);
}
function widgetValueChanged()
{
$('#currentValue').val(widget.getByName("Slider1").getValue());
}
function textboxKeyUp()
{
this.value = this.value.replace(/[^1-5\.]/g,'');
if(this.value!="")
{
widget.getByName("Slider1").setValue(this.value, false);
}
}
</script>
</head>
<body>
<h2>Widget</h2>
<!--widget will be in the div below-->
Click a star...
<div id="root">
</div>
...or input the value:
<input id="currentValue" type="text" value="" maxlength="1"/>
<div>
<h2>Source Code</h2>
<!-- will place it later -->
</div>
</body>
</html>