JSLib – Biblioteca em javascript
JSLib é uma biblioteca feita em linguagem javascript que possui métodos para alteração de layout. Ela foi feita pensando na facilidade em que o desenvolvedor poderá fazer uma modificação da página de forma instântanea, avaliando se a mudança trás aspectos positivos para sua página ou não.Ela dispõe também de uma interface para que o usuário interaja com a página, promovendo mudanças diretas no layout, a fim de facilitar a usabilidade ou até mesmo por questões de preferência do mesmo.
Como utilizar
Para utilizar a interface, deverão ser seguidos apenas três passos:
- Faça o download do arquivo "jslib_layouteditor.js" (versão original) ou "jslib_compactado.js" (versão compactda) colocando-o na pasta raiz de seu site, ou se preferir coloque numa outra pasta, lembrando-se de ajustar os caminhos para os arquivos. Nesta documentação utilizaremos como exemplo a pasta raiz.
Adicione as funcionalidades da biblioteca adicionando entre as tags <head> e </head> o seguinte comando:
<script type="text/javascript" src="jslib_layouteditor.js"></script>
se estiver usando o arquivo original, ou o seguinte código:
<script type="text/javascript" src="jslib_compactado.js"></script>
se desejsar usar o arquivo compactado, a fim de obter melhor performance.
- Adicione à tag <body> o seguinte comando, que fará o carregamento da biblioteca ao final do carregamento da página:
<body onload="carregar_jslib()">
- Adicione a um botão, imagem ou link de sua preferência, o comando de acionamento da interface ou que chamará uma das rotinas utilizáveis diretamente:
<tag onclick="mostra_jslib()"/>
ou
<tag onclick="alterar_layout('tag', 'parametro', 'valor')"/>
JSLib é uma biblioteca opensource distribuída sob a licença LGPL (Library GPL).
Para desenvolvedores
- Descrição dos métodos:
- alterar_layout(<tag>,<atributo>,<valor>) – é a função principal da biblioteca, responsável por aplicar as alterações do atributo especificado referente à tag escolhida.
- limpar_parametros() – esta função é utilizada apenas como auxiliar na criação das opções da biblioteca na interface. Responsável por limpar os controles que estão na div “jslib_opt_param” quando o usuário muda a tag na qual ele deseja fazer as modificações na página.
- mudar_valor_fonte(<valor>,<incremento>) – Função criada especificamente para realizar a mudança de tamanho da fonte no body do documento. Incrementa ou decrementa, dependendo da escolha do usuário, em uma unidade o valor da fonte retornado pela função "pegar_valor_fonte()". Permite também ajustar os limites de tamanho mínimo e máximo da fonte do body.
- carregar_parametros(<tag>) – Função que tem o objetivo de carregar, na interface do usuário, os controles para que possam ser modificadas as características da tag especificada no parâmetro <tag.>
- mostra_jslib() – Função utilizada para ocultar e mostrar a interface do usuário.
- carregar_jslib() – Função que inicializa a bilioteca após o carregamento total da página. Por padrão ela inicializa a biblioteca mantendo-a oculta na página, ficando a cargo do usuário disparar o método "mostra_jslib()" para fazê-la aparecer e iniciar a interação.
- adicionar_evento(<objeto>,<evento>,<opção>) – Função que atribui um determinado evento a um objeto da biblioteca de acordo com a opção definida. Ela funciona de forma dinâmica de acordo com o navegador que o usuário estiver utilizando no momento e é necessária para o funcionamento interno da interface.
- atribuir_css(<objeto>,<estilo>) – Função que atribui a um objeto interno da biblioteca e aos objetos da página que será modificada, as definições em css especificadas no parametro " <estilo>". Também funciona de forma dinâmica de acordo com o navegador utilizado pela usuário e é necessária para o funcionamento interno da interface.
- pegar_valor_fonte() – Função criada especificamente para obter o valor do tamanho da fonte do elemento body da página. É utilizada em conjunto com a função "mudar_valor_fonte()", fornecendo o valor base para efetuar a mudança do tamanho da fonte do body da página.
- modifica_fonte_tags(<tag>,<valor>) – Esta função é responsável por varrer todos os elementos passados via referência atravéz do parâmetro <tag> quando ela é chamada, obtem o valor do tamanho da fonte deste elemento e modifica incrementando ou decrementando de acordo com o que foi passado no parâmetro <valor> (aumenta e diminui o valor da fonte das tags P e DIV na interface). Pode ser usada isolada, independente da interface, para fins de usabilidade, permitindo ao usuário ajustar o tamanho da fonte de determinado elemento da página.
Para usuários
A interface com o usuário permite alterar três tags, que são: BODY, DIV e P. A seguir a lista de características podem ser alteradas em cada tag:
- BODY – cor de fundo; cor da fonte; tipo da fonte; alinhamento do texto; tamanho da fonte.
- DIV – cor de fundo; cor da fonte; tipo da fonte; alinhamento do texto;
- P – cor da fonte; tipo da fonte; alinhamento do texto;