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

Jailton

  • Expert
  • *****
  • Mensagens: 2729
[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: 1064
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 9

FredKeyster

  • Visitante
Re:Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #2 Online: Outubro 25, 2015, 07:34:42 am »
Acredito que isso mesmo Celso.

Jailton

  • Expert
  • *****
  • Mensagens: 2729
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: 1064
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 9

Jailton

  • Expert
  • *****
  • Mensagens: 2729
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

  • Visitante
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 »

Celso R.

  • Expert
  • *****
  • Mensagens: 1064
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 9

Jailton

  • Expert
  • *****
  • Mensagens: 2729
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: 1064
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 9

camilamoreirati

  • Intermediário
  • ***
  • Mensagens: 173
    • www.camilamoreira.com.br
    • 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 / Web Designer
www.camilamoreira.com.br

camilamoreirati

  • Intermediário
  • ***
  • Mensagens: 173
    • www.camilamoreira.com.br
    • 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 / Web Designer
www.camilamoreira.com.br

wilsonrg

  • Novato
  • *
  • Mensagens: 1
  • "Conhecimento é Poder, quando compartilhado"
    • Marsites Informática
    • Email
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #12 Online: Abril 26, 2018, 07:50:53 am »
Busquei e encontrei uma forma de colocar ícone no select através das informações contidas neste site https://silviomoreto.github.io/bootstrap-select/

Faça um teste seguindo os passos abaixo:

no <head> coloque:
Código: [Selecionar]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-pt_PT.min.js"></script>

no <body> coloque no select:
Código: [Selecionar]
<select class="selectpicker" id="iconesel" name="iconesel">
    <option value="">Selecione</option>
    <option value="fa-phone-square" data-icon="fa fa-phone-square">Telefone</option>
</select>

Espero ter ajudado a todos
"Conhecimento é Poder, quando compartilhado"                              
« Última modificação: Abril 26, 2018, 08:12:27 am por wilsonrg »
Wilson RG
"Conhecimento é Poder, quando compartilhado"

Celso R.

  • Expert
  • *****
  • Mensagens: 1064
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #13 Online: Abril 26, 2018, 08:08:01 am »
Muito bom.
Vou experimentar....
Obrigado por compartilhar.
Celso R.
________________________________
SC - V 9

Bruno P

  • Novato
  • *
  • Mensagens: 16
  • WW Development - Consultoria em dsv. WEB
    • Email
Re:[Resolvido]Colocar BANDEIRA (ÍCONE) em SELECT
« Responder #14 Online: Maio 02, 2018, 11:52:39 am »
Costumo utilizar muito o font awesome.

É basicamente importar o arquivo na aplicação e no select utilizar o nome da classe antes, por exemplo

 Select '<i class="fas fa-address-book"></i>', campo1, campo2, campo3 FROM tabela

Desta forma há como também, você criar uma tabela de ícones e relacionar os ícones com os seus elementos.

WW Development
Consultoria em Desenvolvimento Web
bprece@gmail.com