FHWeather JQuery plugin

Como usar

Importar os arquivos

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/fh-weather.js"></script>
<link rel="stylesheet" href="css/weather-icons.min.css">
<link rel="stylesheet" href="css/weather-icons-wind.min.css">

Carregar o plugin

<script>
$('.fh-previsao-tempo').fhwheather({
    unit: 'c',                        //'c' para celsius, 'f' para farenheight
    timeout: 30                       //Tempo de atualização em segundos
});
</script>

No html

OBS: Configure atributo data-woeid="" de acordo com o woeid da cidade, o woeid de cada cidade pode ser encontrado no site http://woeid.rosselliot.co.nz/

<div class="fh-previsao-tempo" data-woeid="458150">
    <h1 data-tempo="cidade"></h1>
    <div><span data-tempo="temperatura"></span> Graus</div>
    <div data-tempo="icone"></div>
    <div><span data-tempo="descricao"></span></div>
    <div>Temperatura Máxima: <span data-tempo="maxima"></span> Graus</div>
    <div>Temperatura Mínima: <span data-tempo="minima"></span> Graus</div>
    <div data-tempo="data-completa"></div>
    <div>Dia: <span data-tempo="dia"></span></div>
    <div data-tempo="dia-semana"></div>
    <div data-tempo="dia-mes"></div>

    <h2>Próximos dias da semana</h2>
    <ol>
        <li>
            <div><span data-tempo="temperatura-1"></span> Graus</div>
            <div data-tempo="icone-1"></div>
            <div><span data-tempo="descricao-1"></span></div>
            <div>Temperatura Máxima: <span data-tempo="maxima-1"></span> Graus</div>
            <div>Temperatura Mínima: <span data-tempo="minima-1"></span> Graus</div>
            <div data-tempo="data-completa-1"></div>
            <div>Dia: <span data-tempo="dia-1"></span></div>
            <div data-tempo="dia-semana-1"></div>
            <div data-tempo="dia-mes-1"></div>
        </li>
        <li>
            <div><span data-tempo="temperatura-2"></span> Graus</div>
            <div data-tempo="icone-2"></div>
            <div><span data-tempo="descricao-2"></span></div>
            <div>Temperatura Máxima: <span data-tempo="maxima-2"></span> Graus</div>
            <div>Temperatura Mínima: <span data-tempo="minima-2"></span> Graus</div>
            <div data-tempo="data-completa-2"></div>
            <div>Dia: <span data-tempo="dia-2"></span></div>
            <div data-tempo="dia-semana-2"></div>
            <div data-tempo="dia-mes-2"></div>
        </li>
        <li>
            <div><span data-tempo="temperatura-3"></span> Graus</div>
            <div data-tempo="icone-3"></div>
            <div><span data-tempo="descricao-3"></span></div>
            <div>Temperatura Máxima: <span data-tempo="maxima-3"></span> Graus</div>
            <div>Temperatura Mínima: <span data-tempo="minima-3"></span> Graus</div>
            <div data-tempo="data-completa-3"></div>
            <div>Dia: <span data-tempo="dia-3"></span></div>
            <div data-tempo="dia-semana-3"></div>
            <div data-tempo="dia-mes-3"></div>
        </li>
        <li>
            <div><span data-tempo="temperatura-4"></span> Graus</div>
            <div data-tempo="icone-4"></div>
            <div><span data-tempo="descricao-4"></span></div>
            <div>Temperatura Máxima: <span data-tempo="maxima-4"></span> Graus</div>
            <div>Temperatura Mínima: <span data-tempo="minima-4"></span> Graus</div>
            <div data-tempo="data-completa-4"></div>
            <div>Dia: <span data-tempo="dia-4"></span></div>
            <div data-tempo="dia-semana-4"></div>
            <div data-tempo="dia-mes-4"></div>
        </li>
    </ol>
</div>

Lista de parametros disponíveis

data-tempo="temperatura" -> Temperatura

data-tempo="maxima" -> Temperatura máxima

data-tempo="minima" -> Tempera minima

data-tempo="dia" -> Número do dia do mes, exemplo 21

data-tempo="icone" -> Icone do tempo atual

data-tempo="descricao" -> Exibe um texto informando o estado do tempo, por exemplo: ensolarado, nublado, etc

data-tempo="dia-mes" -> Exibe o número do dia seguido do nome do mês, por exemplo: 21 Janeiro

data-tempo="dia-semana" -> Exibe o nome do dia da semana. por exemplo Sexta-Feira

data-tempo="dia-semana-abreviado" -> Exibe o nome do dia da semana abreviado. por exemplo Seg

data-tempo="data-completa" -> Exibe a data completa no formato: Quinta-Feira, 21 Janeiro

data-tempo="cidade" -> Exibe o nome da cidade atual

data-tempo="humidade" -> Humidade do ar

data-tempo="pressao" -> Pressão atmosférica

data-tempo="visibilidade" -> Visibilidade

data-tempo="elevação" -> Elevação

data-tempo="velocidade-vento" -> Velocidade do vento

data-tempo="unidade-velocidade" -> Unidade usada para medir a velocidade

data-tempo="unidade-distancia" -> Unidade para medir distancias

data-tempo="unidade-pressao" -> Unidade para medir pressao

data-tempo="unidade-temperatura" -> Unidade para medir temperatura

Previsão dos próximos dias

Para prever os próximos dias, basta acrescentar um indice ao valor do atributo desejado, por exemplo:

data-tempo="temperatura-1" -> Temperatura de amanha

data-tempo="temperatura-2" -> Temperatura daqui há 2 dias

data-tempo="temperatura-3" -> Temperatura daqui há 3 dias

data-tempo="temperatura-4" -> Temperatura daqui há 4 dias

OBS:O indice limite para previsão dos próximos dias é 4, sendo assim, so é possivel prever os próximos 4 dias.

Todos os valores dos atributos podem receber um indice, com excessão de: data-tempo="humidade", data-tempo="pressao", data-tempo="visibilidade", data-tempo="elevação", data-tempo="velocidade-vento", data-tempo="unidade-velocidade", data-tempo="unidade-distancia", data-tempo="unidade-pressao", data-tempo="unidade-temperatura"

Dependências

Weather Icons https://erikflowers.github.io/weather-icons/

Licença

FH Weather para jQuery é distribuído gratuitamente sob os termos de um estilo MIT licença .

Nota de direitos autorais e aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais do Software.