|   FOROS      |         |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica Visual Basic Script (VBS) Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

Firebase en español
Base de datos activa. Firebase - Juan Antonio Villalpando

-- Tutorial de iniciación de Firebase en español --

Volver al índice del tutorial

____________________________

________________________________________________________

4.- Leaderboard. Tabla de resultados.

________________________________

- Vamos a crear una página web en donde podamos ver una tabla con usuarios y sus puntuaciones.

- Simplemente copia este archivo en tu ordenador.

- Debes cambiar mi dirección:

var scoreListRef = new Firebase('https://kio4.firebaseio.com//scoreList');

por la tuya de Firebase.

Además debes bajar este archivo y subirlo a tu servidor

http://www.kio4.com/firebase/imagenes/example.css

leaderboard.htm
<html>
<head>
  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.kio4.com/firebase/imagenes/example.css">
</head>
<body>

<div class="example-base example-leaderboard l-demo-container">
  <table id="leaderboardTable">
    <tr>
      <th>Player</th>
      <th>Score</th>
    </tr>
  </table>
  <footer>
    <input class="example-leaderboard-name" type="text" id="nameInput" placeholder="Enter a name">
    <input class="example-leaderboard-score" type="text" id="scoreInput" placeholder="Record your score...">
  </footer>
</div>
<script>
  var LEADERBOARD_SIZE = 5;

  // Create our Firebase reference
  var scoreListRef = new Firebase('https://kio4.firebaseio.com//scoreList');

  // Keep a mapping of firebase locations to HTML elements, so we can move / remove elements as necessary.
  var htmlForPath = {};

  // Helper function that takes a new score snapshot and adds an appropriate row to our leaderboard table.
  function handleScoreAdded(scoreSnapshot, prevScoreName) {
    var newScoreRow = $("<tr/>");
    newScoreRow.append($("<td/>").append($("<em/>").text(scoreSnapshot.val().name)));
    newScoreRow.append($("<td/>").text(scoreSnapshot.val().score));

    // Store a reference to the table row so we can get it again later.
    htmlForPath[scoreSnapshot.key()] = newScoreRow;

    // Insert the new score in the appropriate place in the table.
    if (prevScoreName === null) {
      $("#leaderboardTable").append(newScoreRow);
    }
    else {
      var lowerScoreRow = htmlForPath[prevScoreName];
      lowerScoreRow.before(newScoreRow);
    }
  }

  // Helper function to handle a score object being removed; just removes the corresponding table row.
  function handleScoreRemoved(scoreSnapshot) {
    var removedScoreRow = htmlForPath[scoreSnapshot.key()];
    removedScoreRow.remove();
    delete htmlForPath[scoreSnapshot.key()];
  }

  // Create a view to only receive callbacks for the last LEADERBOARD_SIZE scores
  var scoreListView = scoreListRef.limitToLast(LEADERBOARD_SIZE);

  // Add a callback to handle when a new score is added.
  scoreListView.on('child_added', function (newScoreSnapshot, prevScoreName) {
    handleScoreAdded(newScoreSnapshot, prevScoreName);
  });

  // Add a callback to handle when a score is removed
  scoreListView.on('child_removed', function (oldScoreSnapshot) {
    handleScoreRemoved(oldScoreSnapshot);
  });

  // Add a callback to handle when a score changes or moves positions.
  var changedCallback = function (scoreSnapshot, prevScoreName) {
    handleScoreRemoved(scoreSnapshot);
    handleScoreAdded(scoreSnapshot, prevScoreName);
  };
  scoreListView.on('child_moved', changedCallback);
  scoreListView.on('child_changed', changedCallback);

  // When the user presses enter on scoreInput, add the score, and update the highest score.
  $("#scoreInput").keypress(function (e) {
    if (e.keyCode == 13) {
      var newScore = Number($("#scoreInput").val());
      var name = $("#nameInput").val();
      $("#scoreInput").val("");

      if (name.length === 0)
        return;

      var userScoreRef = scoreListRef.child(name);

      // Use setWithPriority to put the name / score in Firebase, and set the priority to be the score.
      userScoreRef.setWithPriority({ name:name, score:newScore }, newScore);
    }
  });
</script>
</body>
</html>

____________________________________________________________
- Subimos el archivo a un servidor web.

- Voy a subir mi archivo leaderboard.htm a mi hosting de kio4.com

- La información se guardará en scoreList:

var scoreListRef = new Firebase('https://kio4.firebaseio.com//scoreList');

- Aquí está:

http://kio4.com/firebase/leaderboard.htm

- Así se verá en la base de datos.

____________________________________
__________________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información