Skip to content

samjudge/jquery.feedbackbars.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

View jsraings.html for an example implenetation :)

Straightforward enough, for the most basic behaviour use :

<form>
<div>
  <ul class="feedback_icons">
    <li x-score="1"><span>Rating 1</span></li>
    <li x-score="2"><span>Rating 2</span></li>
    <li x-score="3"><span>Rating 3</span></li>
  </ul>
</div>
</form>

x-score is the value of the rating. The span inside the li tag is used to apply classes for styling/icons. by default, the glyphicon's glyphicon glyphicon-star and glyphicon glyphicon-star-empty are used. But can be chaned using on_class and off_class in the config you pass.

If you want to add comments, simply use :

<form>
<div>
  <input type="hidden" name="rating" class="rating">
  <ul class="feedback_icons">
    <li x-score="1"><span>Rating 1</span></li>
    <li x-score="2"><span>Rating 2</span></li>
    <li x-score="3"><span>Rating 3</span></li>
  </ul>
  <div class="feedback_comment_container">
    <textarea></textarea>
  </div>
</div>
</form>

Pass the following object to config and initalize.

{
  feedback_bar : "feedback_bar",
  deafault_score : 5,
  output : "rating",
  comment_bar : {
    container : "feedback_comment_container",
    always_visible : false,
    open_on : 3
  },
  on_class "someicon",
  off_class "someicon_off"
}
  • `feedback_bar` - the class name of the ul, containing the feedback symbols themselves (REQURIED)
  • `deafault_score` - the inital score of the bar (OPTIONAL - default value of 4)
  • `output` - the class name of an `` tag, to write the selected rating's `x-score` attribute to on update (OPTIONAL)
  • `comment_bar` - (OPTIONAL)
    • `container` - A container for the comment box + associated elements (REQUIRED, with comment_bar)
    • `always_visible` - if true, the comment box will always be visible (OPTIONAL, default false)
    • `open_on` - if star rating equal to or lower, the comment box will open up (OPTIONAL, default 4)
  • `on_class` - the class name that willbe appended to the `` of the pinned ratings i.e. `glyphicon glyphicon-star` (OPTIONAL)
  • `off_class` - the class name that willbe appended to `` of the non-pinned ratings i.e `glyphicon glyphicon-star-empty`(OPTIONAL)

About

Basic plugin to add feedback bars to your webpages (with support for comments)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published