Constrói a barra de botões flutuante
Veja também classe_interface.js (i3GEO.Interface) que possuí parâmetros que permitem ajustar a posição das barras no mapa
i3GEO.barraDeBotoes
Para alterar as opções modifique as propriedades colocando um código como o seguinte no javascript utilizado na interface de mapa que estiver sendo utilizada
i3GEO.barraDeBotoes.tipo = “olhodepeixe1”;
http://localhost
Barra de botões | Constrói a barra de botões flutuante |
Variaveis | |
BARRAS | Array com os objetos YAHOO.i3GEO.janela.botoes criados |
BOTAOCLICADO | Último icone que foi clicado |
Propriedades | |
ATIVA | Indica se a barra de botões será ou não cosntruída automaticamente no processo de inicialização do mapa. |
TIPO | Tipo de barra. |
OFFSET | Ajuste do deslocamento vertical da barra (válido apenas para o tipo “olhodepeixe”) |
POSICAO | Define o posicionamento da barra de botões do tipo olhodepeixe |
MAXBOTOES | Número de botões iniciais (válido apenas para os tipos olho de peixe) |
AJUDA | Mostra um texto de ajuda colado ao ícone da ferramenta |
ORIENTACAO | Orientação vertical ou horizontal da barra (não se aplica aos tipos olhos de peixe) |
HORIZONTALW | Largura da barra quando ORIENTACAO = “horizontal” (não se aplica aos tipos olhos de peixe) |
TIPOAJUDA | Tipo do balão de ajuda que é mostrado colado ao ícone da ferramenta |
SOICONES | Esconde as bordas das barras e o fundo, mostrando apenas os ícones (não se aplica aos tipos olhos de peixe) |
AUTOALTURA | Ajusta automaticamente a altura das barras conforme a altura do mapa. |
TRANSICAOSUAVE | Altera a transparência das barras quando o mouse sobrepõe a barra e quando sai da barra (não se aplica aos tipos olhos de peixe) |
OPACIDADE | Valor da opacidade miníma utilizada quando TRANSICAOSUAVE for igual a true. |
PERMITEFECHAR | Mostra o botão para fechar as barras ou não. |
PERMITEDESLOCAR | Permite deslocar as barras ou não. |
AUTO | Cria as barras de botões automaticamente, utilizando os botões padrão sem considerar a lista de botões definidas no HTML da interface. |
LISTABOTOES | Objeto com a lista de botões e suas propriedades, como por exemplo, a função a ser executada ao se clicar no botão. |
INCLUIBOTAO | Objeto que indica quais os botões que serão inseridos na barra de botões 2. |
ICONEBOTAO | Ícones utilizados em cada um dos botões da barra. |
TEMPLATEBOTAO | Template HTML que será utilizado na construção automática dos botões da barra 2. |
BOTAOPADRAO | Botão que será ativado ao inicializar os botões com ativaBotoes. |
COMPORTAMENTO | Define o comportamento dos botões quando é pressionado |
Functions | |
adicionaBotao | Adiciona um novo botao nas definicoes da barra de botoes |
ativaPadrao | Ativa o botão definido como padrão, executando a função definida em onclick |
ativaIcone | Altera as bordas de um ícone aplicando um efeito de ícone realçado. |
ativaBotoes | Ativa os botoes definidos em LISTABOTOES |
execBotao | Com base no código de um botão (iddiv), obtém a função armazenada em i3GEO.barraDeBotoes.LISTABOTOES e executa. |
defBotao | Obtém as definições de um botão conforme o seu código (iddiv) |
inicializaBarraOP | Inicializa a barra de botões quando for do tipo “olhodepeixe” ou “olhodepeixe1” |
inicializaBarra | Inicializa a barra de botões |
reativa | Reativa as barras de ferramentas já criadas |
recria | Recria uma barra de ferramentas já aberta aplicando os parâmetros de configuração definidos (variáveis) |
fecha | Fecha uma barra de ferramentas |
i3GEO. | Editor vetorial |
Functions | |
inicia | Abre as opções do editor conforme a interface em uso |
Tipo de barra.
Por padrão, utiliza a biblioteca YUI para construir a barra, opcionalmente pode-se utilizar outro tipo.
Se for utilizado o padrão YUI e os elementos para compor a barra não forem encontrados, a barra não será criada.
O tipo emlinha insere os botões em um elemento html qualquer já existente na página. Nesse caso a barra não é iniciada automaticamente, sendo necessário usar a função
i3GEO.barraDeBotoes.inicializaBarra(“”,””,false,0,0,onde)
Caso o parâmetro "onde" seja omitido ou o o elemento HTML com esse ID não for encontrado, será criado um elemento do tipo DIV no contexto do mapa.
Se você quer usar a barra do tipo olho de peixe e seu mapa tiver tamanho fixo, utilize o tipo "olhodepeixe1"
{string}
{yui}
{“yui”,”olhodepeixe”,”olhodepeixe1”,”emlinha”}
Objeto com a lista de botões e suas propriedades, como por exemplo, a função a ser executada ao se clicar no botão.
Essa lista não indica quais os botões que serão inseridos. Para definir os botões que serão inseridos, inclua no HTML da interface os botões desejados (veja em i3geo/exemplos). Se vc utilizar a opção i3GEO.barraDeBotoes.AUTO = true , os botões serão inseridos automaticamente. Nesse caso, utilize a opção i3GEO.barraDeBotoes.INCLUIRBOTOES para indicar os botões desejados.
Por default utiliza os botoes definidos em i3GEO.configura.funcoesBotoes.botoes
{objeto}
Objeto que indica quais os botões que serão inseridos na barra de botões 2.
Essa opção só funciona se i3GEO.barraDeBotoes.AUTO = true
Vc pode também alterar a ordem dos botoes ou adicionar novos
Na barra de botões do tipo “yui”, as chaves serão adicionadas como o atributo “id” em cada botão. Nesse caso, é possível definir o estilo CSS para cada botão (veja em i3geo/css/botoes2.css).
A ativação de cada botão, ou seja, a função que é executada ao ser feito o clique, é definida em i3GEO.configura.funcoesBotoes
INCLUIBOTAO: {
abreJanelaLegenda: false,
zoomli: false,
zoomiauto: false,
zoomoauto: false
pan: false,
zoomtot:false,
identifica: true,
identificaBalao: true,
mede: true,
area: true,
imprimir: true,
reinicia: true,
exten: true,
referencia: true,
inserexy: true,
textofid: true,
selecao: true,
barraedicao: false,
google: true,
buscafotos: true,
wiki: true,
metar: true,
lentei: true,
confluence: true,
inseregrafico: true,
v3d: true,
localizar: true,
zoomproximo: true,
zoomanterior: true }
{objeto}
Ícones utilizados em cada um dos botões da barra.
Esses ícones são utilizados apenas se i3GEO.barraDeBotoes.TIPO = “olhodepeixe” e “olhodepeixe1”. Para cada elemento existente em i3GEO.barraDeBotoes.INCLUIBOTAO deve existir um elemento nesse objeto. A chave de cada elemento é a mesma do objeto INCLUIBOTAO. O endereço da imagem será complementado pelo i3geo, adicionando no início da string o valor da variável i3GEO.configura.locaplic
ICONEBOTAO: {
zoomli: “/imagens/gisicons/eudock/zoom-region.png”,
zoomproximo: “/imagens/gisicons/eudock/zoom-next.png”,
zoomanterior: “/imagens/gisicons/eudock/zoom-last.png”,
pan: “/imagens/gisicons/eudock/pan.png”,
zoomtot: “/imagens/gisicons/eudock/zoom-extent.png”,
identifica: “/imagens/gisicons/eudock/identify.png”,
identificaBalao: “/imagens/gisicons/eudock/tips.png”,
mede: “/imagens/gisicons/eudock/length-measure.png”,
area: “/imagens/gisicons/eudock/area-measure.png”,
imprimir: “/imagens/gisicons/eudock/print.png”,
reinicia: “/imagens/gisicons/eudock/redraw.png”,
exten: “/imagens/gisicons/eudock/map-extent-info.png”,
referencia: “/imagens/gisicons/eudock/map-reference.png”,
inserexy: “/imagens/gisicons/eudock/point-create.png”,
textofid: “/imagens/gisicons/eudock/text-add.png”,
selecao: “/imagens/gisicons/eudock/select.png”,
google: “/imagens/gisicons/eudock/google-map.png”,
buscafotos: “/imagens/gisicons/eudock/fotos.png”,
wiki: “/imagens/gisicons/eudock/wiki.png”,
metar: “/imagens/gisicons/eudock/metar.png”,
lentei: “/imagens/gisicons/eudock/lente.png”,
confluence: “/imagens/gisicons/eudock/confluence.png”,
inseregrafico: “/imagens/gisicons/eudock/grafico.png”,
v3d: “/imagens/gisicons/eudock/v3d.png”,
barraedicao: “/imagens/gisicons/eudock/editopen.png”,
localizar: “/imagens/gisicons/eudock/search.png”,
abreJanelaLegenda: “/imagens/gisicons/eudock/legenda.png” }
{objeto}
Template HTML que será utilizado na construção automática dos botões da barra 2.
Utilize a string $$ para indicar onde será incluído o código do botão.
Default: “<div style=’display:inline;background-color:rgb(250,250,250);’> <p style=’font-size:2px;’> </p> <img src=’”+i3GEO.configura.locaplic+”/imagens/branco.gif’ id=’$$’/></div>”
{string}
Define o comportamento dos botões quando é pressionado
{String}
”padrao” | comportamento padrão, com bordas da esquerda e inferiores ativadas |
”destacado” | destaca apenas o botão atualmente pressionado |
”vermelho” | destaca com fundo vermelho |
”laranja” | destaca com fundo laranja |
”cinza” | destaca com fundo cinza |
adicionaBotao : function( obj )
Adiciona um novo botao nas definicoes da barra de botoes
O Objeto deve ser como no exemplo abaixo
”/imagens/oxygen/22x22/user-online.png”, funcaoonclick:function(){ alert(“Meu novo botao com ID = meubotao”); } } );
ativaIcone : function( icone )
Altera as bordas de um ícone aplicando um efeito de ícone realçado.
Todos os demais ícones definidos em LISTABOTOES e que tiverem o tipo = “dinamico” serão processados para alterar as bordas dando o efeito de não ativo.
{String} | id do icone que será ativado. Esse id é o mesmo definido em LISTABOTOES |
ativaBotoes : function( padrao )
Ativa os botoes definidos em LISTABOTOES
Os botoes são construídos e as funções definidas são embutidas no evento onclick
{String} | botao que será mostrado como ativo (opcional). Se não for definido, será utilizado o botão especificado em BOTAOPADRAO. O nome do botao deve estar em LISTABOTOES na propriedade iddiv |
execBotao : function( id, x, y, posX, posY )
Com base no código de um botão (iddiv), obtém a função armazenada em i3GEO.barraDeBotoes.LISTABOTOES e executa.
{string} | identificador do botão, conforme definido no elemento iddiv de i3GEO.barraDeBotoes.LISTABOTOES |
{numeric} | (opcional) posição em pixels da tela onde foi feito o clique do mouse |
{numeric} | (opcional) posição em pixels da tela onde foi feito o clique do mouse |
inicializaBarra : function( idconteudo, idconteudonovo, barraZoom, x, y, onde )
Inicializa a barra de botões
A barra de zoom é inserida automaticamente na barra de botoes 1 se esta existir
Caso i3GEO.barraDeBotoes.TIPO === “olhodepeixe” os parâmetros são ignorados.
if ($i(“barraDeBotoes1”))
i3GEO.barraDeBotoes.inicializaBarra(“barraDeBotoes1”,”i3geo_barra1”,true,x1,y1);
if ($i(“barraDeBotoes2”))
i3GEO.barraDeBotoes.inicializaBarra(“barraDeBotoes2”,”i3geo_barra2”,false,x2,y2);
i3GEO.barraDeBotoes.BARRAS[1].show();
{String} | id do elemento existente no HTML e que contém as definições dos botões |
{String} | id do elemento que será criado para adicionar os botoões |
{boolean} | indica se a barra de zoom será incluída |
{Numeric} | posição x (pixels) da barra em relação ao mapa |
{Numeric} | posição y (pixels) da barra em relação ao mapa |
{String} | (opcional) id do elemento HTML onde os botões serão inseridos |
reativa : function( indice )
Reativa as barras de ferramentas já criadas
Essa opção apenas aplica o método “show” aos objetos armazenados em i3GEO.barraDeBotoes.BARRAS
Se a barra não existir previamente, nada irá contecer
{Integer} | índice do array BARRAS que guarda os objetos YAHOO com as barras Se não for definido, todas as barras serão reativadas |
Adiciona um novo botao nas definicoes da barra de botoes
adicionaBotao : function( obj )
Ativa o botão definido como padrão, executando a função definida em onclick
ativaPadrao : function()
Altera as bordas de um ícone aplicando um efeito de ícone realçado.
ativaIcone : function( icone )
Ativa os botoes definidos em LISTABOTOES
ativaBotoes : function( padrao )
Com base no código de um botão (iddiv), obtém a função armazenada em i3GEO.barraDeBotoes.LISTABOTOES e executa.
execBotao : function( id, x, y, posX, posY )
Obtém as definições de um botão conforme o seu código (iddiv)
defBotao : function( iddiv )
Inicializa a barra de botões quando for do tipo “olhodepeixe” ou “olhodepeixe1”
inicializaBarraOP : function( onde, numBotoes )
Inicializa a barra de botões
inicializaBarra : function( idconteudo, idconteudonovo, barraZoom, x, y, onde )
Reativa as barras de ferramentas já criadas
reativa : function( indice )
Recria uma barra de ferramentas já aberta aplicando os parâmetros de configuração definidos (variáveis)
recria : function( id )
Fecha uma barra de ferramentas
fecha : function( id )
Abre as opções do editor conforme a interface em uso
inicia : function()