Bovespa em Tempo-Real! Registro Gratis Login

Tabela de conteúdo 1 INSERIR CAIXA DE ESCOLHA O ATIVO 2 CUSTOMIZAÇÃO DA CAIXA DE ESCOLHA O ATIVO 3 CUSTOMIZAÇÃO DA APARÊNCIA DA JANELA POP-UP 4 EXEMPLO INSERINDO O CÓDIGO NO MEIO DE TABELAS E IMAGENS

INSERIR CAIXA DE ESCOLHA O ATIVO

O script abaixo deve ser colocado no local onde a caixa para escolha do ativo irá aparecer. Lembrando que a única coisa que este script irá inserir será um simples formulário com dois campos: o código do ativo e o botão OK. Desta forma, você poderá configurar como desejar o que será colocado ao redor destes dois itens para incrementar o efeito visual. Por padrão, este formulário já estará 100% funcional, porém com o tema e cores da ADVFN. Para configurar a ferramenta com as cores do seu website, leia os próximos dois passos. Primeiro então insira o código abaixo no seu website e verifique o funcionamento:

<!-- INÍCIO DO CÓDIGO POP-UP DE COTAÇÃO ADVFN -->
	<script type="text/javascript">
		var advfn_pquote_parameters = new Object();
		advfn_pquote_parameters['main_background_color'] = "f0f0f0";
		advfn_pquote_parameters['text_primary_color'] = "000000";
		advfn_pquote_parameters['text_secondary_color'] = "ffffff";
		advfn_pquote_parameters['value_up'] = "1c8f34";
		advfn_pquote_parameters['value_down'] = "c20000";
		advfn_pquote_parameters['th_background_color'] = "9bc7d8";
		advfn_pquote_parameters['th_border_color'] = "4e7787";
		advfn_pquote_parameters['alt_background'] = "FFFFFF";
		advfn_pquote_parameters['hr_primary_color'] = "c5c5c5";
		advfn_pquote_parameters['hr_secondary_color'] = "ffffff";
		advfn_pquote_parameters['branding_image'] = "http://images.advfn.com/imagesnew/2/br/pquote/pquote-branding-advfn.jpg";
	</script>					
	<script src="http://www.advfn.com/static/pquote_input_br.js" type="text/javascript"></script>
<!-- TÉRMINO DO CÓDIGO POP-UP DE COTAÇÃO ADVFN -->

Resultado:

CUSTOMIZAÇÃO DA CAIXA DE ESCOLHA O ATIVO

Você poderá customizar completamente a aparência do formulário que aparecerá ao usuário para que ele escolha o ativo a ser consultado. Para isto, basta configurar as classes CSS já embutidas neste formulário. Confira abaixo:

#advfn_pquote_container (Define a DIV que envolve o formulário)

#advfn_pquote_input (Define o input onde o usuário digita o ativo)

#advfn_pquote_button (Define o botão de OK, que abrirá o Pop-Up)

Exemplo:

<style>
	#advfn_pquote_container input { border: 1px solid #000000; font-weight: bold; text-transform: uppercase; font-size: 12px; font-family: tahoma; }
	#advfn_pquote_input { width: 50px; padding-left: 3px; }
	#advfn_pquote_button { margin-left: 5px; width: 45px; }
</style>

Resultado:

CUSTOMIZAÇÃO DA APARÊNCIA DA JANELA POP-UP

Você poderá customizar completamente a aparência da janela que irá se abrir, inclusive colocar uma nova imagem no cabeçalho com a sua marca. Para isto, basta editar os valores definidos na variável advfn_pquote_parameters. Segue abaixo a descrição do que cada parâmetro faz:

Definir a imagem do cabeçalho (tamanho 600x55 pixels)

advfn_pquote_parameters['branding_image'] = "http://images.advfn.com/imagesnew/2/br/pquote/pquote-branding-advfn.jpg";

Definir a cor do fundo

advfn_pquote_parameters['main_background_color'] = "f0f0f0";

Definir a cor primária do texto

advfn_pquote_parameters['text_primary_color'] = "000000";

Definir a cor secundária do texto

advfn_pquote_parameters['text_secondary_color'] = "ffffff";

Definir a cor que será atribuida aos valores Positivos

advfn_pquote_parameters['value_up'] = "1c8f34";

Definir a cor que será atribuida aos valores Negativos

advfn_pquote_parameters['value_down'] = "c20000";

Definir a cor de fundo do cabeçalho das tabelas

advfn_pquote_parameters['th_background_color'] = "9bc7d8";

Definir a borda do fundo do cabeçalho das tabelas

advfn_pquote_parameters['th_border_color'] = "4e7787";

Definir a cor de fundo de linhas alternantes

advfn_pquote_parameters['alt_background'] = "FFFFFF";

Definir a cor primária do Divisor

advfn_pquote_parameters['hr_primary_color'] = "c5c5c5";

Definir a cor secundária do Divisor

advfn_pquote_parameters['hr_secondary_color'] = "ffffff";

Resultado sem alterar os parâmetros:

EXEMPLO INSERINDO O CÓDIGO NO MEIO DE TABELAS E IMAGENS

Verifique abaixo como não há limitações quanto a mesclar esta ferramenta no seu design.

Código:

	<style>
		#advfn_pquote_container input { border: 1px solid #000000; font-weight: bold; text-transform: uppercase; font-size: 12px; font-family: tahoma }
		#advfn_pquote_input { width: 50px; padding-left: 3px; }
		#advfn_pquote_button { margin-left: 5px; width: 45px; }
	</style>

	<table cellpadding="0" cellmargin="0">
		<tr>
			<td>
				<img src="http://www.insidernews.com.br/quote-box-icon.gif"">
			</td>

			<td style="padding-left: 5px">
				<img src="http://www.insidernews.com.br/quote-box-text.gif" style="margin-bottom: 3px">

				<script type="text/javascript">
					var advfn_pquote_parameters = new Object();
					advfn_pquote_parameters['main_background_color'] = "f0f0f0";
					advfn_pquote_parameters['text_primary_color'] = "000000";
					advfn_pquote_parameters['text_secondary_color'] = "ffffff";
					advfn_pquote_parameters['value_up'] = "1c8f34";
					advfn_pquote_parameters['value_down'] = "c20000";
					advfn_pquote_parameters['th_background_color'] = "494949";
					advfn_pquote_parameters['th_border_color'] = "000000";
					advfn_pquote_parameters['alt_background'] = "FFFFFF";
					advfn_pquote_parameters['hr_primary_color'] = "c5c5c5";
					advfn_pquote_parameters['hr_secondary_color'] = "ffffff";
					advfn_pquote_parameters['branding_image'] = "http://www.insidernews.com.br/insidernews-popup-cotacao-header.gif";
				</script>					
				<script src="http://www.advfn.com/static/pquote_input_br.js" type="text/javascript"></script>
			</td>
		</tr>
	</table>

Resultado da caixa para escolha do ativo:

Resultado da janela que irá se abrir: