Idle Systems

Popular Combo Via Ajax

Função para popular um campo select via Ajax. Muito utilizado para os seguintes pares de entidades (Estado / Cidade), (Categoria, Plano), (Diretório, SubDiretório)...

Funções Inclusas:

  1. getObjectXML() - Retorna um objeto XMLHttpRequest CrossBrowser
  2. clearCombo(idCombo) - Limpa todos os valores do comboBox, o ID do combo é passado como parâmetro
  3. populateSelect(idObject,idObjectPopulate,url,parametro) - Função principal que popula o comboBox

Método de Chamada

populateSelect(idObject,idObjectPopulate,url,parametro)

Onde..

idObject: Id do comboBox principal idObjectPopulate: Id do comboBox que será populado url: Url da Action parametro: Nome do Parâmetro que será passado Visualizar Código e exemplo

Alterar fundo da Linha da Tabela

Função para alterar o backGround da linha da tabela quando o usuário passar o mouse sobre a linha.

As linhas que o desenvolvedor desejar que tenham efeito deverão estar estilizadas com o seletor de classe "hover"

Funções Inclusas:

  1. lineHover(idTable) - Função Principal, passa o ID da tabela que deseja atribuir o efeito como parâmetro

Método de Chamada

lineHover(idTable)

Onde..

idTable: Id da Tabela que deseja atribuir o efeito Visualizar Código e exemplo

Ordenar Tabela

Classe para Ordenar Tabela númerica via método da bolha

Funções Inclusas:

  1. changeLine(line1,line2) - Efetua a troca das duas linhas
  2. orderTable(idTable,indexColum) - Efetua a ordenação da coluna indexColum tabela idTable passada como parâmetro

Método de Chamada

onclick="orderTable('idTable','indexColum')

Onde..

idTable: Id da Tabela indexColum: Indíce da Coluna que será ordenada Visualizar Código e exemplo

Desabilitar Form

Função para disabilitar conjunto de inputs

Funções Inclusas:

  1. disableInput(idObjAction,idAllInputs) - Função Principal, passa o ID do conjunto de inputs que deseja desabilitar e o ID do botão que será atribuída a ação de click

Método de Chamada

disableInput(idObjAction,idAllInputs)

Onde..

idAllInputs: Id do conjunto de inputs que deseja desabilitar idObjAction: Id do botão que realizará a ação Visualizar Código e exemplo

Função Auto-Complete ViaAjax

Classe para autoCompletar um campo de texto via Ajax, semelhante ao GoogleSuggest, A action que detalha a lógica da resposta é passada como parâmetro

Atenção: A cada tecla de entrada é realizada um post na action, então tome cuidado ao utilizar esta classe, seu servidor agradece ;-)

Funções Inclusas:

  1. getObjectXML() - Retorna um objeto XMLHttpRequest CrossBrowser
  2. requestAutoComplete(idForm,idObj,urlAction,styleComplete,clickPost) - Função principal para ser colocado na View

Método de Chamada

requestAutoComplete(idForm,idObj,urlAction,styleComplete,clickPost)

Onde..

idForm: ID do Formulário onde o INPUT está inserido idObj: ID do INPUT que terá o autoComplete urlAction: Action responsável por controlar o retorno dos dados que serão exibidos no autoComplete styleComplete: Classe de Estilo que será atribuído ao autoComplete clickPost: Variável booleana que determina se ao clicar no elemento, o formulário já é automaticamente submetido Visualizar Código e exemplo

Navegação em Árvore Multinível

Script para Navegação em árvore multinível

Visualizar Código e exemplo

DragnDrop

Classe para permitir arrastar e soltar objetos, com um destino pré-definido

Atenção: Esta classe precisa de alguns pequenos ajustes

Funções Inclusas:

  1. dragnDrop() - Nome do objeto
  2. setDrag(idOrigem,idDestino,funcao) - Método que atribui o dragnDrop no objeto

Método de Chamada

var drag = new dragnDrop()
drag.setDrag(idOrigem,idDestino,function)

Onde..

idOrigem: ID do objeto de origem, que poderá ser arrastado idDestino: ID da área de destino function: Função que será executada quando o objeto de origem estiver solto no objeto de origem Visualizar Código e exemplo

Controller

Componente para controlar alguma coisa (use a imaginação ;-) ), baseada na classe de DragnDrop, porém é necessário realizar alguns pequenos ajustes

Visualizar Código e exemplo

Outro exemplo de utilização do componente controller Código e exemplo

Classe para estilização de formulário com validação automática

Esta classe, como pode ser vista no exemplo abaixo, cria um "tooltip" ao lado do campo text, além de criar um validação simples em javascript

Forma de utilização

Basta inserir um link para este javascript dentro da tag head:

<script type="text/javascript" src="js/functionsForm.js"></script>

Campos de preenchimento obrigatório (parâmetro true depois do pipe duplo - || ) :

<input type="text" name="email" id="email" title="Entre com o seu e-mail ||true">

Campos sem preenchimento obrigatório (parâmetro false depois do pipe duplo - || )

<input type="text" name="email" id="email" title="Entre com o seu e-mail">
  1. O primeiro texto do atributo "title" antes do "||" corresponde ao texto que será exibido no tooltip
  2. O segundo texto indica se o campo será obrigatório ou não
Visualizar Código e exemplo

Máscara para entrada de caracteres inválidos em formulários

Máscara para entrada de caracteres inválidos em formulários

Construtor

  1. maskCaracter(classToolTip) - Construtor da classe, passa como parâmetro a classe que estilizará o box

Métodos da Classe:

  1. validCaracter(id_input1,id_input2,id_input3,id_input...) - Validação de caracteres inválidos, os argumentos são os ID's dos inputs que receberão a validação
  2. validNumber(id_input1,id_input2,id_input3,id_input...) - Validação de números, os argumentos são os ID's dos inputs que receberão a validação
  3. validMail(id_input1,id_input2,id_input3,id_input...) - Validação de e-mails, os argumentos são os ID's dos inputs que receberão a validação

Método de Chamada

var valid = new maskCaracter(classTooltip)
valid.validCaracter(IDInput)

Onde..

classTooltip: seletor de classe CSS que irá estilizar o box IDInput: ID do input que terá a mascára atribuída Visualizar Código e exemplo