Autor Tópico: [Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT  (Lida 648 vezes)

Jailton

  • Expert
  • *****
  • Mensagens: 2041
[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Online: Outubro 23, 2015, 10:51:56 am »
Amigos,

Para Selecionar o Idioma Gostaria de Colocar uma Bandeira no SELECT é possível?

Exemplo:
« Última modificação: Outubro 27, 2015, 04:35:57 pm por Jailton »
O Princípio da Vibração. "Nada está parado, tudo se move, tudo vibra". Caibalion.

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #1 Online: Outubro 25, 2015, 12:31:01 am »
Caro Jailton,
É isso que você quer?
Celso R.
________________________________
SC - V 8

FredKeyster

  • Expert
  • *****
  • Mensagens: 1702
  • DEWENNINMEN
    • Email
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #2 Online: Outubro 25, 2015, 07:34:42 am »
Acredito que isso mesmo Celso.
F. A.
Analista de Sistemas

Jailton

  • Expert
  • *****
  • Mensagens: 2041
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #3 Online: Outubro 25, 2015, 10:15:44 am »
Caro Jailton,
É isso que você quer?


Sim, Celso, seria isso.
O Princípio da Vibração. "Nada está parado, tudo se move, tudo vibra". Caibalion.

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #4 Online: Outubro 26, 2015, 04:29:18 pm »
Ok.
Estou indo para faculdade e na volta o mais tardar amanhã passo como se faz.
Celso R.
________________________________
SC - V 8

Jailton

  • Expert
  • *****
  • Mensagens: 2041
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #5 Online: Outubro 26, 2015, 05:54:39 pm »
Ok.
Estou indo para faculdade e na volta o mais tardar amanhã passo como se faz.

Ok grato.
O Princípio da Vibração. "Nada está parado, tudo se move, tudo vibra". Caibalion.

FredKeyster

  • Expert
  • *****
  • Mensagens: 1702
  • DEWENNINMEN
    • Email
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #6 Online: Outubro 27, 2015, 09:12:27 am »
Ao invés de colocar cores coloque o caminho das imagens que da certo. Lembrando que para esse caso a imagem tem que esta em um tamanho adequado.

?>
<style>
   select
{
    background: url('http://i.imgur.com/XN3hWOM.png');
    width: 98px;
    height: 38px;
}

option:nth-child(odd) /* Se for impar fica com fundo verde */
{
    background: Green;
}
option:nth-child(even) /* Se for par fica com o fundo amarelo */
{
    background: Yellow;
}
</style>
<?php

Obs. Tem que inspecionar elemento e ver a id de cada "país" pra colocar a bandeira de acordo com o mesmo. Acho que o código do Celso é bem diferente.
« Última modificação: Outubro 27, 2015, 09:16:31 am por FredKeyster »
F. A.
Analista de Sistemas

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #7 Online: Outubro 27, 2015, 02:03:28 pm »

Me perdoem da demora.

Como já dizia a vovozinha "existem mil maneiras de se comer um TOSTINES".

1 - Criar um campo tipo label nome = teste
- Em sua propriedade texto inserir o seguinte código:
Código: [Selecionar]

<select name="teste" id="teste">
    <option value="1" data-image="caminho_de_sua_imagem">Texto Texto 1</option>
    <option value="2" data-image="caminho_de_sua_imagem">Texto 2</option>
    <option value="3" data-image="caminho_de_sua_imagem">Texto 3</option>
    <option value="4"  selected="selected" title="caminho_de_sua_imagem">Texto 4</option>
    <option value="5" data-image="caminho_de_sua_imagem">Texto 5</option>
    <option value="6" data-image="caminho_de_sua_imagem">Texto 6</option>
  </select>
2 - Baixe a blioteca:
http://www.marghoobsuleman.com/jquery-image-dropdown
Coloque ela em sua _lib/minha_biblioteca/
ou utilize a macro sc_url_library  a seu critério.
No meu caso eu não utilizei a macro.
3 - No evento onScriptInit inserir o seguinte código:
Código: [Selecionar]

{teste}= print("
  <header>
   <script src=\"caminho_de_sua_biblioteca/jquery-1.3.2.min.js\" type=\"text/javascript\"></script>
   <script src=\"caminho_de_sua_biblioteca/js/msdropdown/jquery.dd.min.js\" type=\"text/javascript\"></script>
   <link rel=\"stylesheet\" type=\"text/css\" href=\"caminho_de_sua_biblioteca/css/msdropdown/dd.css\" />
  </header>


  <script language=\"javascript\">   
   $(document).ready(function(e) {
      try {
         $(\"body select\").msDropDown();
      } catch(e) {
         alert(e.message);
      }
   });   
  </script>
");

Legal Fred o seu código eu usei utilizando a ideia da Camila no seminário dela.
Muito bom mesmo.



« Última modificação: Outubro 27, 2015, 02:05:11 pm por Celso R. »
Celso R.
________________________________
SC - V 8

Jailton

  • Expert
  • *****
  • Mensagens: 2041
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #8 Online: Outubro 27, 2015, 04:35:32 pm »
Grato Fred e Celso R., vou marcar como resolvido.

Quem sabe vem esse recurso default no SC V9, V10.....V30 hehehe
« Última modificação: Outubro 27, 2015, 04:38:09 pm por Jailton »
O Princípio da Vibração. "Nada está parado, tudo se move, tudo vibra". Caibalion.

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #9 Online: Outubro 27, 2015, 04:44:37 pm »
Esperamos que sim. Pois é algo simples que dá uma dor de cabeça para resolver.
Celso R.
________________________________
SC - V 8

camilamoreirati

  • Intermediário
  • ***
  • Mensagens: 131
    • Email
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #10 Online: Outubro 28, 2015, 09:24:35 am »
Show de bola!
Att. Camila Moreira
Desenvolvedor WEB

camilamoreirati

  • Intermediário
  • ***
  • Mensagens: 131
    • Email
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #11 Online: Outubro 28, 2015, 09:25:40 am »

Me perdoem da demora.

Como já dizia a vovozinha "existem mil maneiras de se comer um TOSTINES".

1 - Criar um campo tipo label nome = teste
- Em sua propriedade texto inserir o seguinte código:
Código: [Selecionar]

<select name="teste" id="teste">
    <option value="1" data-image="caminho_de_sua_imagem">Texto Texto 1</option>
    <option value="2" data-image="caminho_de_sua_imagem">Texto 2</option>
    <option value="3" data-image="caminho_de_sua_imagem">Texto 3</option>
    <option value="4"  selected="selected" title="caminho_de_sua_imagem">Texto 4</option>
    <option value="5" data-image="caminho_de_sua_imagem">Texto 5</option>
    <option value="6" data-image="caminho_de_sua_imagem">Texto 6</option>
  </select>
2 - Baixe a blioteca:
http://www.marghoobsuleman.com/jquery-image-dropdown
Coloque ela em sua _lib/minha_biblioteca/
ou utilize a macro sc_url_library  a seu critério.
No meu caso eu não utilizei a macro.
3 - No evento onScriptInit inserir o seguinte código:
Código: [Selecionar]

{teste}= print("
  <header>
   <script src=\"caminho_de_sua_biblioteca/jquery-1.3.2.min.js\" type=\"text/javascript\"></script>
   <script src=\"caminho_de_sua_biblioteca/js/msdropdown/jquery.dd.min.js\" type=\"text/javascript\"></script>
   <link rel=\"stylesheet\" type=\"text/css\" href=\"caminho_de_sua_biblioteca/css/msdropdown/dd.css\" />
  </header>


  <script language=\"javascript\">   
   $(document).ready(function(e) {
      try {
         $(\"body select\").msDropDown();
      } catch(e) {
         alert(e.message);
      }
   });   
  </script>
");

Legal Fred o seu código eu usei utilizando a ideia da Camila no seminário dela.
Muito bom mesmo.






Que bom Celso, é bom saber que meu semináriozinho serviu pra alguma coisa. :)

Att. Camila Moreira
Desenvolvedor WEB