Tuesday, August 15, 2017

Membuat Kolom Komentar Dengan Ranting Bintang

Ini  postingan saya yang ke 10, yaitu mengenai rating bintang, yang sebelumya hanya saya buat memberi rangting saja, kini saya gabung membuat komentar berserta ranting bintang, yang tampilanya seperti gambar dibawah ini,

Membuat Kolom Komentar Dengan Ranting Bintang

1. Load fontaswome  dan icon dari bostrap

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Buat colom komentar, yang sebelumnya muncul bintangy saya, jika sudah memberikan bintang kolom komentar akan muncul.

<div id="feedback">
  <input class="feedback_output" type="hidden">
  <ul class="feedback_bar">
    <li class="feedback_starrating" x-score="1"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="2"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="3"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="4"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="5"><span class="glyphicon glyphicon-star"></span></li>
  </ul>
  <div class="feedback_comment_container">
    <textarea id="feedback_comment_textarea" class="form-control longtext" rows="4"></textarea>
  </div>
    <a id="feedback_submit" class="btn btn-primary" href="#hurdur">Submit Feedback</a><br/>
</div>

3. Load jquery library dan jquery feedbackBar.js

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ratingsbar.js"></script>

4. Panggil plugin default seperti dibawah ini.

$("#feedback").feedback({

  // REQUIRED
  feedback_bar : "feedback_bar",

  // initial rating value
  deafault_score : 5,

  // CSS selector
  output : "feedback_output",

  // comment area
  comment_bar : {
    container : "feedback_comment_container",
    always_visible : false,
    open_on : 3 // 3 stars
  },

  // icon classes
  on_class : "glyphicon glyphicon-star",
  off_class : "glyphicon glyphicon-star-empty"
  
});


Masih binggung?? Mau download?? ada nih silahkan di download..

server1  http://festyy.com/q2dJTG

server2  http://viahold.com/3CEX
By di