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

Ir para baixo

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

Mensagem por Luciano98 11.03.12 21:25


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

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

[TUTORIAL] Função de carregamento em páginas Painel13
[TUTORIAL] Função de carregamento em páginas 110111Seta 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.
[TUTORIAL] Função de carregamento em páginas 110210Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Função de carregamento em páginas 110310Seta 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.
[TUTORIAL] Função de carregamento em páginas 110410Seta 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


[TUTORIAL] Função de carregamento em páginas Act_bottom 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
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos