Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 [F]lames

avatar
Membro


[TUTORIAL] Sistema de Lembretes

Bem vindo, neste tutorial, o senhor irá aprender a criar um botão que ficará localizado no canto inferior direito da tela, e ao clicar no mesmo, ele ativará um Sistema de Lembretes !


--> Tutoriais, dicas e astúcias <--
Sistema de Lembretes


- Noção básica da função:
As páginas JavaScript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

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

Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery que iremos estudar no próximo passo.
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas JavaScript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

- Código JavaScript:
Abaixo, está o script que iremos utilizar neste tutorial:

Código:
$(document).ready(function() {
   if($('li a.mainmenu[href^="/login?logout=1&tid="]:contains("Sair")').length) {
      $('body').prepend('<div class="remengroup" style="z-index: 999999;position: fixed;bottom: 0%;right: 0%;background: rgba(0, 0, 0, 0.5);color: #FFF;text-align: center;padding: 10px 22px 10px 22px;cursor: pointer;font-size: 13px;font-weight: lighter;font-family:Century Gothic;" onclick="$(\'#funybox\').slideDown();"><span>Lembretes</span></div>');
      $('body').prepend('<div id="funybox" style="top: 0%;"><div id="loginbox" class="window login_menu" style="height: 320px!important;"><div class="loginbox_content" style="height: 320px!important;"><div class="loginbox_head"><strong>Lembretes</strong><span class="fecha-funy"><a href="#" onClick="$(\'#funybox\').slideUp();" title="Fechar">x</a></span></div><div id="lembretes" style="font-family: Century Gothic; font-size: 14px;text-align: center;padding-top: 13px;">Deixar um lembrete:<br><br><input type="text" style="cursor: text !important;border: 1px solid #bfbfbf;border-radius: 2px;box-sizing: border-box;color: #444;font: inherit;margin: 0;min-height: 2em;padding: 3px;padding-bottom: 4px;width: 43em;" id="msg"><br><br><input type="button" value="Enviar" id="post-msg" style="-webkit-padding-end: 10px;-webkit-padding-start: 10px;min-height: 2.0em;min-width: 22em;font-weight: normal!important;padding-bottom: 4px!important;-webkit-appearance: none;background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede)!important;border: 1px solid rgba(0, 0, 0, 0.25)!important;border-radius: 2px!important;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);color: #444!important;font: inherit;margin: 0 1px 0 0;text-shadow: 0 1px 0 rgb(240, 240, 240);font-size: 14px!important;padding-top: 3px;"><br><br><br><div id="já-msg" style="font-family: Century Gothic!important;-webkit-appearance: none; -webkit-padding-end: 20px; -webkit-padding-start: 6px;background: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); background-position: right center; background-repeat: no-repeat;border: 1px solid rgba(0, 0, 0, 0.25)!important;border-radius: 2px!important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75)!important;color: #444;text-shadow: 0 1px 0 rgb(240, 240, 240);padding: 6px!important;width: 95%!important; text-align: center;cursor: pointer;margin-left: 13px;"><span onclick="jQuery(\'#ja-post, #hr-post\').fadeToggle();" style="font-style:italic;font-size:14px;font-weight:lighter;">Lembrete mais recente</span><hr style="margin-top: 8px; margin-left: -6px; width: 101.6%; border-style: solid none none; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.247059); margin-bottom: 8px; display: none;" id="hr-post"><div id="ja-post" style="display: none;"></div></div></div></div></div></div>');
      $('#post-msg').click(function() {
         $.cookie('lembret',jQuery('#msg').val());
         $('#ja-post').HTML($.cookie('lembret'));
      });
      $('#ja-post').HTML($.cookie('lembret'));
   }
});

/*!
 * $ Cookie Plugin v1.3.1
 * https://github.com/carhartl/$-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
 if (typeof define === 'function' && define.amd && define.amd.$) {
 // AMD. Register as anonymous module.
 define(['$'], factory);
 } else {
 // Browser globals.
 factory($);
 }
}(function ($) {

 var pluses = /\+/g;

 function raw(s) {
 return s;
 }

 function decoded(s) {
 return decodeURIComponent(s.replace(pluses, ' '));
 }

 function converted(s) {
 if (s.indexOf('"') === 0) {
 // This is a quoted cookie as according to RFC2068, unescape
 s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
 }
 try {
 return config.json ? JSON.parse(s) : s;
 } catch(er) {}
 }

 var config = $.cookie = function (key, value, options) {

 // write
 if (value !== undefined) {
 options = $.extend({}, config.defaults, options);

 if (typeof options.expires === 'number') {
 var days = options.expires, t = options.expires = new Date();
 t.setDate(t.getDate() + days);
 }

 value = config.json ? JSON.stringify(value) : String(value);

 return (document.cookie = [
 encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
 options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
 options.path    ? '; path=' + options.path : '',
 options.domain  ? '; domain=' + options.domain : '',
 options.secure  ? '; secure' : ''
 ].join(''));
 }

 // read
 var decode = config.raw ? raw : decoded;
 var cookies = document.cookie.split('; ');
 var result = key ? undefined : {};
 for (var i = 0, l = cookies.length; i < l; i++) {
 var parts = cookies[i].split('=');
 var name = decode(parts.shift());
 var cookie = decode(parts.join('='));

 if (key && key === name) {
 result = converted(cookie);
 break;
 }

 if (!key) {
 result[name] = converted(cookie);
 }
 }

 return result;
 };

 config.defaults = {};

 $.removeCookie = function (key, options) {
 if ($.cookie(key) !== undefined) {
 $.cookie(key, '', $.extend(options, { expires: -1 }));
 return true;
 }
 return false;
 };

}));


- Resultado
Botão de ativação (Canto inferior direito da tela):


Ao clicar no botão:


Ao escrever o lembrete e clicar no botão:


Ao ver o lembrete clicando em 'Lembrete mais recente':



- Perguntas


  • Funciona para quais versões ?
    Todas as versões, o código é de consistência própria, não utiliza textos, ou partes de seu fórum, a não ser o menu.





© SGBR & [F]lames


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA] Sistema de Lembretes
Ver perfil do usuário

#2
 'Fusion

avatar
Membro
Gostei tá de parabéns viu manow gostei ficou bem legal.

@Edit (22/02/2013) 12:23 : Tá de parabéns to usando e funciona perfeitamente.

Endereço de Contato: samuca_akira@hotmail.com

Link, Site ou Forum: http://weescheats.forumeiros.com/
Ver perfil do usuário samuca_akira@hotmail.com

#3
 D'Leandro™

avatar
Fundador
Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!


Por favor utilize o sistema hidecoment ( ) nos seus próximos tutoriais.
Ver perfil do usuário

#4
 Hades

avatar
Membro
Gostei tá de parabéns viu manow gostei ficou bem legal.
Ver perfil do usuário

#5
 'Fusion

avatar
Membro
Postando Pra Ver os códigos dnv.
Ver perfil do usuário samuca_akira@hotmail.com

#6
 Stark'

avatar
Membro
FUncionou Perfeitamente Mais Tirei o Code e Continua La o Lembrete .-.
Ver perfil do usuário

#7
 eusouogoku

avatar
Membro
Perfeito, muito bom, ja irei utiliza-lo
Ver perfil do usuário

#8
 The Boss

avatar
Novato
Efeito bem legal. Parabéns.
Ver perfil do usuário

#9
 iTrevaS

avatar
Membro
Perfeito tutorial!
Obrigado Staffer Group
Ver perfil do usuário

#10
 fascicularia

avatar
Membro
obrigado
Ver perfil do usuário

#11
 fascicularia

avatar
Membro
than,ks
Ver perfil do usuário

#12
 JQuery

avatar
Membro
up
Ver perfil do usuário

#13
 Superbomber

avatar
Membro
muito legal, :D

Assinatura:
Hacker Justice
Ver perfil do usuário

#14
 JQuery

avatar
Membro
hjhjjhjhnjnjkn
Ver perfil do usuário

#15
 Conteúdo patrocinado