Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Select personalizado

10-02-2010 19:18

Boa noite,

Tenho um grande problema, terminei um editor html, e pesquisei um plugin legal para personalizar o select, até ai beleza, entrei num site chamado Brainfault onde fiz o upload do plugin. o visual ficou muito legal, utilizei para selecionar o tipo de fonte e tamanho, só que ai veio o problema!!! :bomb
quando clico no select o editor que é um iframe editavel perde a seleção!!! não sei o que fazer pois os plugins que pesquisei fazem a mesma coisa!!!
por favor me ajude!!!!! :help
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Select personalizado

10-02-2010 19:42

Foco em iframe não sei como funciona.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Select personalizado

15-02-2010 11:55

cara testando algumas idéias doidas que me surgiu, consegui fazer o botão select todo personalizado, e que não deu problema em questão com o foco!!! :D

Vou passar aqui o tutorial de como fazer, caso alguém passe por algo parecido, e´ bem facil :) e não precisa de plugin javascript.

Primeiramente criei uma imagem no photoshop com dimensões 108 X 17 [________*] que fique iqual a um select parecido com o do mac ox ex: http://images.macfixit.com/images/DefaultMail.jpg, ou pode ser algo de sua preferencia, se não souber mexer no photoshop, existe sites com botôes jpeg que vc pode utilizar.

2º passo. inseri no codigo html um select e um span com um id e uma classe para o javascript e o css indentificá-los, você pode ver também um texto escrito fonte entre o span e o select, ele é o grande truque que vcs irão ver e também tem um id!!! :)

<span class="img_tipo" ><p id="text_style">Fonte</p><select id="fonte" name="fonte" onChange="Fonte(this.options[this.selectedIndex].value)" tabindex="2"> <option value="Arial" selected="selected">Arial</option> <option value="Courier">Courier</option> <option value="Sans Serif">Sans Serif</option> </select> </span>

A função que utilizei no javascript é referente a inserção da seleção da fonte no texto, se caso esse não for seu proposito, é só alterar a função javascript.

Agora no passo 3 vou colocar o css para inserir stylo no select com imagem, ele tem um parametro chamado z-index que trata o conteudo da pagina como camada, ele deve seguir a ordem que eu coloquei, primeiro iindex a imagem que vai ficar de fundo segundo index o select 3º index o texto "fonte" que irá ficar encima de tudo. O select ficará invisivel com opacidade 0 então só ficará visivel o fundo e o texto que será manipulado pelo javascript, lembrando que position deve ser absolute para dar certo!!!
.img_tipo{ z-index:1; width:108px; background: url(http://localhost/exercicios/editor_and1/imagens/botao_select.gif) no-repeat; height: 18px } #text_style{ font:12px verdana, arial, helvetica, sans-serif; text-indent: 5px; color:#285676; position:absolute; z-index:2 } #fonte { font:12px verdana, arial, helvetica, sans-serif; background-color: #B0E0E6; color:#003399; z-index:3; position: absolute; width:108px; opacity:0; filter: alpha(opacity=0); height:18px; }

4º passo Final - agora vamos colocar a instrução javascript para manipular o texto que está dentro do span!!
function atribui_valor(id, valor){ document.getElementById(id).innerHTML = ""+ valor+""; }

Esta função substitui o texto pelo selecionado, vamos colocar essa função dentro da função do select já preparada onde vamos extrair as informações com a variavel id e valor da unção atribui_valor(), segue o codigo.

function Fonte(fonte) { switch(fonte){ case "Arial": atribui_valor("text_style","Arial"); window.document.getElementById('editor').contentWindow.document.execCommand('fontname', false, fonte); break case "Courier": atribui_valor("text_style","Courier"); window.document.getElementById('editor').contentWindow.document.execCommand('fontname', false, fonte); break case "Sans Serif": atribui_valor("text_style","Sans Serif"); window.document.getElementById('editor').contentWindow.document.execCommand('fontname', false, fonte); break default: alert("não existe"); } }

Esta função vará que quando o texto for selecionado pelo usuario ele usa a função atribui_valor() que substitui o texto pelo selecionado, a baixo da função existe um parametro que vai até o editor e aplica a fonte, se esse não for o seu caso pode desconsiderá-lo.

é isso ai, ficou bem mais fácil agora estilizar o select sem ser por gambiarra!!!! :D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Select personalizado

15-02-2010 16:26

Bom o tutorial, em breve testo, vlw. :-)
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Select personalizado

13-05-2010 10:40

Fala amigoooooos,

Meu primeiro post hojee :D

e de cara achei esse excelente tutorial! fiz e deu tudo certooo!!

só tem um porém... o texto que é formado no js é em layer ai ja sabemos o problema...

alterei o código do js para:

function Fonte(fonte)
{
switch(fonte){
case "Arial":
atribui_valor("nome_do_select","Arial");
...

mas nao deu certo, suponho eu que a imagem do botão fica por cima do texto...

alguem tem uma saida para aparecer o texto sem layers?


Obrigado =]
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Select personalizado

13-05-2010 11:47

Estou com o tempo corrido aqui, mas, assim que puder vou testar o script e dou umas dicas sobre o problema.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Select personalizado

13-05-2010 16:49

Ae pessoal,

quem quiser o select personalizado soh entrar nesse topico...

http://www.codigosnaweb.com/forum/Selec ... _15990.htm

é em Jquery bem facinho de mexer... ficou perfeito!

Abração a todos!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Select personalizado

13-05-2010 17:10

Boa que achou. ;)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]