๎กป

Raters
Snippets 

	<!-- Rater . Basic -->
	<rater class="rater"></rater>

	<!-- Basic . Naming -->
	<rater class="rater" data-name="rater_a" data-id="rater_id" required></rater>

	<!-- Basic . Naming + Interval  -->
	<rater class="rater" data-name="rater_a" data-rates-start="0" data-rates-end="5"></rater>

	<!-- Basic . Naming + Interval + Active value  -->
	<rater class="rater" data-name="rater_a" data-rates-start="3" data-rates-end="5" data-value="4"></rater>

	<!-- Basic . Naming + Pre-existing list  -->
	<rater class="rater" data-name="rater_b">
		<ul>
			<li data-value="a">1</li>
			<li data-value="b">2</li>
			<li data-value="c" class="active">3</li>
			<li data-value="d">4</li>
			<li data-value="e">5</li>
		</ul>
	</rater>
Options
Type Value
Status none, locked, disabled valid, invalid, changed
Size none, tiny, small, default, medium, large, huge, xs-[size], sm-[size], md-[size], lg-[size]
Styles none, rounded
Colors . Background none, color
Colors . Outlines none, ol_*color*
Type Name Value
default id string
default title string
default data-id string
default data-name string
rating data-value int string String should only be used for raters pre-existing list
rating data-rates-start int
rating data-rates-end int
validation required required
callback data-callback-initialize function Triggers on initialization
callback data-callback-create function Triggers on creation
callback data-callback-update function Triggers on updating
callback data-callback-change function Triggers on changing
callback data-callback-reset function Triggers on reset
callback data-callback-validate function Triggers on validation
callback data-callback-persist function Triggers on persisting
callback data-callback-hover function Triggers on hover
callback data-callback-focus function Triggers on focus
callback data-callback-lock function Triggers on locking
callback data-callback-unlock function Triggers on unlocking
callback data-callback-disable function Triggers on disabling
callback data-callback-enable function Triggers on enabling
callback data-callback-hide function Triggers on hiding
callback data-callback-show function Triggers on showing
Methods 

	// Scan raters
	basekit.components.raters.scan(scope);
Parameters Value
scope null element 

	// Initialize raters
	basekit.components.raters.initialize(scope);
Parameters Value
scope null container rater(s) 

	// Create raters
	basekit.components.raters.create(id,name,value,value_first,value_last,title,options,callback);
Parameters Value
id string
name string
value int
value_first int
value_last int
title string
options 'locked', 'disabled'
callback function 

	// Update raters
	basekit.components.raters.update(scope,id,name,value,title,options);
Parameters Value
scope rater(s)
id string
name string
value int string
title string
options 'locked', 'disabled' 

	// Cancel active raters
	basekit.components.raters.cancel();
Parameters Value
- - 

	// Set scope
	var scope= $('rater');

	// Reset raters
	basekit.components.raters.reset(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Validate raters
	basekit.components.raters.validate(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Persist raters
	basekit.components.raters.persist(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Lock raters
	basekit.components.raters.lock(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Unlock raters
	basekit.components.raters.unlock(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Disable raters
	basekit.components.raters.disable(scope);
Parameters Value
scope null rater(s) 

	// Set scope
	var scope= $('rater');

	// Enable raters
	basekit.components.raters.enable(scope);
Parameters Value
scope null rater(s)
Styles . Default 
tiny
 
small
 
default
 
medium
 
large
 
huge
 
xs-xxx
 
sm-xxx
 
md-xxx
 
lg-xxx
  • 1
 
default
  • 1
 
active
  • 1
 
disabled
  • 1
 
readonly
  • 1
  • 2
  • 3
 
default
  • 1
  • 2
  • 3
 
primary
  • 1
  • 2
  • 3
 
secondary
  • D
  • P
  • S
 
mixed
  • 1
  • 2
  • 3
 
red
  • 1
  • 2
  • 3
 
green
  • 1
  • 2
  • 3
 
blue
  • 1
  • 2
  • 3
 
orange
  • 1
  • 2
  • 3
 
yellow
  • 1
  • 2
  • 3
 
grey
  • 1
  • 2
  • 3
 
black
  • 1
  • 2
  • 3
 
white
  • R
  • G
  • B
  • O
  • Y
  • G
  • B
  • W
 
mixed
  • 1
  • 2
  • 3
 
red_dark
  • 1
  • 2
  • 3
 
green_dark
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_dark
  • 1
  • 2
  • 3
 
yellow_dark
  • 1
  • 2
  • 3
 
grey_dark
  • 1
  • 2
  • 3
 
black_dark
  • 1
  • 2
  • 3
 
white_dark
  • DR
  • DG
  • DB
  • DO
  • DY
  • DG
  • DB
  • DW
 
mixed dark
  • 1
  • 2
  • 3
 
red_medium
  • 1
  • 2
  • 3
 
green_medium
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_medium
  • 1
  • 2
  • 3
 
yellow_medium
  • 1
  • 2
  • 3
 
grey_medium
  • 1
  • 2
  • 3
 
black_medium
  • 1
  • 2
  • 3
 
white_medium
  • MR
  • MG
  • MB
  • MO
  • MY
  • MG
  • MB
  • MW
 
mixed medium
  • 1
  • 2
  • 3
 
red_light
  • 1
  • 2
  • 3
 
green_light
  • 1
  • 2
  • 3
 
blue_light
  • 1
  • 2
  • 3
 
orange_light
  • 1
  • 2
  • 3
 
yellow_light
  • 1
  • 2
  • 3
 
grey_light
  • 1
  • 2
  • 3
 
black_light
  • 1
  • 2
  • 3
 
white_light
  • LR
  • LG
  • LB
  • LO
  • LY
  • LG
  • LB
  • LW
 
mixed light
  • 1
  • 2
  • 3
 
default
  • 1
  • 2
  • 3
 
primary
  • 1
  • 2
  • 3
 
secondary
  • D
  • P
  • S
 
mixed
  • 1
  • 2
  • 3
 
red
  • 1
  • 2
  • 3
 
green
  • 1
  • 2
  • 3
 
blue
  • 1
  • 2
  • 3
 
orange
  • 1
  • 2
  • 3
 
yellow
  • 1
  • 2
  • 3
 
grey
  • 1
  • 2
  • 3
 
black
  • 1
  • 2
  • 3
 
white
  • R
  • G
  • B
  • O
  • Y
  • G
  • B
  • W
 
mixed
  • 1
  • 2
  • 3
 
red_dark
  • 1
  • 2
  • 3
 
green_dark
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_dark
  • 1
  • 2
  • 3
 
yellow_dark
  • 1
  • 2
  • 3
 
grey_dark
  • 1
  • 2
  • 3
 
black_dark
  • 1
  • 2
  • 3
 
white_dark
  • DR
  • DG
  • DB
  • DO
  • DY
  • DG
  • DB
  • DW
 
mixed dark
  • 1
  • 2
  • 3
 
red_medium
  • 1
  • 2
  • 3
 
green_medium
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_medium
  • 1
  • 2
  • 3
 
yellow_medium
  • 1
  • 2
  • 3
 
grey_medium
  • 1
  • 2
  • 3
 
black_medium
  • 1
  • 2
  • 3
white_medium
  • MR
  • MG
  • MB
  • MO
  • MY
  • MG
  • MB
  • MW
 
mixed medium
  • 1
  • 2
  • 3
 
red_light
  • 1
  • 2
  • 3
 
green_light
  • 1
  • 2
  • 3
 
blue_light
  • 1
  • 2
  • 3
 
orange_light
  • 1
  • 2
  • 3
 
yellow_light
  • 1
  • 2
  • 3
 
grey_light
  • 1
  • 2
  • 3
 
black_light
  • 1
  • 2
  • 3
 
white_light
  • LR
  • LG
  • LB
  • LO
  • LY
  • LG
  • LB
  • LW
 
mixed light
Styles . Rounded
  • 1
  • 2
  • 3
  • 4
  • 5
 
tiny
  • 1
  • 2
  • 3
  • 4
  • 5
 
small
  • 1
  • 2
  • 3
  • 4
  • 5
 
default
  • 1
  • 2
  • 3
  • 4
  • 5
 
medium
  • 1
  • 2
  • 3
  • 4
  • 5
 
large
  • 1
  • 2
  • 3
  • 4
  • 5
 
huge
 
xs-xxx
 
sm-xxx
 
md-xxx
 
lg-xxx
  • 1
 
default
  • 1
 
active
  • 1
 
disabled
  • 1
 
readonly
  • 1
  • 2
  • 3
 
default
  • 1
  • 2
  • 3
 
primary
  • 1
  • 2
  • 3
 
secondary
  • D
  • P
  • S
 
mixed
  • 1
  • 2
  • 3
 
red
  • 1
  • 2
  • 3
 
green
  • 1
  • 2
  • 3
 
blue
  • 1
  • 2
  • 3
 
orange
  • 1
  • 2
  • 3
 
yellow
  • 1
  • 2
  • 3
 
grey
  • 1
  • 2
  • 3
 
black
  • 1
  • 2
  • 3
 
white
  • R
  • G
  • B
  • O
  • Y
  • G
  • B
  • W
 
mixed
  • 1
  • 2
  • 3
 
red_dark
  • 1
  • 2
  • 3
 
green_dark
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_dark
  • 1
  • 2
  • 3
 
yellow_dark
  • 1
  • 2
  • 3
 
grey_dark
  • 1
  • 2
  • 3
 
black_dark
  • 1
  • 2
  • 3
 
white_dark
  • DR
  • DG
  • DB
  • DO
  • DY
  • DG
  • DB
  • DW
 
mixed dark
  • 1
  • 2
  • 3
 
red_medium
  • 1
  • 2
  • 3
 
green_medium
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_medium
  • 1
  • 2
  • 3
 
yellow_medium
  • 1
  • 2
  • 3
 
grey_medium
  • 1
  • 2
  • 3
 
black_medium
  • 1
  • 2
  • 3
 
white_medium
  • MR
  • MG
  • MB
  • MO
  • MY
  • MG
  • MB
  • MW
 
mixed medium
  • 1
  • 2
  • 3
 
red_light
  • 1
  • 2
  • 3
 
green_light
  • 1
  • 2
  • 3
 
blue_light
  • 1
  • 2
  • 3
 
orange_light
  • 1
  • 2
  • 3
 
yellow_light
  • 1
  • 2
  • 3
 
grey_light
  • 1
  • 2
  • 3
 
black_light
  • 1
  • 2
  • 3
 
white_light
  • LR
  • LG
  • LB
  • LO
  • LY
  • LG
  • LB
  • LW
 
mixed light
  • 1
  • 2
  • 3
 
default
  • 1
  • 2
  • 3
 
primary
  • 1
  • 2
  • 3
 
secondary
  • D
  • P
  • S
 
mixed
  • 1
  • 2
  • 3
 
red
  • 1
  • 2
  • 3
 
green
  • 1
  • 2
  • 3
 
blue
  • 1
  • 2
  • 3
 
orange
  • 1
  • 2
  • 3
 
yellow
  • 1
  • 2
  • 3
 
grey
  • 1
  • 2
  • 3
 
black
  • 1
  • 2
  • 3
 
white
  • R
  • G
  • B
  • O
  • Y
  • G
  • B
  • W
 
mixed
  • 1
  • 2
  • 3
 
red_dark
  • 1
  • 2
  • 3
 
green_dark
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_dark
  • 1
  • 2
  • 3
yellow_dark
  • 1
  • 2
  • 3
 
grey_dark
  • 1
  • 2
  • 3
 
black_dark
  • 1
  • 2
  • 3
 
white_dark
  • DR
  • DG
  • DB
  • DO
  • DY
  • DG
  • DB
  • DW
 
mixed dark
  • 1
  • 2
  • 3
 
red_medium
  • 1
  • 2
  • 3
 
green_medium
  • 1
  • 2
  • 3
 
blue_medium
  • 1
  • 2
  • 3
 
orange_medium
  • 1
  • 2
  • 3
 
yellow_medium
  • 1
  • 2
  • 3
 
grey_medium
  • 1
  • 2
  • 3
 
black_medium
  • 1
  • 2
  • 3
 
white_medium
  • MR
  • MG
  • MB
  • MO
  • MY
  • MG
  • MB
  • MW
 
mixed medium
  • 1
  • 2
  • 3
 
red_light
  • 1
  • 2
  • 3
 
green_light
  • 1
  • 2
  • 3
 
blue_light
  • 1
  • 2
  • 3
 
orange_light
  • 1
  • 2
  • 3
 
yellow_light
  • 1
  • 2
  • 3
 
grey_light
  • 1
  • 2
  • 3
 
black_light
  • 1
  • 2
  • 3
 
white_light
  • LR
  • LG
  • LB
  • LO
  • LY
  • LG
  • LB
  • LW
 
mixed light