[TUTORIAL] Função de carregamento em páginas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Função de carregamento em páginas

Mensagem por Luciano98 em 11/03/12, 06:25 pm



Função de carregamento em páginas


Em sites com toques profissionais encontramos scripts interessantes de quando clicamos em um link que redireciona para outra página emite um efeito "carregando". Neste tutorial vamos usar um efeito Jquery especial que vai reproduzir este efeito.


--> Tutoriais, dicas e astúcias <--
Função de carregamento em páginas



- Noção da função páginas javascript:
Para que seja possível proceguir é importante que saiba que precisamos ter conhecimento básico sobre a função Página javascript que temos em nosso painel de controle.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts

Seta Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas.
Seta Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Clique no botão "Criar um novo javascript" para passar-mos para o próximo passo.

- Criar o script:
Com a página de javascript aberta em seu painel de controle, teremos que adicionar um JS o qual fará com que uma página seja exibida a cada carregamento de página.
Em 'Investimento', marque para o efeito ser reproduzido "Em todas as páginas".

Código:
/**
 * Create a loading page while the current page is loading.
 * @author: Luiz~
 * @see: <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence: MIT
 */
(function ($) {
  'use strict';
 
  /**
  * Main Config:
  */
  var config = {
    'icon': 'fa-spin',
    'background': '#39c',
  };
 
  var marginTopQtt = ( $(window).height() / 2 ) - 60;
 
  var style = [
    '.page-loader {',
    '  position: fixed;',
    '  background-color: ' + config.background + ';',
    '  top: 0;',
    '  bottom: 0;',
    '  left: 0;',
    '  right: 0;',
    '  z-index: 99999999;',
    '  text-align: center;',
    '  color: #fff;',
    '  font-size: 20px;',
    '  opacity: 1;',
    '  -moz-transition: all 200ms;',
    '  -webkit-transition: all 200ms;',
    '  -ms-transition: all 200ms;',
    '  -o-transition: all 200ms;',
    '  transition: all 200ms;',
    '}',
    '',
    '.page-loader-close {',
    '  opacity: 0;',
    '  z-index: -99999999;',
    '  pointer-events: none;',
    '}',
    '',
    '.page-loader i.fa {',
    '  position: fixed;',
    '  margin-top: ' + marginTopQtt + 'px;',
    '}',
  ].join('\n');
 
 
  $('<style>', { text: style }).appendTo('head');
 
  $('body')
    .append([
      '<div class="page-loader">',
      '  <i class="fa fa-circle-o-notch ' + config.icon + ' fa-3x fa-fw"></i>',
      '</div>',
    ].join('\n'))
  ;
 
  $(window).on('load', function () {
    $('.page-loader').addClass('page-loader-close');
  });
 
}(jQuery));
Depois de criar o script, o resultado já estará visível.



© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Função de carregamento em páginas
avatar

Luciano98
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11046

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum