Get 2GB of free storage at PersonalGrid

Control.Rating

Unobtrusive CSS based rating widget for Prototype.

介绍

Control.Rating连接到任何页面上的DIV,SPAN或表格单元格的一行代码,以创建一个完全可定制的基于CSS的评级部件。每个控制可以发布一个Ajax请求时,它的值设置为,可以与已经在您的网页上的文字输入或选择元素。它使用4个(可定制)变量来确定各个环节的状态:

  • rating_off
  • rating_half
  • rating_on
  • rating_selected
ExampleOptions
{}
{value: 2.4}
{value: 4, rated: true}
{value: 6, rated: false, max:9}
{value: 6, rated: false, min: 3, max: 12, multiple: true, reverse: true}
{input: 'rating_seven_input', multiple: true}
{input: 'rating_eight_select', multiple: true}

HTML


		<!-- you can pre-populate a rating with the HTML the rating will generate-->

		<div id="rating_one" class="rating_container">
			<a href="#" class="rating_on"></a>
			<a href="#" class="rating_on"></a>

			<a href="#" class="rating_half"></a>
			<a href="#" class="rating_off"></a>
			<a href="#" class="rating_off"></a>

		</div>

		<!-- or just provide an empty container -->
		<div id="rating_two" class="rating_container"></div>
	

JavaScript


	var rating_one = new Control.Rating('rating_one');
	var rating_two = new Control.Rating('rating_two',{value: 2.4});
	var rating_four = new Control.Rating('rating_four',{value: 4,rated: true});
	var rating_five = new Control.Rating('rating_five',{value: 6,rated: false,max:9});
	var rating_six = new Control.Rating('rating_six',{
		value: 6,
		rated: false,
		min: 3,
		max: 12,
		multiple: true,
		reverse: true
	});
	var rating_seven = new Control.Rating('rating_seven',{
		input: 'rating_seven_input',
		multiple: true
	});
	var rating_eight = new Control.Rating('rating_eight',{
		input: 'rating_eight_select',
		multiple: true
	});

CSS


	.rating_container {
		clear:both;
	}

	.rating_container a {
		float:left;
		display:block;
		width:25px;
		height:25px;
		border:0;
		background-image:url("/stylesheets/rating.gif");
	}
	
	.rating_container a.rating_off {
		background-position:0 0px;
	}
	
	.rating_container a.rating_half {
		background-position:0 -25px;
	}
	
	.rating_container a.rating_on {
		background-position:0 -50px;
	}
	
	.rating_container a.rating_selected {
		background-position:0 -75px;
	}

DOM Modifications

Control.Rating.initialize() will insert a series of a elements inside of the container you pass in, if the a elements to not already exist.

Class

ReturnNameDescription
mixedfindByElementId(string id)Find any Control.Rating instance who's container has an id.
arrayinstancesAll created Control.Rating instances.

Instance

ReturnNameDescription
Control.Ratinginitialize(Element container [, Hash options])
nulldisable()Removes all event handlers from the links.
nullsetValue(number value [,bool rated [,bool prevent_callbacks]])Set the value of the ratings widget and redraw it. Setting force_selected to true will draw the input as if it has been rated, but will not mark it as rated in the options hash. Setting prevent_callbacks to true will prevent the afterChange event and optional Ajax request from firing.
Elementcontainer
numbervalue

Options

TypeNameDefaultDescription
boolcapturetrueStop the click event on each rating to propagate.
HashclassNames{off: 'rating_off', half: 'rating_half', on: 'rating_on', selected: 'rating_selected'}Hash of state dependent class names.
mixedinputfalsefalse or string id, or Element object of a text, hidden, or select input.
numbermax5
numbermin1
boolmultiplefalseCan the user rate multiple times.
boolratedfalseHas the widget already been rated.
boolreversefalseDisplay the links in reverse order.
HashupdateOptions{}Ajax Options for the request.
stringupdateParameterName'value'The name of the POST key that will contain the value.
mixedupdateUrlfalsefalse or string URL to post an Ajax request to when the value changes.
numbervaluenullDefault value, gets set into the value property of the instance and discarded from the options hash. Anything that is not a whole number (i.e. 3.1) results in a the 'half' class name being assigned.

Events

NameDescription
afterChange(number value)

适用浏览器:IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari浏览器。

代码整理:站长图库