Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

495 lines (471 sloc) 30.634 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Abril ID - Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.footer {
padding: 70px 0;
margin-top: 70px;
border-top: 1px solid #e5e5e5;
background-color: #f5f5f5;
}
.footer p {
margin-bottom: 0;
color: #777;
}
.footer-links {
margin: 10px 0;
}
.footer-links li {
display: inline;
margin-right: 10px;
}
/* Pattern overlay
------------------------- */
.superior {
position: relative;
padding: 40px 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #6eabcf 0%, #0033db 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#0033db), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #6eabcf 0%,#0033db 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #6eabcf 0%,#0033db 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #6eabcf 0%,#0033db 100%); /* IE10+ */
background: linear-gradient(45deg, #6eabcf 0%,#0033db 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6eabcf', endColorstr='#0033db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
.superior h1 {
font-size: 80px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
}
.superior p {
font-size: 24px;
font-weight: 300;
line-height: 30px;
margin-bottom: 30px;
}
/* Sidenav for Docs
-------------------------------------------------- */
.bs-docs-sidenav {
width: 228px;
margin: 30px 0 0;
padding: 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
display: block;
*width: 190px;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
position: relative;
z-index: 2;
padding: 9px 15px;
border: 0;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
background-image: url(../img/glyphicons-halflings-white.png);
opacity: 1;
}
.bs-docs-sidenav.affix {
top: 40px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
/* Bootstrap code examples
-------------------------------------------------- */
/* Base class */
.bs-docs-example {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Echo out a label for the example */
.bs-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
margin-top: -20px;
padding-top: 15px;
}
/* Tweak examples
------------------------- */
.bs-docs-example > p:last-child {
margin-bottom: 0;
}
.bs-docs-example .table,
.bs-docs-example .progress,
.bs-docs-example .well,
.bs-docs-example .alert,
.bs-docs-example .hero-unit,
.bs-docs-example .pagination,
.bs-docs-example .navbar,
.bs-docs-example > .nav,
.bs-docs-example blockquote {
margin-bottom: 5px;
}
.bs-docs-example .pagination {
margin-top: 0;
}
/* Images */
.bs-docs-example-images img {
margin: 10px;
display: inline-block;
}
/* Popovers */
.bs-docs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-docs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: 70px 0;
margin-top: 70px;
border-top: 1px solid #e5e5e5;
background-color: #f5f5f5;
}
.footer p {
margin-bottom: 0;
color: #777;
}
.footer-links {
margin: 10px 0;
}
.footer-links li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- BARRA TOP -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">BootsTrap - Abril ID</a>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="documentacao.html">Documenta&ccedil;&atilde;o</a></li>
<li><a href="passo-a-passo.html">Passo a Passo</a></li>
<li><a href="customizacao.html">Customiza&ccedil;&atilde;o</a></li>
<li><a href="cases.html">Cases</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
</div>
</div>
<!-- Subhead
================================================== -->
<div class="superior" id="overview">
<div class="container">
<h1>Documentação - Abril ID</h1>
<p class="lead">Manual de implementação do Abril ID, prático e rápido.</p>
</div>
</div>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#infBasica"><i class="icon-chevron-right"></i> Inf Basicas</a></li>
<li><a href="#comoUsar"><i class="icon-chevron-right"></i> Como Usar</a></li>
</ul>
</div>
<div class="span9">
<br />
<section id="infBasica">
<br />
<div class="page-header">
<h1>Informações Básicas sobre o Abril ID</h1>
</div>
<div class="alert alert-error">
<strong>Atenção </strong> A versão 3.x do Abril ID é totalmente retrocompatível com suas versões anteriores, ou seja, é possível instanciar o objeto AbrilId utilizando uma das 3 formas existentes.
</div>
<p></p>
<div class="alert alert-info">O Abril ID é compatível e está homologado para os seguinte web browsers:</br>Internet Explorer 7.x, 8.x e 9.x;</br>Mozilla Firefox 3.5, 3.6 e 5.x ou maior;</br>Google Chrome 10.x ou maior;</br>Safari 5.0 ou maior;</br>
</div>
<div class="bs-docs-example">
<div class="alert alert-error">
<strong>Atenção</strong> Caso queira garantir que o Internet Explorer 8.x do usuário abra utilizando o modo de exibição Internet Explorer 8, utilize a seguinte metatag:
</div>
</div>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; /&gt;</code></span></ol></pre>
</section>
<br />
<section id="comoUsar">
<div class="page-header">
<h1>Como usar</h1>
</div>
<strong>Pré-requisitos</strong>
<div class="alert alert-info"><strong>NÃO</strong> é necessário que o site cliente esteja dentro do domínio <strong>abril.com.br</strong>, uma vez que o Abril Id possui suporte cross-domain. Contudo, é necessário comunicar a equipe do Abril Id do uso cross-domain, para que seja feita a liberação para o domínio específico do site;</div>
<div class="alert alert-info">Observar se o ambiente de desenvolvimento está impedido de acessar o ambiente de homologação do Abril ID <strong>(http://qa.id.abril.com.br)</strong>. Verificar configurações de proxy ou firewall.</div>
<strong>Instalação</strong>
<div class="bs-docs-example">
<p>Para deixar disponível as funcionalidades do Abril ID nas páginas do seu site, inclua a linha abaixo em todas as páginas onde o Abril Id for necessário:</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script src=&quot;http://id.abril.com.br/javascripts/widgets.js&quot;&gt;&lt;/script&gt;</code></span></ol></pre>
</div>
<div class="alert alert-error">
<strong>Atenção</strong> para realizar testes em nosso ambiente de homologação utilize a URL +http://qa.id.abril.com.br/javascripts/widgets.js
</div>
<strong>Configuração Mínima</strong>
<p>Para que o Abril Id funcione propriamente em seu site, duas configurações são obrigatórias. Um exemplo seguido de explicação detalhada segue abaixo.</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao = {<br />&nbsp;&nbsp&nbsp;&nbsp;produto:'ID_DO_SEU_SITE',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'ID_DA_DIV'<br />&nbsp;&nbsp;};<br />&lt;/script&gt;</code></span></ol></pre>
<p>produto: representa o ID do seu site no Abril Id. Para obter este ID, entre em contato com a equipe do Abril Id;</p>
<p>container: é o ID da div em que o Abril Id será gerado. <strong>ATENÇÃO: você deve criar essa div em seu site</strong>.</p>
<strong>Instanciando o Abril ID</strong>
<p>Após criar a configuração, basta instanciar o Abril Id para começar a usá-lo. Isso é feita da maneira exemplificada abaixo.</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbspvar exemplo = new AbrilId();<br />&nbsp;&nbsp;exemplo.initialize(configuracao);<br />&lt;/script&gt;</code></span></ol></pre>
<div class="alert alert-error">
<strong>Atenção</strong> é possível instanciar um componente WIDGET, um componente INCLUDE e um componente TOPO numa mesma página. Contudo, não é possível instanciar dois componentes do mesmo tipo. Segue exemplo abaixo.*
</div>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao_widget = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'site',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'div_widget',<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.WIDGET<br />&nbsp;&nbsp;};<br /><br />&nbsp;&nbsp;var configuracao_include = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'site',<br />&nbsp;&nbsp;&nbsp;&nbsp;container:'div_include',<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.INCLUDE<br />&nbsp;&nbsp;};<br /><br />&nbsp;&nbsp;var configuracao_topo = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'site',<br />&nbsp;&nbsp;&nbsp;&nbsp;container:'div_topo',<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.TOPO<br />&nbsp;&nbsp;};<br /><br />&nbsp;&nbsp;var novowidget = new AbrilId();<br />&nbsp;&nbsp;novowidget.initialize(configuracao_widget);<br /><br />&nbsp;&nbsp;var novoinclude = new AbrilId();<br />&nbsp;&nbsp;novoinclude.initialize(configuracao_include);<br /><br />&nbsp;&nbsp;var novotopo = new AbrilId();<br />&nbsp;&nbsp;novotopo.initialize(configuracao_topo);<br />&lt;/script&gt;</code></span></ol></pre>
<div class="alert alert-error">
<strong>Atenção</strong>para que o Abril ID funcione propriamente no Internet Explorer 7, 8 e 9, é necessário que o código acima (configuração, criação da instância e inicialização) esteja na mesma página que a chamada para o widgets.js. Não coloque esta parte do código num arquivo externo a ser carregado na página.
</div>
<strong>Configurações Opcionais</strong>
<p>Além das configurações mínimas, o cliente pode fornecer alguns parâmetros com funções específicas. Abaixo seguem alguns exemplos que incluem as configurações obrigatórias e as opcionais.</p>
<strong>Provedores</strong>
<p><strong>Descrição:</strong>Este parâmetro permite a ativação/desativação do login via redes sociais (Facebook, Twitter ou Google Accounts). Na interface dos componentes Widget ou Include de login a diferença visual é a presença dos diferentes botões das redes sociais ou nenhum botão (quando desabilitados) para login alternativo no Abril ID, impossibilitando o usuário final de fazer uso deste recurso.</p>
<p><strong>Padrão:</strong>caso não declare, por padrão serão exibidos os botões de todas as redes sociais disponíveis (Facebook, Twitter e Google Accounts).</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'ID_DO_SEU_SITE',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'ID_DA_DIV',<br />&nbsp;&nbsp;&nbsp;&nbsp;provedores: ['facebook', 'google']&nbsp;&nbsp;//par&acirc;metro para ativar/desativar login via redes sociais<br />&nbsp;&nbsp;};<br />&lt;/script&gt;</code></span></ol></pre>
<p><strong>Uso:</strong>dentro da configuração é necessário declarar um array contendo os provedores desejados, na ordem em que devem aparecer. Exemplo:</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>provedores: ['facebook'] //apenas facebook<br />provedores: ['facebook','google'] //facebook e google<br />provedores: ['google','twitter'] //google e twitter<br />provedores: [] //nenhum provedor</code></span></ol></pre>
<strong>Componente</strong>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />var configuracao = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'ID_DO_SEU_SITE',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'ID_DA_DIV',<br />&nbsp;&nbsp;&nbsp;&nbsp;provedores: ['facebook', 'google'],<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.INCLUDE //par&acirc;metro determinar tipo de componente<br />&nbsp;&nbsp;};<br />&lt;/script&gt;</code></span></ol></pre>
<p><strong>Descrição:</strong>Este parâmetro define qual o tipo de componente que será carregado. Atualmente existem 3 valores possíveis: Componente.WIDGET, Componente.INCLUDE ou Componente.TOPO. Este parâmetro determina uma série de modificações na interface, de forma a alterar a cara dos dados de forma a ser um componente Widget ou um Include.</p>
<div class="alert alert-error">
<strong>Atenção</strong>alguns componentes possuem apenas certas interfaces, como mostrado na tabela abaixo.
</div>
<table class="table table-bordered table-striped responsive-utilities">
<thead><tr>
<th>Interface</th>
<th>Componente.Widget</th>
<th>Componente.Include</th>
<th>Componente.TOPO</th></tr></thead>
<tbody><tr>
<th><strong>Login</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
</tr>
<tr>
<th><strong>Logout</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Possui</td>
</tr>
<tr>
<th><strong>Recuperação de senha</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
</tr>
<tr>
<th><strong>Criação de conta</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
</tr>
<tr>
<th><strong>Validação de senha</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Não Possui</td>
</tr>
<tr>
<th><strong>Edição completa de perfil</strong></th>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Possui</td>
<td class="is-visible">Não Possui</td>
</tr>
<tr>
<th><strong>Edição básica de perfil</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
<td class="is-visible">Possui</td>
</tr>
<tr>
<th><strong>Alteração de senha</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Não Possui</td>
</tr>
<tr>
<th><strong>Coleta de dados</strong></th>
<td class="is-visible">Possui</td>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Não Possui</td>
</tr>
<tr>
<th><strong>Newsletter</strong></th>
<td class="is-visible">Não Possui</td>
<td class="is-visible">Possui</td>
<td class="is-hidden">Não Possui</td>
</tr></tbody></table>
<div class="alert alert-info"><strong>*Padrão:</strong>caso não declare, por padrão o componente será Componente.WIDGET.</div>
<div class="alert alert-info"><strong>*Uso:</strong>dentro da configuração é possível indicar qual o tipo da interface que deve ser carregada.</div>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>Componente: Componente.WIDGET //a interface aparecer&aacute; como um Widget<br />componente: Componente.INCLUDE //a interface aparecer&aacute; como um Include<br />componente: Componente.TOPO //a interface aparecer&aacute; como um Topo</code></span></ol></pre>
<p><strong>Seta</strong></p>
<div class="alert alert-error">
<strong>Atenção: alguns componentes possuem apenas certas interfaces, como mostrado na tabela abaixo.</strong>
</div>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'ID_DO_SEU_SITE',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'ID_DA_DIV',<br />&nbsp;&nbsp;&nbsp;&nbsp;provedores: ['facebook', 'google'],<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.WIDGET,<br />&nbsp;&nbsp;&nbsp;&nbsp;seta: 'SD' //par&acirc;metro para posicionar uma seta indicativa no topo do componente Widget<br />&nbsp;&nbsp;};<br />&lt;/script&gt</code></span></ol></pre>
<strong>Descrição:</strong> Este parâmetro permite o posicionamento de uma seta indicativa na parte superior de um componente Widget. Os valores possíveis são indicativos da posição da seta: 'SE' (superior direita), 'SC' (superior centro), 'SD' (superior direita).
<strong>Padrão:</strong> caso não declare, por padrão o componente Widget não exibirá nenhuma seta indicativa.
<strong>Uso:</strong> os valores possíveis são indicativos da posição da seta: 'SE' (superior direita), 'SC' (superior centro), 'SD' (superior direita).
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>seta: 'SD' //seta no canto superior direito<br />seta: 'SC' //seta no centro, na parte superior<br />seta: 'SE' //seta no canto superior esquerdo</code></span></ol></pre>
<div class="alert alert-error"><strong>Observação:</strong>a seta não pode ser utilizada no componente TOPO</div>
<p><strong>Estilo</strong></p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'ID_DO_SEU_SITE',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'ID_DA_DIV',<br />&nbsp;&nbsp;&nbsp;&nbsp;provedores: ['facebook', 'google'],<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.WIDGET,<br />&nbsp;&nbsp;&nbsp;&nbsp;seta: 'SD',<br />&nbsp;&nbsp;&nbsp;&nbsp;estilo:{ //in&iacute;cio da configura&ccedil;&atilde;o de estilo<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'general': {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color':'#4f6068', //cor do background da caixa do widget//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color':'#111a33', //cor da borda da caixa do widget//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-width':'1', //largura da borda da caixa do widget, sem o 'px' - minimo: 1, maximo: 5//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-color':'#DDCCBB', //cor do 'X' para fechar o widget e de todos os textos do widget, exceto erros e botoes//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'inner-border-color':'#010729' //cor da borda da caixa interna, do separador e da borda dos campos//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'inner-box':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color':'#66777f' //cor do background da caixa interna do widget//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'button':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'stroke':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-color':'#ffffff' , //cor de fonte do botao com gradiente//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'start':'#020926', //cor inicial do gradiente do botao//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'end':'#020926' //cor final do gradiente do botao//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color':'#020926' //cor de borda do botao com gradiente//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'flat':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-color':'#ffffff' , //cor de fonte do botao sem gradiente//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color':'#020926', //cor de fundo do botao sem gradiente//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color':'#020926' //cor de borda do botao sem gradiente//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'error':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color':'#66777f', //cor fundo da caixa de erro//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color':'#020926', //cor de borda da caixa de erro//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-color':'#ffffff' //cor do texto da caixa de erro e da borda dos campos indicados no erro//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'header':{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'type': 'light' //'default': logotipo verde, assinatura cinza escuro | 'light': logotipo e assinatura brancos//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'topo': {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color': {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'start': '#CCCCCC', //cor inicial do gradiente do fundo//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'end': '#CCCCCC' //cor final do gradiente do fundo//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'line-color':'#888888', //cor do separador //<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-color':'#888888', //cor dos textos do topo //<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color':'#888888', // cor da borda do topo, caso haja //<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-width':'2', // espessura da borda - de 2 a 5 - default 0//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'logo':'default' // 'default' (verde)|'white' (branco)|'light grey' (cinza claro)|'grey' (cinza)|'black' (preto)&nbsp;&nbsp;//<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;};<br />&lt;/script&gt</code></span></ol></pre>
<p><strong>Descrição:</strong> este parâmetro permite a configuração de layout de praticamente todas as estruturas dos componentes Widget e Include.</p>
<p><strong>Padrão:</strong> o usuário pode declarar de nenhuma a todas as configurações de layout, e qualquer atributo que não for declarado receberá seu layout padrão.</p>
<p><strong>Uso:</strong> é necessário preencher os atributos com os valores cabíveis (por exemplo, uma cor hexadecimal)</p>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />...<br />origem_evento: 'Um texto que descreva a origem'<br />//origem_evento: 'Promo&ccedil;&atilde;o Voc&ecirc; em NY'<br />//origem_evento: 'Promo&ccedil;&atilde;o Tititi Premios Todo Dia' <br />//origem_evento: 'Casa Curso de Decora&ccedil;&atilde;o ed 2012'<br />...<br />&lt;/script&gt;</code></span></ol></pre>
<p><strong>Exibindo o Abril ID</strong></p>
<p>Após instalar e configurar o Abril ID, você pode exibir a interface escolhida em seu site atravé de apenas um comando, que pode estar relacionado a uma ação do usuário (um click, por exemplo) ou ao carregamento da página. Segue uma tabela com o comando que chama cada um uma das interfaces.</p>
<table class="table table-bordered table-striped responsive-utilities">
<thead><tr>
<th>Interface</th>
<th>Chamada</th>
<tbody><tr>
<th><strong>Login</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].login.render();</td>
</tr>
<tr>
<th><strong>Logout</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].logout.render();</td>
</tr>
<tr>
<th><strong>Recuperação de senha</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].password_reset.render();</td>
</tr>
<tr>
<th><strong>Criação de conta</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].signup.render();</td>
</tr>
<tr>
<th><strong>Validação de senha</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].password_validation.render();</td>
</tr>
<tr>
<th><strong>Edição completa de perfil</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].profile_update.render();</td>
</tr>
<tr>
<th><strong>Alteração de senha</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].password_update.render();</td>
</tr>
<tr>
<th><strong>Edição básica de perfil</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].profile_update.render();</td>
</tr>
<tr>
<th><strong>Coleta de dados</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].profile_attribute.render();</td>
</tr>
<tr>
<th><strong>Newsletter</strong></th>
<td class="is-visible">[INSTANCIA DO SEU COMPONENTE].newsletter.render();</td>
</tr>
</tbody></table>
<pre class="prettyprint linenums"><ol class="linenums"><span class="pln"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;var configuracao = {<br />&nbsp;&nbsp;&nbsp;&nbsp;produto:'site',<br />&nbsp;&nbsp;&nbsp;&nbsp;container: 'div_widget',<br />&nbsp;&nbsp;&nbsp;&nbsp;componente: Componente.WIDGET<br />&nbsp;&nbsp;};<br /><br />&nbsp;&nbsp;var widget = new AbrilId();<br />&nbsp;&nbsp;widget.initialize(configuracao);<br />&lt;/script&gt;<br /><br />...<br /><br />&lt;a href=&quot;javascript: void(0);&quot; onclick=&quot;widget.login.render();&quot;&gt;login&lt;/a&gt;</code></span></ol></pre>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">
<div class="container">
<p class="pull-right"><a href="#">Voltar ao topo</a></p>
<p>Entre em contato com nossa equipe: <a href="mailto:nucleo-aap@abril.com.br">abrilid@abril.com.br</p>
<p>Copyright &copy; 2012 Editora Abril S/A. Todos os direitos reservados</p>
<ul class="footer-links">
<li><a href="http://id.abril.com.br">Abril ID</a></li>
<li><a href="https://confluence.abril.com.br/x/uxZF">Documentação oficial</a></li>
</ul>
</div>
</footer>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.