Tạo đánh giá bằng JS

JRate

 

 

• This jquery plugin helps to generate RATING with various features. Download and include this plugin in your html file.

Including it on your page

• Include jQuery and this plugin on a page.

• 
    <script src="jRate.js"></script> 
  

Basic Usage

• 
  <div id="jRate"></div>
  
  $("#jRate").jRate();
  

Start Color and End Color

 default: startColor: 'yellow'; endColor: 'green'

• Set your favourite start and end color. By giving value in the form of hex value, rgb value or standard color name. We can use one color format also by giving same start and end color.

• 
   $("#jRate").jRate({
    startColor: 'cyan',
    endColor: 'blue'
   });

Initial Value

 default: rating: 0

• We can set the default initial value for rating.

• 
   $("#jRate").jRate({
    rating: 1
   });

Width and Height

 default: width: 20; height: 20

• We can customize our own value for width and height.

• 
   $("#jRate").jRate({
    width: 60,
    height: 60
   });

Shape

 default: shape: 'STAR'

• We can chooose shape from available list. If you need more shapes, raise feature request in github. Available shapes are STAR, FOOD, TWITTER, BULB, RECTANGLE, CIRCLE, RHOMBUS, TRIANGLE.
•  
   

• 
   $("#jRate").jRate({
    shape: 'FOOD'
   });

Width and Height Growth

 default: widthGrowth: 0; heightGrowth: 0

• Make the shapes from smaller to bigger. We can use growth field to make this happen.

• 
   $("#jRate").jRate({
    widthGrowth: 0.2,
    heightGrowth: 0.2
   });

Count

 default: count: 5

• Number of shapes was decided by the count parameter. We can customize own numeric value for it.

• 
   $("#jRate").jRate({
    count: 10
   });

Background Color

 default: backgroundColor: 'white'

• Set your favourite background color. By giving value in the form of hex value, rgb value or standard color name.

• 
   $("#jRate").jRate({
    backgroundColor: 'black'
   });

Gap

 default: shapeGap: 0px

• We can set our own gap between two shapes. We can customize our own values in it.

• 
   $("#jRate").jRate({
    shapeGap: '10px'
   });

Opacity

 default: opacity: 1

• Set opacity value.

• 
   $("#jRate").jRate({
    opacity: 0.3
   });

Minimum and Maximum Value

 default: min: 0; max: 5

• Set a desired minimum and maximum value.

• 
   $("#jRate").jRate({
    min: 10,
    max: 15
   });

Minimum Selected Value

 default: minSelected: 0

• Set the minimum selected value. Restrict user not able to select minimum this mentioned value.

• 
   $("#jRate").jRate({
    minSelected: 3
   });

Precision

 default: precision: 0.1

• Set the precision value.

• 
   $("#jRate").jRate({
    precision: 0.5
   });

Horizontal

 default: horizontal: true

• We can set a boolean variable to make horizontal or vertical. And, set a boolean value for reverse.

• 
   $("#jRate").jRate({
    horizontal: false
   });

Reverse

 default: reverse: false

• We can set a boolean variable to make reverse or not.

• 
   $("#jRate").jRate({
    reverse: true
   });

ReadOnly

 default: readOnly: false

• Set the readonly value.

• 
   $("#jRate").jRate({
    readOnly: true
   });

onChange

• Write your own methods to do own action when the rating value change action occurs.

• 
   $("#jRate").jRate({
    onChange: function(rating) {
     $('#demo-onchange-value').text("Your Rating: "+rating);
    }
   });

onSet

• Write your own methods to do own action when the rating value click or set action occurs.

• 
   $("#jRate").jRate({
    onSet: function(rating) {
     $('#demo-onset-value').text("Selected Rating: "+rating);
    }
   });

License

• This plugin is licensed under the MIT license.

Thấy Hay Thì Chia Sẻ Giúp Mình Nha (^^)

Author : TungChem

Bài Viết Liên Quan