Javascript | Qosmio Tech

Ago 18

Importar Javascript

Categoria - Desenvolvimento, Javascript - Por - Felipe Gustavo de Lima No Comments »

Olá
Recentemente me perguntei porque não importar meus javascript’s para minha página igual é utilizado com o css, o “@import”, com isso eu deixaria mais organizado a minha “view”, porém não foi tão simples assim.

        @import "exemplo.css";

Navegando um pouco no google, me deparei com um script e acabei adaptando ele para poder utilizá-lo para importar meu javascript e meu css na minha página.
Ai vão os dois scripts.
Como são bem simples, não achei necessidade de explicá-los.
Importar JavaScript.

function ImportJS(file) {		
 
 
 
	var script = document.createElement('script');
 
	script.src = file;
 
	script.type = 'text/javascript';
 
	script.defer = true;	
 
	var head = document.getElementsByTagName('head').item(0);
 
	head.appendChild(script);
 
 
 
}

Importar Css

function ImportCSS(file) {		
 
 
 
	var script = document.createElement('link');
 
	script.href = file;
 
	script.type = 'text/css';
 
	script.rel = 'stylesheet';	
 
	var head = document.getElementsByTagName('head').item(0);
 
	head.appendChild(script);
 
 
 
}

Para aplicar em nossa página, apenas incluímos os nossos dois scripts, um que utilizei para mostar como é possível com o css também.

<script type="text/javascript" src="./js/import-js.js"></script>   
 
<script type="text/javascript" src="./js/import-css.js"></script>

E aqui chamamos as funções passando como parâmetro o caminho para o scripts e para o nosso css.

 <script type="text/javascript">  
 
  	var js1  = new ImportJS("./js/jquery-1.2.6.pack.js");  	
 
  	var js2  = new ImportJS("./js/jquery.bgiframe.js");
 
  	var js3  = new ImportJS("./js/jquery.dimensions.js");
 
  	var js4  = new ImportJS("./js/jquery.jdMenu.js"); 	
 
  	var js5  = new ImportJS("./js/jdMenu.conf.js"); 	
 
  	var css1 = new ImportCSS("./css/screen.css"); 	  	  		
 
  </script>

Utilizei para nosso exemplo um menu com jQuery, que depende de alguns plugins.
Exemplo

Adicione ->

Ago 14

Habilitando e desabilitando opção de um select em um formulário com Jquery

Categoria - Desenvolvimento, Javascript, Tecnologia, jQuery - Por - Felipe Gustavo de Lima No Comments »

Hoje ensinarei como habilitar e desabilitar determinada opção de um select em um formulário.
Utilizarei o mesmo modo de criar formulários acessíveis.

<script src="http://www.qosmio.com.br/wp-admin/js/jquery-1.2.6.pack.js" type="text/javascript"><!--mce:0--></script>
<script src="http://www.qosmio.com.br/wp-admin/js/cmxforms.js" type="text/javascript"><!--mce:1--></script>
<script src="http://www.qosmio.com.br/wp-admin/js/disabled.js" type="text/javascript"><!--mce:2--></script>
<div class="cmxform">
 
Campos de preenchimento obrigatório. Contém<em>*</em>
 
<fieldset>
<legend>Cadastrar Níveis</legend>
<ol>
	<li>
<label for="field">Campo:<em>*</em></label>
<select>
<option value="1">Campo 1</option>
<option value="2">Campo 2</option>
<option value="3">Campo 3</option>
<option value="4">Campo 4</option>
<option value="5">Campo 5</option>
<option value="6">Nível 1</option>
<option value="7">Nível 2</option>
<option value="8">Nível 3</option>
<option value="9">Nível 4</option>
<option value="10">Nível 5</option>
<option value="11">Nível 6</option>
<option value="12">Nível 7</option>
<option value="13">Nível 8</option>
<option value="14">Nível 9</option>
<option value="15">Nível 10</option>
<option value="16">Nível 11</option>
<option value="17">Nível 12</option>
<option value="18">Nível 13</option>
<option value="19">Nível 14</option>
<option value="20">Nível 15</option>
</select></li>
	<li>
<label for="action">Ação:<em>*</em></label>
<select>
<option id="markup">-----------------</option>
<option id="enable">Cadastrar</option>
<option id="alter">Alterar</option>
<option id="delete">Excluir</option>
</select></li>
</ol>
</fieldset>
</div>

Aqui o meu Javascript

$(document).ready(function () {
// Ao terminar carregamento da pagina desabilita o campo cadastrar
$("#enable").attr("disabled","true");
 
$("select").click(function() {
 
var thisValue = $(this).val();
 
switch(thisValue)	{
 
case "1":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "2":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "3":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "4":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "5":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "6":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "7":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "8":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "9":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "10":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "11":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "12":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "13":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "14":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "15":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "16":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "17":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "18":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "19":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "20":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
}
})
})

Exemplo

Adicione ->

Abr 29

Formulário Acessível

Categoria - Desenvolvimento, Design, Javascript, jQuery - Por - Felipe Gustavo de Lima No Comments »

Hoje abordaremos um assunto importante, acessibilidade em formulários.
O que é acessibilidade segundo a W3C.
Link para referência http://www.w3.org/WAI/intro/accessibility.php
No site maujor temos acesso a este mesmo material em português.
Link para referência http://www.maujor.com/w3c/introwac.html
Segundo Nick Rigby criador desta técnica a vantagem de utilizarmos um formulário projetado desta forma. É a flexibilidade que ganhamos, podendo usar ele em vários projetos, mudando apenas a formatação, utilizando uma que se encaixe no layout do seu projeto.
A parte mais importante do nosso formulário é o html, para a construção dele usaremos as seguintes tags:
<fieldset>
<label>
<legend>
<ol>
<li>
<em>
Se você nunca utilizou estas tags, aconselho a ler a documentação da W3Schools.
Link para referência http://www.w3schools.com/tags/default.asp
Abaixo o nosso HTML 4.01 / XHTML 1.0.

<head>
<script src="lib/jquery-1.2.3.js" type="text/javascript"></script>
<script src="lib/cmxforms.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/screen.css" media="screen" type="text/css">
</head>
<form class="cmxform" action="#"> Campos de preenchimento obrigatório. Contém<em>*</em>
<fieldset>
<legend>Acessibilidade em Formulário</legend>
<ol>
<li> <label for="name">Nome<em>*</em></label>
<input id="name" type="text" /></li>
<li> <label for="age">Idade<em>*</em></label>
<input id="age" type="text" /></li>
<li> <label for="height">Altura<em>*</em></label>
<input id="height" type="text" /></li>
<li> <label for="weight">Peso<em>*</em></label>
<input id="weight" type="text" /></li>
<li> <label for="email">E-mail<em>*</em></label>
<input id="email" type="text" /></li>
<li> <fieldset>
<legend>Aceita os termos de responsabilidade?<em>*</em></legend>
<label>
<input name="condition" type="radio" value="yes" /> Sim</label>
<label>
<input name="condition" type="radio" value="no" /> Não</label>
</fieldset></li>
</ol>
</fieldset>
<fieldset>
<legend>Outras informações</legend>
<ol>
<li> <label for="dob">Data do aniversário
<span class="sr">(Dia)</span><em>*</em>
</label>
<select id="dob">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label class="sr" for="dob-m">Data do aniversário (Mês)
<em>*</em>
</label>
<select id="dob-m">
<option value="1">Jan</option>
<option value="2">Feb</option>
</select>
<label class="sr" for="dob-y">Data do aniversário (Ano)
<em>*</em>
</label>
<select id="dob-y">
<option value="1984">1984</option>
<option value="1985">1985</option>
</select>
</li>
<li> <label for="sex">Sexo <em>*</em></label>
<select id="sex">
<option value="female">Feminino</option>
<option value="male">Masculino</option>
</select>
</li>
<li> 
<fieldset>
<legend>Qual esporte você prática?</legend>
<label for="football">
<input id="football" type="checkbox" /> Futebol</label>
<label for="golf">
<input id="golf" type="checkbox" /> Golfe</label>
<label for="volley">
<input id="volley" type="checkbox" /> Vôlei</label>
<label for="tennis">
<input id="tennis" type="checkbox" /> Tênis</label>
<label for="basketball">
<input id="basketball" type="checkbox" /> Basquete</label>
<label for="boxing">
<input id="boxing" type="checkbox" /> Boxe</label>
</fieldset>
</li>
<li>
<label for="comments">Comentário</label>
<textarea id="comments" cols="25" rows="7"></textarea></li>
</ol>
</fieldset>
</form>

Abaixo nosso screen.css com os imports.



@import "reset.css";
@import "core.css";
@import "cmxTpl.css";
@import "cmxform.css";

Não irei postar todos arquivos css para não tornar o post muito extenso.
Para o funcionamento do nosso formulário, trabalharemos com a biblioteca javascript jQuery.
Link para download jQuery
Para contornar o bug de navegadores da fundação mozilla, que não interpretam corretamente a propriedade do css display:inline utilizaremos um script para atribuir o valor display: -moz-inline-box as tags <label>
Nosso cmxforms.js



// apply inline-box only for mozilla
if( jQuery.browser.mozilla ) {
// do when DOM is ready
$( function() {
// search form, hide it, search labels to modify, filter classes nocmx and error
$( 'form.cmxform' ).hide().find( 'li>label:not(.nocmx):not(.error)' ).each( function() {
var $this = $(this);
var labelContent = $this.html();
var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' );
// create block element with width of label
var labelSpan = $("<span>")
.css("display", "block")
.width(labelWidth)
.html(labelContent);
// change display to mozilla specific inline-box
$this.css("display", "-moz-inline-box")
// remove children
.empty()
// add span element
.append(labelSpan);
// show form again
}).end().show();
});
};

Mesmo script utilizado no Bassitance mudei apenas a regra seletora li>label:not(.nocmx):not(.error)
Navegadores testados:

Safari 3.1.1

Internet Explorer 6

Internet Explorer 7

Firefox/2.0.0.14

Opera 9.27

Confira o resultado aqui

Adicione ->

Abr 08

Inserção de conteúdo sem recarregamento da página

Categoria - Desenvolvimento, Javascript, jQuery - Por - Felipe Gustavo de Lima No Comments »

Simples tutorial, ensinando a inserir conteúdo de modo assíncrono sem que ocorra recarregamento no restante da página.
Para isso usaremos a biblioteca javascript jQuery.
O jQuery tem suporte cross-browser, CSS 1 - 3 e o básico de Xpath.
Download e documentação no site oficial:
http://jquery.com
Exemplo:

 
<!-- Importa a Biblioteca do jQuery -->
<script src="http://www.qosmio.com.br/wp-admin/lib/jquery-1.2.3.js" type="text/javascript"><!--mce:0--></script>
<!-- Importa a nossa função -->
<script src="http://www.qosmio.com.br/wp-admin/lib/centralcontent.js" type="text/javascript"><!--mce:1--></script>
 
<!--[If lte IE 7]>
	<link type="text/css" href="css/ie.css" mce_href="http://www.qosmio.com.br/wp-admin/css/ie.css" rel="stylesheet" />
<![endif]-->
<div id="page">
<div id="back">
	<a title="Voltar ao anúncio">&lt;&lt; |</a></div>
<div id="menu">
<ul>
	<li>
<a id="content1" title="Home" href="#">Home</a></li>
	<li>
<a id="content2" title="A Empresa" href="#">A Empresa</a></li>
	<li>
<a id="content3" title=</