Manual na Rede: Função Selecionar

sexta-feira, 20 de novembro de 2015

Função Selecionar

Select Simples

Select com bordas arredondadas

Select com cor de fundo

Select com bordas

Select com bordas decoradas

Select largo

Select alto

Select que salta na mesma janela

Select que salta a janela

<script language="Javascript">
function Nova_janela(pasta) {
  if (pasta == 'janela0') {var url = "/2015/09/formulario-de-contato-personalizado.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
 if (pasta == 'janela1') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela2') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela3') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
}
 </script>
<select onchange="Nova_janela(this.options[this.selectedIndex].value)"style="background: #868A08;min-width:400px;max-width:400px;height:50px;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px">
<option selected="Manual">Escolha a sua janela
<option value="janela0" />Formulário personalizado
<option value="janela1" />Como retirar postagens atons
<option value="janela2" />Janelas Popup
<option value="janela3" />Textareas
</select>

Select que salta a janela com efeito hover

<style>
.saltarPopup3 {background: #868A08;min-width:400px;max-width:400px;height:50px;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #AEB404;min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
</style>
<script language="Javascript">
function Nova_janela(pasta) {
  if (pasta == 'janela0') {var url = "/2015/09/formulario-de-contato-personalizado.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
 if (pasta == 'janela1') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela2') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela3') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
}
 </script>
<select class="saltarPopup3" onchange="Nova_janela(this.options[this.selectedIndex].value)">
<option selected="Manual">Escolha a sua janela
<option value="janela0" />Formulário personalizado
<option value="janela1" />Como retirar postagens atons
<option value="janela2" />Janelas Popup
<option value="janela3" />Textareas
</select>

Select que salta a janela com selecionar colorido

<style>
.saltarPopup3 {background: #868A08;min-width:400px;max-width:400px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #AEB404;min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
.saltarLetra {background: #868A08;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;}
.saltarLetra1 {background:#AEB404;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;}
</style>
<script language="Javascript">
function Nova_janela(pasta) {
  if (pasta == 'janela0') {var url = "/2015/09/formulario-de-contato-personalizado.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
 if (pasta == 'janela1') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela2') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela3') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
}
 </script>
<select class="saltarPopup3" onchange="Nova_janela(this.options[this.selectedIndex].value)">
<option selected="Manual">Escolha a sua janela
<option value="janela0"class="saltarLetra" />Formulário personalizado </option>
<option value="janela1" class="saltarLetra1"/>Como retirar postagens atons </option>
<option value="janela2"class="saltarLetra" />Janelas Popup </option>
<option value="janela3"class="saltarLetra1" />Textareas </option>
</select>

Select com imagem que salta a janela

<style>
.saltarPopup3 {background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldUp6NPjDOV888d-UPWWYA2jN_JYMhvj24XKRDUoQA6BO7kKyW3hw6xN3Z78ldvJC5Gma7GeZuRVfUnSzzpF3tg-HRmw39d0mBJi8PvAMFjsIWBlMKbpJQT8Ia8mD7yXqtEh1tWZfsk0/s1600/cat11.png);min-width:400px;max-width:400px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGvVs9H7KtJDe1LTYySJdUMpIAUxYY_xypAgfq6TcUuE301-2aNDoC-qoe5wO1yZdnnXXNLYpT_oZITu5Z4bYDJxONbDjHo1OCWhebxgrrHu59nF3TdIxS1uxz-RyuTD6AzZtddeaVjo/s1600/bot%25C3%25A3o.png);min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
.saltarLetra {background: #868A08;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;}
.saltarLetra1 {background:#AEB404;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;}
</style>
<script language="Javascript">
function Nova_janela(pasta) {
  if (pasta == 'janela0') {var url = "/2015/09/formulario-de-contato-personalizado.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
 if (pasta == 'janela1') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela2') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
if (pasta == 'janela3') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,width=1500,height=340');}
}
 </script>
<select class="saltarPopup3" onchange="Nova_janela(this.options[this.selectedIndex].value)">
<option selected="Manual">Escolha a sua janela
<option class="saltarLetra"value=""Manual Dicas" />Manual Dicas
<option class="saltarLetra1"value="janela0" />Formulário personalizado
<option class="saltarLetra"value="janela1"/>Como retirar postagens atons
<option class="saltarLetra1"value="janela2" />Janelas Popup
<option class="saltarLetra"value="janela3" />Textareas
</select>

Select que multi janelas

<style>
.saltarPopup3 {background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldUp6NPjDOV888d-UPWWYA2jN_JYMhvj24XKRDUoQA6BO7kKyW3hw6xN3Z78ldvJC5Gma7GeZuRVfUnSzzpF3tg-HRmw39d0mBJi8PvAMFjsIWBlMKbpJQT8Ia8mD7yXqtEh1tWZfsk0/s1600/cat11.png);min-width:400px;max-width:400px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGvVs9H7KtJDe1LTYySJdUMpIAUxYY_xypAgfq6TcUuE301-2aNDoC-qoe5wO1yZdnnXXNLYpT_oZITu5Z4bYDJxONbDjHo1OCWhebxgrrHu59nF3TdIxS1uxz-RyuTD6AzZtddeaVjo/s1600/bot%25C3%25A3o.png);min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
.saltarLetra {background: #868A08;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;}
.saltarLetra1 {background:#AEB404;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;}
</style>
<script language="Javascript">
function Nova_janela(pasta) {
 if (pasta == 'janela1') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=30,left=5,width=200,height=200');}
if (pasta == 'janela2') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=30,left=550,width=200,height=200');}
if (pasta == 'janela3') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=30,left=1150,width=200,height=200');}
 if (pasta == 'janela4') {var url = "/2015/02/como-retirar-postagens-atons.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=460,left=1150,width=200,height=200');}
if (pasta == 'janela5') {var url = "/2015/07/janelas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=460,left=550,width=200,height=200');}
if (pasta == 'janela6') {var url = "/2015/07/textareas.html";window.open(url,'nova_pasta','resizable=yes,menubar=no,scrollbars=no,top=460,left=5,width=200,height=200');}
}
 </script>
<select class="saltarPopup3" onchange="Nova_janela(this.options[this.selectedIndex].value)">
<option selected="Manual">Escolha a sua janela
<option class="saltarLetra"value="janela1"/>Janela no topo a esquerda
<option class="saltarLetra1"value="janela2" />Janela no topo ao centro
<option class="saltarLetra"value="janela3" />Janela no topo a direita
<option class="saltarLetra1"value="janela4"/>Janela no rodapé a direita
<option class="saltarLetra"value="janela5" />Janela no rodapé ao centro
<option class="saltarLetra1"value="janela6" />Janela no rodapé a esquerda
</select>

Select que salta para outra janela

<style>
.saltarPopup3 {background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldUp6NPjDOV888d-UPWWYA2jN_JYMhvj24XKRDUoQA6BO7kKyW3hw6xN3Z78ldvJC5Gma7GeZuRVfUnSzzpF3tg-HRmw39d0mBJi8PvAMFjsIWBlMKbpJQT8Ia8mD7yXqtEh1tWZfsk0/s1600/cat11.png);min-width:400px;max-width:400px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGvVs9H7KtJDe1LTYySJdUMpIAUxYY_xypAgfq6TcUuE301-2aNDoC-qoe5wO1yZdnnXXNLYpT_oZITu5Z4bYDJxONbDjHo1OCWhebxgrrHu59nF3TdIxS1uxz-RyuTD6AzZtddeaVjo/s1600/bot%25C3%25A3o.png);min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
.saltarLetra {background: #868A08;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;}
.saltarLetra1 {background:#AEB404;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;}
</style>
<form id="aform">
<select class="saltarPopup3"id="mymenu" size="1">
<option value="nothing" selected="selected">Escolha a sua janela</option>
<option value="http://manualnarede.blogspot.com.br">Ir para manual na rede</option>
<option value="http://turmadamonicajovemmania.blogspot.com.br">Ir para Turma da mônica</option>
<option value="http://www.clarinhaike.com.br">Ir para Clarinha Ike</option>
</select>
</form>
<script type="text/javascript">
var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value!="nothing"){
  window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
 }
}
</script>

Select alerta

<style>
.saltarPopup3 {background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldUp6NPjDOV888d-UPWWYA2jN_JYMhvj24XKRDUoQA6BO7kKyW3hw6xN3Z78ldvJC5Gma7GeZuRVfUnSzzpF3tg-HRmw39d0mBJi8PvAMFjsIWBlMKbpJQT8Ia8mD7yXqtEh1tWZfsk0/s1600/cat11.png);min-width:400px;max-width:400px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarPopup3:hover{background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGvVs9H7KtJDe1LTYySJdUMpIAUxYY_xypAgfq6TcUuE301-2aNDoC-qoe5wO1yZdnnXXNLYpT_oZITu5Z4bYDJxONbDjHo1OCWhebxgrrHu59nF3TdIxS1uxz-RyuTD6AzZtddeaVjo/s1600/bot%25C3%25A3o.png);min-width:400px;max-width:400px;height:50px;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;border: 2px solid #868A08;border-radius:15px;}
.Bot {background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldUp6NPjDOV888d-UPWWYA2jN_JYMhvj24XKRDUoQA6BO7kKyW3hw6xN3Z78ldvJC5Gma7GeZuRVfUnSzzpF3tg-HRmw39d0mBJi8PvAMFjsIWBlMKbpJQT8Ia8mD7yXqtEh1tWZfsk0/s1600/cat11.png);width:100px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.Bot:hover{background: #5E610B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGvVs9H7KtJDe1LTYySJdUMpIAUxYY_xypAgfq6TcUuE301-2aNDoC-qoe5wO1yZdnnXXNLYpT_oZITu5Z4bYDJxONbDjHo1OCWhebxgrrHu59nF3TdIxS1uxz-RyuTD6AzZtddeaVjo/s1600/bot%25C3%25A3o.png);width:100px;height:50px;color: #AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;font-weight: bold;letter-spacing: 5px;border: 2px solid #AEB404;border-radius:15px;}
.saltarLetra {background: #868A08;color:#AEB404;font-family: 'Indie Flower', cursive;font-size: 15px;}
.saltarLetra1 {background:#AEB404;color:#868A08;font-family: 'Indie Flower', cursive;font-size: 15px;}
</style>
<script type="text/javascript">
function alertselected(selectobj){
 alert(selectobj.selectedIndex)
}
</script>
<form id="someform">
<select class="saltarPopup3"id="sample" onChange="alertselected(this)">
<option selected="Manual">Janela alerta
<option class="saltarLetra1">Manual 1</option>
<option class="saltarLetra">Manual 2</option>
<option class="saltarLetra1">Manual 3</option>
<option class="saltarLetra">Manual 4</option>
<option class="saltarLetra1">Manual 5</option>
<option class="saltarLetra">Manual 6</option>
</select> 
<input class="Bot"type="button" onClick="alertselected(document.getElementById('sample'))" value="alert" />
<button class="Bot"onClick="alertselected(document.getElementById('sample'))" />Botão</button>
</form>

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)