Como criar menu lateral responsivo utilizando jQuery Sidr

Fonte: http://www.berriart.com/sidr/
Exemplo: Aqui
Arquivos: Aqui
Documentação: Aqui

É obvio que o próprio site do desenvolvedor contem todas as informações/exemplos necessários para a implementação dos menus.
Vou ressaltar aqui as funcionalidades básicas.

Após realizar o download do pacote, teremos:

<!DOCTYPE html>
<html>
  <head>
    <!-- Your stuff -->

    <!-- Include Sidr bundled CSS theme -->
    <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
  </head>
  <body>
    <!-- Your stuff -->

    <!-- Include jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Include the Sidr JS -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
  </body>
</html>

Criando o menu:

<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

Seguindo a documentação do plugin é possível definir o tipo/formato do menu a criar.

Espero ter ajudado (:

Share Button

Jogo da Velha utilizando jQuery e PHP

Autor: Amin Saeedi
Fonte: phpclasses.org

Download dos Arquivos: Aqui
Exemplo Funcionando: Aqui

Bom… não tem muito o que explicar…
O jogo é constituído de algumas classes em PHP e algumas libraries escritas em jQuery e Javascript.

A interação do jogo é feita através de requisições ($.post) do jQuery no arquivo (libs/TicTacToe.js) ao arquivo index.php

Arquivo: index.php

<?php
    set_time_limit(0);

    require 'Board.php';
    require 'TicTacToe.php';

    $board = explode(',', $_POST['board']);
    foreach ($board as $key => $b) {
        $board[$key] = intval($b);
    }

    $ttt = new TicTacToe();
    $response = $ttt->play($board);
    echo json_encode($response);
?>

O index.php recebe as posições que estão marcadas no quadro e efetua o cálculo para definir a próxima jogada.
O retorno é no formato JSON interpretado pela biblioteca Javascript…
Assim até o final…

Para alterar quem inicia o jogo basta alterar no arquivo (/libs/Position.js):

<?php
var Const = {
    HUMAN: 1,
    BLANK: 0,
    COM: -1,
    TURN: this.HUMAN
};
?>

Para:

<?php
var Const = {
    HUMAN: 1,
    BLANK: 0,
    COM: -1,
    TURN: this.COM
};
?>

Vale a pena percorrer as classes do jogo para entender o seu funcionamento.

Espero que gostem!

Até (:

Share Button

Chat – Bate Papo utilizando PHP + jQuery Ajax

Download: Aqui

Faça então o download do código, execute o SQL para criação da tabela no Banco de Dados MySQL.
Vale lembrar de alterar as informações de conexão ao banco no arquivo: class/cChat.php

Seja Feliz ! (:

Share Button