Mootools ir informacijos reitingavimas su MooStarRating

2011-02-21 0 Komentarų

“JavaScript” pagrindinis vaidmuo interneto puslapiuose yra padidinti kitaip nuobodų, statinio puslapio, funkcionalumą. Vienas puikus pavyzdys yra JavaScript / AJAX žvaigždučių reitingų sistema, kuri tapo populiari per pastaruosius penkerius metus. Žvaigždučių sistemos yra patrauklios, jos leidžia mums išvengti bjaurių formų, ir nereikalingų puslapio perkrovimų. Naujas įskiepis (plugin’as), padarytas Lorenzo Stanco vadinamas MooStarRating, o aš norėjau pasidalinti su jumis, kaip juo naudotis.

HTML kodas (naudojamas radio mygtukų pagrindas)

<form name="ratingsForm">
    <label>Do you like this post?</label>
    <input type="radio" name="rating" value="0.5">
    <input type="radio" name="rating" value="1.0">
    <input type="radio" name="rating" value="1.5">
    <input type="radio" name="rating" value="2.0">
    <input type="radio" name="rating" value="2.5">
    <input type="radio" name="rating" value="3.0">
    <input type="radio" name="rating" value="3.5">
    <input type="radio" name="rating" value="4.0">
    <input type="radio" name="rating" value="4.5">
    <input type="radio" name="rating" value="5.0">
    <input type="radio" name="rating" value="5.5">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <input type="radio" name="rating" value="7.5">
    <input type="radio" name="rating" value="8.0">
    <input type="radio" name="rating" value="8.5">
    <input type="radio" name="rating" value="9.0">
    <input type="radio" name="rating" value="9.5">
    <input type="radio" name="rating" value="10.0">
  <span id="htmlTip"></span>
</form>

Javascript (mootools)
Pirmas žingsnis įvesti teisingus parametrus nuotraukoms

// Configure the image paths
var MooStarRatingImages = {
  defaultImageFolder: "/js/mooStarRating/images",
  defaultImageEmpty:  "empty.png",
  defaultImageFull:   "full.png",
  defaultImageHover:  "hover.png"

Toliau Mootools kodas

var postId = 10;

window.addEvent("domready",function() {
  var starRater = new MooStarRating({
    form: "ratingsForm",
    radios: "rating",
    half: true,
    //imageEmpty: "star_boxed_empty.png", // Specialiu nuotraukų nustatymams
    //imageFull:  "star_boxed_full.png",
    //imageHover: "star_boxed_hover.png",
    width: 17,
    tip: "Rate as <i>[VALUE] / 10.0</i>",
    tipTarget: document.byId("htmlTip"),
    tipTargetType: "html",
    click: function(value) {
      // Send ajax request to server
      new Request.send({
        url: "rating.php",
        data: { rating: value, postId: postId }
      });
    }
  });
});

Demonstracija

Kitos versijos : Yra begalės kitų variantų pasiekti panašių rezultatų, pavyzdžiui norintiems naudoti jQuery galite išmėginti Star rating widget ar jQuery star rating plugin

Programavimas
, , ,