Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Manual

+
Clique em uma das funções abaixo para visualizar o tutorial:
Introdução
Desenvolvido para projetos ágeis
  1. O framework
    • SimpleUi estende o framework jQuery (v2.1.4) para implementar funcionalidades de interação quem independem do contexto da aplicação.
    • Diferente de qualquer framework ou biblioteca, SimpleUi implementa scripts sem exigir scripts por parte do desenvolvedor. Isso significa que serão usadas apenas entradas Html e Css para enriquecer uma interface web.
    • Os gatilhos das funções são classes e ids.
      Os ajustes das funcionalidades podem ser feitos por meio dos novos atributos customizáveis da Html5, o dataset (data-* attributes)
    • Desse modo, o código-fonte fica enxuto e organizado. Fatores que contribuem para um projeto válido, veloz e acessível por qualquer dispositivo
  2. Nomenclatura
    • Todo seletor Css e atributo Html gerado ou requisitado por SimpleUi possui o prefixo ui_ para distinguir suas chamadas e gatilhos dos demais seletores de estilo.
Sanfona
Conteúdo safonado estilo slide-show e slide-hide
  1. Coloque a class ui_accordion no elemento que será o gatilho da sanfona
    • Esse elemento pode ser qualquer marcação Html
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, o conteúdo que será aberto está após o gatilho
    • Para alterar esse padrão, insira o atributo data-obj no gatilho
    • Use valores notáveis, como prev para anterior e next para próximo (padrão), ex: data-obj="prev"
    • Ou preencha com qualquer seletor que identifique o seu objeto, ex: data-obj=".minhaClasse" ou data-obj="#meuID"
  2. A velocidade de abertura padrão da sanfona é lenta
    • Para alterar esse padrão, insira o atributo data-speed no gatilho
    • Use valores notáveis, como fast para rápido, normal ou slow para lento (padrão), ex: data-speed="fast"
    • Ou preencha com qualquer valor em ms, ex: data-speed="500"
  3. Use o atributo data-label no gatilho para alterar o texto/rótulo quando ele estiver ativo, ex: data-label="fechar"
  4. Outra opção é desabilitar o botão para retrair o conteúdo, ou seja, ao clicar uma única vez para revelar o conteúdo, o botão não estará mais disponível.
    • Para isso, use o atributo data-single-click="true".
  5. Use o atributo data-clickoutside="true" no gatilho para recolher a sanfona a partir de cliques em qualquer área da tela
  6. Use o atributo data-anchor="true" no gatilho para ancorar a página até ele quando clicado
  1. Antes e depois da animação da sanfona, usuários avançados podem implementar uma função do tipo callbefore e callback
    • Para isso, crie a função callbefore_accordion(trigger,obj) e/ou callback_accordion(trigger,obj) e implemente as ações que irão ocorrer antes de depois da animação
    • Onde trigger é o objeto que gera o efeito (gatilho) e obj é o objeto que sofre o efeito. Como exemplo, a função pode testar se gatilho está ativo, if(trigger.hasClass("active")){}, ou se a sanfona está visível, if(obj.is(":visible")){}.
    • Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  2. Também é possível usar a função accordion de modo isolado para abrir em eventos ou ações diversas
    • Para isso, use a função accordion(obj,speed,force)
    • Onde obj é objeto que será sanfonado, exemplo $("#meuId") ou $(".minhaClass") (tambem pode ser elemento, como "#meuId" ou ".minhaClass").
    • speed (parâmetro opcional) é a velocidade da animação. Use número em ms ou valores notáveis, como "slow", "normal" (padrão) e "fast".
    • force (parâmetro opcional) é comportamento da animação (open ou close). Se estiver vazio, o comportamento será variado, ora abre, ora fecha.
    • A vantagem de usar a função isolada (ao invés de escrever outra função) é o vínculo com a Ui, como as chamadas callbefore e callback
Controle geral de sanfona
Abrir/retrair várias safonas, estilo slide-show e slide-hide
  1. Pré-requisito
    • Possuir uma ou mais sanfonas
    • Coloque a class data-all="true" em cada uma dessas sanfonas
  2. Crie um novo elemento (qualquer elemento Html) e coloque a class ui_accordionAll para ser o gatilho das demais sanfonas
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use data-label para alterar o texto do gatilho quando ele estiver ativo, ex: data-label="fechar"
  1. Após a animação da sanfona, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_accordion_all(obj) e implemente as ações que irão ocorrer após a animação
    • obj é o objeto que gera o efeito (gatilho). Como exemplo, a função pode testar se gatilho está ativo, if(obj.hasClass("active")){}.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Sanfona gêmeas
Conteúdo safonado estilo slide-show e slide-hide
  1. Pré-requisito
  2. Coloque a class data-twin="true" em cada uma dessas sanfonas
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. É possível agrupar sanfonas gêmeas para que um grupo não interfira no outro
    • Para isso, insira o atributo data-group nas sanfonas que farão parte do grupo
    • Informe um rótulo qualquer que identifique o nome desse grupo, exemplo data-group="meu grupo"
  1. Após a animação da sanfona, usuários avançados podem implementar uma função do tipo callback para cada sanfona. Consulte a função sanfona para saber mais.
  2. Para sanfonas gêmeas, não use o data-clickoutside
    • A princípio, o efeito parece similar, no entanto, os data-clickoutside são recolhidos quando se clica em qualquer elemento da página. Já as sanfonas gêmeas devem recolher somente ao clicar no(s) elemento(s) irmão(s)
Slider Alfabeto
  1. Coloque a class ui_alphabet em um contâiner que contém a lista
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. A lista iniciará no primeiro item.
    • Use o atributo data-alphabet-pos e digite a posição inicial desejada (número), exemplo data-alphabet-pos="5" ou o termo random para que a exibição inicial seja randômica, exemplo data-alphabet-pos="random".
  2. A orientação do slider é horizontal.
    • Caso queira usar a lista vertical, use o atributo data-alphabet-axis="y".
    • Por padrão, a altura da lista vertical será de 350 pixels. Para alterar esse valor, use o atributo data-alphabet-axis-y-h e informe o valor em px ou %.
  3. Em dispositivos touch, a lista pode ser rolada por swipe (sem uma barra de rolagem). Para ter o mesmo efeito em desktops, use iScroll (a função será ajustada para desktops, caso encontre iScroll)
Âncora animada
Links animados dentro da mesma página
  1. Use links de âncora normais: <a href="#sua_ancora">ancora</a> e <a name="sua_ancora"></a>
    • O framework implementará animação nas âncoras comuns Html
  2. Para carregar uma âncora animada automaticamente após o carregamento da página: acrescente uma tralha (#) ao final da URL e, em seguida, o name da âncora, da class ou do id, exemplos:
    • http://www.url.com.br#anchorName
    • http://www.url.com.br#meuId
    • http://www.url.com.br#minhaClass
    Ps: qualquer marcação (tag) pode ser usada para ancorar class ou id.
  3. Também é possível ancorar automaticamente uma página quando ela tiver parâmetros (qualquer parâmetro)
    • Para isso, use a classe ui_anchorPoint em algum elemento
    • Esse elemento será ancorado sempre que a página tiver parâmetros (útil para páginas de pesquisa que usam método GET)
  1. Para alguns projetos, há a necessidade de considerar barras fixas presas ao topo do layout
    • Trata-se de um caso específico, para isso, altere a varíavel f_topBar no core do framework.
  2. Após a animação de ancoragem, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_anchor(obj) e implemente as ações que irão ocorrer após a animação, onde obj é o objeto ancorado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. Também está disponível uma função para ancorar objetos manualmente
    • Para isso, use anchor(elem,speed) em qualquer ação ou evento, onde elem é o seletor de um objeto, exemplo: "#meuElemento" ou ".meuElemento" (também pode ser um objeto, como $(objeto)); e speed é a velocidade da ancoragem em ms ou com valores notáveis: slow, normal (padrão) e fast.
    • Caso necessário, ancorar conta com uma função callback_anchored(obj) para implementar ações que irão ocorrer após a animação, onde obj é o objeto ancorado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Resumo em bloco
Sanfona estilo slide-show e slide-hide após contar tags.
  1. Envolva o texto que você deseja resumir dentro de um elemento com class ui_block, seja em span, div, etc. (esse é o gatilho)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Determine qual será a marcação (tag) divisora:
    • Para isso, use no gatilho o atributo data-tag e informe qual elemento será contado para o resumo, ex: data-tag="<br>" (Padrão)
    • Qualquer tag pode ser usada para determinar o corte
  2. Opcionalmente, indique também qual será o limite de ocorrências da tag escolhida, seja ela a padrão ou a customizada:
    • Use no gatilho o atributo data-num e informe o valor limite, ex: data-num="5" (Padrão)
  3. Também é possível cutomizar o rótulo do gatilho:
    • Use o atributo data-label e indique o rótulo, ex: data-label="Leia Mais" (Padrão)
    • O mesmo vale para o rótulo quando o botão estiver ativo. Nesse caso, use atributo data-label-active e indique o rótulo desejado, ex: data-label-active="Esconder" (Padrão)
  4. Para alterar a posição do gatilho para contrair o conteúdo, use data-trigger-at-the-end="true". Padrão: false.
  5. Outra opção é desabilitar o botão para retrair o conteúdo, ou seja, ao clicar uma única vez para revelar o conteúdo, o botão não estará mais disponível.
    • Para isso, use o atributo data-single-click="true".
  6. Para controlar a velocidade de abertura, use o atributo data-speed.
    • Indique a velocidade (em ms) ou use valores notáveis, como slow, normal (padrão) ou fast.
  7. Também é possível alterar a tag do gatilho, muito útil para aplicar a função dentro de um link sem que esse gere conflito com o <a> em que está contido.
    • Para isso, use o atributo data-element e indique a tag desejada, com a, span, button, etc.
  8. Use o atributo data-anchor="true" no gatilho para ancorar a página até ele quando clicado
  1. Se os atributos não forem usados, a tag padrão será: <br> e o limite 5.
  2. Usuários avançados podem criar funções quando o resumo estiver pronto
    • Para isso, crie a função callready_block()
  3. Após a animação do resumo, também é possível implementar uma função do tipo callback
    • Para isso, crie a função callback_block(obj, objHidden) e implemente as ações que irão ocorrer após a animação
    • Onde obj é o objeto com o texto completo e objHidden é o objeto da parte oculta. Como exemplo, a função pode testar a parte oculta está visível, if(objHidden.is(":visible")){}.
  4. Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callready e callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Resumo em linha
Sanfona exclusiva para textos como um pequeno resumo.
  1. Envolva o texto que você deseja resumir dentro de um elemento com class ui_brief, seja em span, div, etc. (esse é o gatilho)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Determine o limite de caracteres
    • Coloque no gatilho o atributo data-num, ex: data-num="100". O padrão é 360
  2. Determine o rótulo do botão "Leia Mais"
    • Coloque no gatilho o atributo data-label, ex: data-label="Continuar leitura" (Padrão: Leia Mais)
    • Ainda no gatilho, use o atributo data-label-active para alterar o rótulo quando ativo, ex: data-label-active="Esconder" (Padrão: -)
  3. Para alterar a posição do gatilho para contrair o conteúdo, use data-trigger-at-the-end="true". Padrão: false.
  4. Outra opção é desabilitar o botão para retrair o conteúdo, ou seja, ao clicar uma única vez para revelar o conteúdo, o botão não estará mais disponível.
    • Para isso, use o atributo data-single-click="true".
  5. Para controlar a velocidade de abertura, use o atributo data-speed.
    • Indique a velocidade (em ms) ou use valores notáveis, como slow, normal (padrão) ou fast.
  6. Também é possível alterar a tag do gatilho, muito útil para aplicar a função dentro de um link sem que esse gere conflito com o <a> em que está contido.
    • Para isso, use o atributo data-element e indique a tag desejada, com a, span, button, etc.
  7. Use o atributo data-anchor="true" no gatilho para ancorar a página até ele quando clicado
  1. Usuários avançados podem criar funções quando o resumo estiver pronto
    • Para isso, crie a função callready_brief()
  2. Antes ou depois da animação do resumo, também é possível implementar uma função do tipo callbefore e callback
    • Para isso, crie as funções callbefore_brief(obj,objHidden) e/ou callback_brief(obj,objHidden) e implemente as ações que irão ocorrer antes ou depois da animação, respectivamente.
    • Onde obj é o objeto com o texto completo e objHidden é o objeto da parte oculta. Como exemplo, a função pode testar a parte oculta está visível, if(objHidden.is(":visible")){}.
  3. Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callready, callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Carrossel
Carrossel de itens
  1. Crie um contâiner <div> e use a class ui_carousel
    • Dentro desse contâiner, crie uma lista <ul>
    • Cada item da lista, <li>, será um item do carrossel
  2. Insira dois <a>’s para criar os controles de navegação
    • Um <a> deve ter a class ui_carouselPrev e o outro ui_carouselNext.
  3. Insira um elemento para receber os itens de paginação
    • Coloque a class ui_carouselPage (essse elemento pode ser qualquer tag Html)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use em ui_carrousel o atributo data-page e informe a quantidade de itens para ser navegado por vez. Padrão: data-page="1"
  2. Use em ui_carrousel o atributo data-pos para informar o item inicial. Padrão: data-pos="4"
  3. Use em ui_carrousel o atributo data-full para exibir 1 item por vez, data-full="2" para 2 itens por vez e assim sucessivamente. Padrão: data-full="false"
  4. Somente para carrossel com data-full e data-page maior que 1, use em ui_carrousel o atributo data-loop="true" para deixá-lo em loop padrão: data-loop="false"
  5. Somente para carrossel com data-full, data-page maior que 1 e data-loop="true", use em ui_carrousel o atributo data-autoplay e indique o valor em milissegundos para que o carrossel mova sozinho padrão: data-autoplay="false"
  6. Use em ui_carrousel o atributo data-resize="true" para remontar o carrossel ao redimensionar o navegador. Muito útil quando há estilos diferentes setados em callbefore_carousel();
  1. Pode usar mais de um carrossel na mesma página.
    • Cada ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no ui_carousel mais próximo de acordo com a ordem de renderização da página.
    • Exemplo: o primeiro ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no primeiro ui_carousel, o segundo ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no segundo ui_carousel renderizado no código-fonte e assim sucessivamente.
    • Ou seja, não é necessário que um contenha o outro.
  2. Antes do início do carrossel, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_carousel(); e implemente as ações que irão ocorrer antes de montagem do carrossel
    • A função pode ser útil para manipular atributos data-* ou demais caracteristicas dos carrosseis (existindo mais de um carrossel, considere usar id’s para identificá-las)
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callbefore em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. Evitar estilo inline quando usar data-resize, pois o estilo inserido pela Ui para o comportamento full deve ser removido ao remontar o carrossel em um estilo não full e isso só é obtido removendo todos os estilos inline, incluindo estilos inseridos pelo usuário, já que não há um modo de retornar somente aqueles destinados ao full.
  4. Se o carrossel estiver dentro de um modal, garanta que o estilo Css da lista do carrossel (principalmente margin e padding) não herde comportamentos da janela modal.
Grid divs (igualar divs)
Equalizar células de um grid
  1. Insira a classe ui_equalItem em todos os elementos do grid
  2. Envolva todas as células ui_equalItem em uma div com a classe ui_equal
  3. Pode usar mais de uma vez na mesma página, onde cada ui_equal será independente do outro
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. A maior célula determina a altura das demais células por linha
    • Para igualar a altura de todas as células, independente da linha, use em ui_grid o atributo data-perline, ex: data-perline="false"
  2. Por padrão, o grid terá 3 colunas.
    • Use o atributo data-columns em ui_grid e informe o número de colunas, ex: data-columns="4"
  3. O espaçamento padrão horizontal e vertical entre as células é de 10 pixels.
    • Para alterar o valor do espaçamento horizontal, use o atributo data-margin-horizontal em ui_equal, ex: data-margin-horizontal="20"
    • Faça o mesmo para alterar o valor do espaçamento vertical através do atributo data-margin-vertical, ex: data-margin-vertical="20"
Tratamento de links
Links externos
  1. Insira no documento Html um checkbox com o id ui_link
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. A função altera a visualização e o comportamento dos links externos para informar ao usuário sobre a mudança de contexto e navegação, sem descumprir com os padrões web.
    • Para alterar esse padrão, marque o checkbox para abrir os links externos em uma nova janela sem depender do atributo depreciado target="_blank"
    • A preferência ficará armazenada no navegador do usuário por meio do cookie
  2. Habilitando a função modal, a mensagem será aberta através dessa ferramenta. Caso contrário, ela será visualizada pelo próprio navegador.
  3. Proposta
    • O atributo target não faz parte da especificação da XHTML 1.1 Link Externo. Por isso, não é uma marcação validada Link Externo, mesmo para abrir novas janelas (target="_blank").
    • De acordo com a W3C Link Externo, o usuário deve ter o poder de escolha durante a abertura de um link. Ou seja, não cabe à aplicação impor a abertura de uma nova janela ou aba.
    • Segundo Jakob Nilsen Link Externo, usuários tem um modelo mental claro sobre links e quaisquer situações contrárias podem causar confusão. Uma interação consitente serve como razão adicional para evitar abrir novas janelas do navegador: o resultado padrão para clicar em um link é que a página de destino substituirá a página de origem na mesma janela do navegador. Qualquer outra coisa é uma violação das expectativas dos usuários e os fazem se sentirem inseguros na Web. (Top Ten Mistakes Web-Design de 1999, ponto 3 Link Externo e Avoid Within-Page Links Link Externo).
Filtrar resultado
Filtrar resultado
  1. Coloque a classe ui_filter no campo de texto que irá filtrar o resultado
  2. Coloque a classe ui_filterItem em cada item da lista dos resultados e ui_filterItens no elemento que envolverá todos os itens
    • Essa lista pode ser uma tabela (<table>), lista simples (<ul>), um conjunto de parágrafos (<p>), um conjunto de contâiners (<div>), etc.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use no campo de texto o atributo data-label para alterar o rótulo do inicial do campo
    • Informe o valor que desejar, exemplo: data-label="Digite um termo"
  2. Também é possível usar o atributo data-no-result no campo de texto para alterar o texto quando não houver resultado
    • Informe o valor que desejar, exemplo: data-no-result="Resultado não encontrado"
  3. Ainda no campo de texto, use no campo de texto o atributo data-show-reset-button="true" para inserir um botão para limpar o campo de busca
  4. Use o atributo data-show-count no mesmo campo de texto para informar o elemento html que receberá o número de resultados encontrados
    • Informe o seletor do elemento html, exemplo: data-show-count=".foo" ou data-show-count="#foo"
    • Caso necessário, use o atributo data-show-count-pattern="Resultado vazio|1 resultado|{x} resultados". para alterar as frases padrões de data-show-count.
  1. A função também conta com o uso de tags em cada ui_filterItem para ampliar o seu significado e a possibilidades de encontrá-lo.
    • Para isso, use o atributo data-tags e informe o texto e/ou palavras-chave que serão indexados à pesquisa
    • Para aumentar a transparência da consulta, o texto de data-tags será adicionado ao resultado de .ui_filterItem que ele faz parte. Portanto, ele se tornará visível para o leitor.
    • Atenção: Em alguns casos específicos, o texto de data-tags não será adicionado ao .ui_filterItem. Isso está programado para não escrever em tags que não suportam texto, como <tr> ou <ul>.
  2. Se necessário, use o atributo data-html="true" para que a função confronte o html do conteúdo ao invés do seu texto.
    • Dessa forma, será possível buscar textos alternativos (alt), títulos (title), comentários ou outros conteúdos invisíveis.
    • Atenção: A função está preparada para não consultar outros atributos não indexáveis, como href, src, value, class, id, style, data-* e etc.
  3. Usuários avançados podem criar funções quando o filtro estiver pronto
    • Para isso, crie a função callready_filter()
  4. Também é possível implementar uma função do tipo callback após a filtragem
    • Para isso, crie a função callback_filter(xdi), onde xdi é o identificador do filtro, caso haja mais de um
  5. Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callready e callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Ajuste divs (posicionar divs)
  1. Adicione a classe ui_fit no elemento que envolve as demais divs ui_fitItem.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, ui_fit terá 2 colunas.
    • Para alterar o número de colunas, insira em ui_fit o atributo data-fit-cols e informe o número de colunas desejados
  2. O ajuste das divs em colunas será aplicado independentemente do tamanho da tela
    • Caso queira, use em ui_fit o atributo data-fit-from e informe o valor desejado (em pixels) que representará a largura inicial da tela para aplicar o efeito, exemplo: data-fit-from="768"
    • Existem valores notáveis para representar a largura, são eles: sm=576, md=768, lg=992 e xl=1200.
Elemento fixo
  1. Coloque a class ui_fixed no elemento que ficará fixo ao rolar a página
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, o objeto inicia a rolagem assim que o scroll o atinge.
    • Para alterar esse padrão, insira o atributo data-top e digite um número (em pixels) para determinar o espaçamento entre o objeto e o início da rolagem, ex: data-top="50".
  2. Por padrão, o objeto rolará até o fim da página.
    • Para alterar esse padrão, insira o atributo data-bottom e digite um número (em pixels) para determinar o limite de rolagem entre o objeto e a base do documento, ex: data-bottom="950".
  3. Atenção: O objeto de rolagem não pode ser descendente de elementos relativos, uma vez que ele alternará entre fixed e absolute em relação ao html, portanto, não relativo a qualquer um dos seus ancestrais.
  1. Usuários avançados podem citar outro elemento de DOM que terá a sua altura comparada com o objeto de rolagem para determinar se haverá a rolagem
    • Se usado, o elemento comparativo impedirá o rolamento caso o objeto de rolagem seja menor do que ele
    • Para isso, insira o atributo data-compare e cite o seletor do elemento
    • Ex: data-compare=".minhaClasse" ou data-compare="#meuId"
Controle de fonte
Alterar o tamanho da letra
  1. Insira os id’s ui_fontIncrease e ui_fontDecrease nos gatilhos que irão aumentar e diminuir a fonte, respectivamente
    • Esses elementos podem ser quaisquer marcações Html
  2. Envolva o conteúdo que sofrerá o efeito em um elemento com a class ui_font
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Os botões serão automaticamente desativados após 3 cliques
    • Para alterar esse padrão, use em ui_fontIncrease e ui_fontDecrease o atributo data-limit e informe o valor desejado, exemplo: data-limit="1".
  2. A fonte deve aumentar/diminuir 1 pixels por vez.
    • Para alterar esse padrão, use em ui_font o atributo data-step e informe o valor desejado (em pixels), exemplo: data-step="3"
  3. O mesmo documento pode ter vários ui_font (todos independentes entre si). Já os botões ui_fontIncrease e ui_fontDecrease devem ser únicos e controlarão todos os ui_font, cada qual com as suas respectivas características de tamanho de fonte, limite, step e etc.
  1. Todos os elementos filhos de ui_font serão escalonados, independente se há fonte própria, se recebem algum valor por hierarquia (inherit), se possuem tags próprias ou se estão fora de nodes (text nodes).
  2. Caso necessário, usuários avançados podem usar a classe ui_fontKeep que não será afetada pelo controle de fonte. Assim como o próprio elemento, os filhos de ui_fontKeep também preservarão o tamanho da fonte original.
Formulário
Máscaras e validações
  1. Dentro de um formulário, use o atributo name para cada campo de acordo com o seu tipo, seja para validação ou máscara:
    • Entradas de texto: ddd, telefone, telefone_completo, data, hora, periodo_inicial, periodo_final, data_nascimento, data_futura, cpf, cnpj, cep, email, confirmar_email, senha, confirmar_senha. Seleção: uf
    • Valores após hífen serão desconsiderados do name para a validação e máscara (a Ui faz uso do seletor por prefixo separado por hífen da jQuery). Assim, é possível usar vários inputs com a mesma característica, ex: name="data", name="data-agendamento" e name="data-nascimento" serão considerados (para validação e máscara) apenas como name="data".
      Isso pode ser útil quando há dois ou mais campos com a mesma validação. Nesse caso, use hífen após o name. Exemplo: Um input com name="email", outro input com name="email-remetente" e o terceiro input com name="email-destinatário".
      Não confundir esse caso do hífen com underline, que faz parte do nome, já que name="telefone" é diferente de name="telefone_completo".
    • Alternativamente ao name, também é possivel usar class para identificar esses campos. Os nomes são os mesmos acima, mas com o prefixo "ui_". Exemplo: name="email" ou class="ui_email", assim como name="cpf" ou class="ui_cpf" (o efeito será o mesmo).
    • SimpleUi está preparada para os principais inputs da Html 5, como email, tel, number, url, date, month, week e time.
  2. Para validar e submeter o formulário, use normalmente o input type="submit" padrão do html. Já para resetar os campos, use preferencialmente um elemento html (qualquer um) acompanhado da classe ui_resetForm, exemplo: <input type="button" value="Limpar" class="ui_resetForm" />. É possível usar o input padrão type="reset" do html, mas o .ui_resetForm é mais indicado com os campos de SimpleUi.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Opcionalmente, o atributo value pode ser usado com um valor inicial, como um rótulo informativo.
    • Para isso, coloque a classe ui_clean no campo com o valor falso
    • Esse valor é uma máscara, portanto, nulo, mesmo se submetido
    • Quando o foco atingir o campo, o valor inicial será zerado
    • Campos ui_clean receberão etiquetas (dicas), caso tooltip esteja incorporada a versão de SimpleUi
  2. Para obrigar o preenchimento/seleção de um campo:
    • Insira a class ui_required
    • Por padrão, os campos obrigatórios ui_required serão indentificados com asteriscos (*) no label anterior (prev) ao input (somente se esse label existir). Caso queira indicar um elemento diferente, use no input o atributo data-label-field com o seletor desejado, exemplo: .foo ou #foo.
  3. Por padrão, a mensagem de alerta em uma tentativa de submissão com erros aparecerá no topo do formulário.
    • Para etiquetar cada um dos campos, use o atributo data-alert-tip="true" no form.
    • Nesse caso, também é possível usar o atributo data-alert-tip-class e informar uma classe para customizar o box da etiqueta.
  1. A máscara e a validação serão atribuídos aos respectivos campos.
  2. Campos obrigatórios só serão submetidos após preenchimento dos dados e se eles estiverem de acordo com o seu tipo, como cpf, data, email e etc.
    • O mesmo vale para campos não obrigatórios, mas que foram preenchidos: a sua submissão só ocorrerá após o preenchimento correto dos dados de acordo com o seu tipo.
  3. Caso queira alterar uma mensagem de erro, use data-label-warning no campo com a frase desejada
  4. Antes da validação do formulário, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_submit(form) para ser chamada na primeira linha da submissão, antes dos testes de validação, onde form é o objeto (formulário) submetido.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  5. Após a validação do formulário, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_submit(valid) e implemente as ações que irão ocorrer na última linha da submissão, após os testes de validação, onde valid pode ser true ou false, de acordo com o resultado da validação do formulário submetido.
    • Ex: function callback_submit(valid){ if(valid){ alert("All done!"); }else{ alert("Ops!"); } }
    • Atenção: Se essa função callback for implementada, o return do formulário será false (caberá a função implementar a submissão ou não do formulário). Se optar pela submissão, use $("form").append("<input type=‘hidden’ name=‘ui_reSubmit’ value=‘yes’ />").submit(); a fim de evitar que callback_submit() caia em loop infinito (a função está preparada para não executar esse callback se o campo hidden ui_reSubmit existir no formulário testado).
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  6. Antes da animação de abertura com o alerta de erros, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_validation(form,alerts,fields), onde onde form é o objeto (formulário) submetido, alerts é o objeto da mensagem de erro e fields são os campos com erro
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  7. Após a animação de abertura com o alerta de erros, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_validation(form,alerts,fields) e implemente as ações que irão ocorrer após a animação, onde onde form é o objeto (formulário) submetido, alerts é o objeto da mensagem de erro e fields são os campos com erro.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Controle de checkbox
Marcar/desmarcar checkbox
  1. Envolva todos os checkbox em um elemento com a classe ui_checkAll
    • Pode ser qualquer marcação (tag), como span, li, div, etc.
  2. Coloque a classe ui_checkMain no checkbox que irá atuar em todos os demais checkbox.
    • O ui_checkMain deve ficar fora do ui_checkAll
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. É possível alternar o rótulo do botão ui_checkMain:
    • Para isso, use a classe ui_checkLabel em algum elemento que receberá o rótulo padrão "Marcar tudo/Desmarcar tudo" (Não é obrigatório)
    • Caso queira editar o rótulo padrão, insira em ui_checkLabel o atributo data-label-turnon com o valor inicial e data-label-turnon com o valor do rótulo quando ativo
  1. Pode usar mais de uma vez na mesma página (inclusive se contiver abas). Cada ui_checkMain irá atuar no ui_checkAll mais próximo de acordo com a ordem de renderização da página. Ou seja, não é necessário que um contenha o outro. Mas o primeiro ui_checkMain renderizado irá atuar no primeiro ui_checkAll encontrado na página e assim sucessivamente.
  2. O botão ui_checkMain pode ter ou não ter um value, mas o comportamento é diferente. Ou seja, use value="" (vazio) ou value="valor" ou não declare o value, entenda:
    • Se todos os checkbox estiverem marcados e se o botão ui_checkMain tiver um value com valor, consideramos o valor do botão ui_checkMain, resultado: page.html?parâmetro=todos
    • Se todos os checkbox estiverem marcado e se o botão ui_checkMain não tiver um value declarado, consideramos a mesma condicional do item 1, ou seja, passar o value do ui_checkMain, mesmo que ele não exista. Nesse caso, o resultado será só: page.html (sem parâmetros - ou value declarado) - Isso é necessário para algumas consultas que interpretam as chamadas sem parâmetros como uma consulta completa.
    • Se todos os checkbox estiverem marcados e se o botão ui_checkMain tiver um value vazio, então ignoramos a sentença acima. Nesse caso, a url será com todos os parâmetros juntos, resultado: page.html?parâmetro=1&parâmetro=2&parâmetro=3...
    • Se apenas alguns dos checkbox estiverem marcados, desconsideramos o value do botão ui_checkMain e consideramos apenas os check marcados, resultado da url: page.html?parâmetro=2&parâmetro=4...
Checkbox obrigatório
Habilitar Formulários com checkbox obrigatórios
  1. Envolva todos os checkbox em um elemento que contenha a classe ui_checkRadio
    • Esse elemento pode ser qualquer tag, como span, div, form, etc.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. O efeito prático é que um dos checkbox estará sempre marcado.
    • Caso queira que algum checkbox inicie marcado: use o atributo checked
  1. Pode usar mais de uma vez na mesma página com vários controle de checkbox independentes entre si.
Campos limitados
Limite de caracteres e campo numérico
  1. Coloque a classe ui_limited no input-text ou textarea
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use o atributo data-num para definir o número de caracteres, ex: data-num="10".
    • Senão for informado, o número limite padrão é 50
  2. Use o atributo data-count para determinar o objeto que servirá para informar o contador regressivo de caracteres restantes, ex: data-count="#meuContador
    • Senão for informado, não haverá nenhum contador.
  3. Opcionalmente, use a classe ui_numeric no campo de texto para limitar a entrada apenas de números
    • Se necessário, insira o atributo data-limit para informar o número máximo do campo, ex: data-limit="100"
Campo com termos proibidos
Restringir palavras e carateres
  1. Coloque a classe ui_escape no campo desejado.
    • O campo pode ser text ou textarea
  2. Informe a lista de termos excluídos no atributo data-escapes, ex: data-escapes="foo,bar"
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, os termos de data-escapes devem ser separados por vírgula (sem espaço).
    • Opcionalmente, use o atributo data-escapes-splitter para alterar esse divisor padrão, ex: data-escapes-splitter="-".
    • Isso pode ser muito útil quando a própria vírgula é um dos caracteres proibidos em data-escapes. Caso comum em consultas à bancos de dados onde a vírgula é um operador que trava a consulta, portanto, deve ser proibido.
  1. É possível adicionar uma classe especifica a mensagem de alerta (tootlip) quando o usuário digitar o termo proibido
    • insira em ui_escape o atributo data-class com o nome da classe.
Campos obrigatórios entre si
Não submeter o form até preencher pelo menos um dos campos
  1. Coloque a classe ui_single em todos os elementos (input, select, checkbox, etc.) que serão obrigatórios entre si.
    • O preenchimento de apenas um desses campos será suficiente para validar o formulário
  1. Uso no select
    • Apenas no select e nao em cada option do select
  2. Uso no checkbox
    • Todos os checkbox (inclusive para os checkboxes do tipo "marcar todos", caso exista)
  3. A frase informando a necessidade para "preencher" os campos será automaticamente ajustada para "selecionar" um opção quando os campos obrigatórios entre si forem apenas selects, radios ou checkbox
Galeria de imagens
Slide de imagens
  1. Envolva as imagens que irão compor a galeria dentro de um elemento com a classe ui_gallery
    • É essencial que as imagens tenham as mesmas dimensões
  2. Insira a legenda no atributo alt de cada imagem
    • A legenda aceita tags Html, como <b>, <i>, <em>, <strong>, <u>, <br />, etc.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada imagem da galeria:
    • Para isso, insira o atributo data-link="true" em ui_gallery
    • Dessa forma, é possível capturar a URL de cada imagem, seja para compartilhar ou abrir através de um endereço específico.
  2. Por padrão, as miniaturas das imagens aparecem na navegação
    • Para retirar as miniaturas, use em ui_gallery o atributo data-thumb="false"
    • Mas atenção: os itens da lista que compõe a paginação devem ter a mesma largura para que o carrossel calcule a dimensão e as posições ao rodar
  3. A navegação deve girar 1 miniatura por vez.
    • Para alterar esse padrão, use em ui_gallery o atributo data-steps e informe o valor desejado, ex: data-steps="4"
  4. A navegação tem início e fim
    • Para deixá-la em loop, use em ui_gallery o atributo data-loop="true"
  1. Pode usar mais de uma vez na mesma página. Cada ui_gallery será independente
Hifenização
  1. Adicione a classe ui_hyphen no elemento que envolve o texto a ser hifenizado.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, o hífen será aplicado em palavras com 10 caracteres ou mais.
    • Para alterar esse valor, inclua o atributo data-wbreakups e informe o número de caracteres desejados.
Modal
Janela modal
  1. Insira a classe ui_modal no elemento que será o gatilho do modal
    • Qualquer marcação (tag) pode ser usada como gatilho
  2. Imediatamente após o gatilho, insira outro elemento com o conteúdo do modal
    • A função está preparada para esconder o conteúdo e só exibí-lo após acionar o gatilho
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Como padrão, o conteúdo do modal está localizado após o gatilho. Veja como alterar essa padrão
    • Insira no gatilho o atributo data-obj e informe qual elemento possui o conteúdo do modal
    • Use valores notáveis, como prev para capturar o conteúdo do elemento anterior ao gatilho e next para o elemento posterior ao gatilho (padrão)
    • Também é possível informar o seletor do elemento que contém o conteúdo do modal, ex: data-obj=".minhaClass" ou data-obj="#meuId"
    • Independente do elemento que será o modal, a função ficará encarregada de escondê-lo para exibí-lo somente após o acionamento do gatilho
  2. Por padrão, a altura e largura são flexíveis, ou seja elas se ajustam conforme o conteúdo.
    • Se o conteúdo for maior do que a área disponível na tela, o modal ganhará automaticamente barras de rolagem, sem que seja necessário nenhuma configuração adicional
    • Caso necessário, é possível determinar a largura e a altura do modal. Para isso, insira no gatilho os atributos data-width e data-height informando os valores desejados (em pixels), ex: data-width="400" data-height="200"
    • Os atributos são independentes, ou seja, é possível usar apenas um deles ou os dois juntos
  3. Também é possível customizar o título do modal, veja como:
    • Coloque no gatilho o atributo data-title, ex: data-title="Minha Janela"
  1. Antes da animação do modal, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_modal(status) e implemente as ações que irão ocorrer antes da animação
    • Onde status pode ser "opening" ou "closing" de acordo com a visibilidade da janela.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callbefore em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  2. Após a animação do modal, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_modal(status) e implemente as ações que irão ocorrer após a animação
    • Onde status pode ser "opened" ou "closed" de acordo com a visibilidade da janela.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. Também é possível usar a função modal de modo isolado para abrir em eventos ou ações diversas
    • Para isso, use a função modal(title,elem,width,height)
    • Onde title é o título da janela
    • elem é o seletor do elemento, como "#meuElemento" ou ".meuElemento" (também pode ser um objeto, como $(objeto))
    • width é a largura da janela, height é a altura da janela.
    • Para fechar o modal manualmente, use a função modalClose();
    • No uso isolado da função modal, fica a critério do usuário esconder ou exibir o elemento que contém o conteúdo do modal
    • A vantagem de usar a função isolada (ao invés de escrever outra função) é o vínculo com a Ui, como as chamadas callbefore e callback
  4. Atenção: Para layouts responsivos, recomenda-se evitar o uso de data-width ou tratá-lo no callbefore. Outra opção viável ao não usar data-width é determinar a largura do elemento que contém o conteúdo do modal e usar media queries no css, exemplo: .meuElem{ width:800px; } @media all and (max-width: 800px) { .meuElem{ width:auto; } }
  5. Elementos com conteúdos para modal que contenham outros recursos da Ui (principalmente aqueles recursos que desenham ou editam visualmente seus objetos, como carrossel ou aba), devem ter largura definida por meio de Css (igual ou menor a data-width do modal) para que possam ser renderizados da maneira correta antes do modal inclui-lo na janela (ou omitir a largura data-width do modal para que a janela se adeque ao novo recurso).
  6. Também é recomendado esconder explicitamente, via Css (display:none), o elemento que contém o conteúdo do modal, caso outras funções criadas pelo usuário usem valores relacionados a altura desse elemento ou de seus ancestrais. Um erro pode ocorrer, pois o elemento que contém o conteúdo só será escondido depois que ele ficar pronto (ready). Equanto isso não acontece, uma função poderia capturar a sua dimensão (incluindo os seus ancestrais), uma vez que ele ainda se apresenta visível em tela. Outra alternativa para evitar este problema é retirar o elemento com o conteúdo do modal do container que terá a sua altura capturada, já que não importa a localização DOM do elemento que apenas cede o seu conteúdo para o modal.
Paginação
Agrupar e organizar elementos
  1. Envolva todo o conteúdo que deseja paginar em um elemento com a classe ui_page
  2. Envolva cada item da paginação em um elemento com a classe ui_pageItem
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. A paginação terá 10 itens por página
    • Para alterar esse padrão, use em ui_page o atributo data-perpage e informe o valor desejado, ex: data-perpage="20"
  2. Se achar necessário, gere o permalink para cada item da paginação:
    • Para isso, insira o atributo data-link="true" no elemento com a classe ui_page
    • Dessa forma, é possível indicar qual página será aberta ou capturar a URL após clicar em delas, seja para compartilhar ou abrir através de um endereço específico
  1. Após a paginação, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_pagination(pageNum,firstItem,LastItem) e implemente as ações que irão ocorrer após a paginação
    • pageNum é número da página atual, firstItem é o objeto que corresponde ao primeiro item da página atual e LastItem é o objeto que corresponde ao último item da página atual.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  2. A função de paginação pode ser usada mais de uma vez no mesmo documento
Apresentação
Apresentação de imagem
  1. Envolva a imagem em um contâiner com a classe ui_presentation.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Para alterar a navegação da apresentação, crie um novo atributo data-cases. Esse atributo pode ter valores os notáveis data-cases="vertical" ou data-cases="horizontal". Para outras situações, informe um valor com todas as posições da imagem, conforme descrição abaixo:
    • Cada posição é composta por: Left[px], Top[px], Zoom[% ou px(default)], Easing[String], Time[Number-MiliSeconds], Texto[String]. Texto, que representa a legenda, pode ser false, vazio (aspas ou a posição vazia) ou pode não existir. Pode, inclusive, existir em um frame, mas não em outro.
    • Cada case deve estar separado por ponto e vírgula, sendo que a última posição não deve ter tal separação
    • Veja um exemplo com 3 cases completos: data-cases="0,0,570,easeOutExpo,2000,Texto 1;540,230,1370,easeOutExpo,2000,Texto 2;160,730,2000,easeOutExpo,2000,Texto 3"
  2. Por padrão, a dimensão da apresentação será 100%, tanto para a largura, quanto para a altura, tornando-a flexível à janela onde está inserida
    • Para alterar essas dimensões, insira na div ui_presentation os atributos data-width e data-height e informe os valores desejados (em pixels), ex: data-width="570" data-height="370".
    • O valor de data-width ou data-height pode ser auto para que a janela se ajuste a mesma dimensão da imagem (largura ou altura). Evite usar auto nos dois atributos na mesma apresentação. Evite também altura auto para apresentação (data-case) vertical e largura auto para apresentação (data-case) horizontal.
    • O valor 100% (padrão) fará com que a apresentação se ajuste à janela em que ela está inserida (largura ou altura). Já o valor auto ajustará a apresentação à dimensão original da imagem (também largura ou altura).
    • O valor também pode ser em %, como data-width="100%" ou data-height="100%", que podem ser declarados, caso necessário.
    • Se a largua e altura estiverem em px, é possível usar o atributo data-scalable="true" (beta) para que a apresentação seja redimensionada proporcionalmente, independente do tamanho disponível, ex: data-width="4" data-height="3" data-scalable="true".
  3. Quando a largura da apresentação é superior ao tamanho disponível de tela, a apresentação será apenas uma miniatura clicável para abrir a navegação somente em tela cheia, muito comum em dispositivos móveis.
    • É possível forçar esse comportamento, ainda que haja espaço disponível para a apresentação. Para isso, use data-mobile-force-trigger=true.
    • Para alterar o rótulo da miniatura clicável, use o atributo data-mobile-trigger-label e informe o texto desejado.
  4. Os controles escondem e reaparecem quando o cursor estiver em cima da apresentação
    • Para deixar os controles sempre visíveis, insira o atributo data-autohide="false" em ui_presentation
  5. Para retirar o botão para visualizar a apresentação em tela cheia, use o atributo data-fullscreen="false" em ui_presentation
  6. Para retirar a navegação, use o atributo data-nav="false" em ui_presentation
    • Para visualizar a navegação completa com todas as páginas, use o atributo data-nav="big" em ui_presentation
  7. Para retirar a legenda, use o atributo data-text="false" em ui_presentation
  8. Caso necessário, é possível alterar a orientação dos botões de navegação. Para isso, use o atributo data-prev-next-orientation em ui_presentation. O valor pode ser vertical ou horizontal (padrão).
  9. Também é possível alterar o formato da apresentação quando ela estiver em fullscreen. Use o atributo data-fullscreen-stretching e informe um dos valores: uniform (padrão), fill ou fit.
  1. Para usuário avançados, é possível alterar a paginação por meio de ajax
    • Para isso, inclua um link chamando a função presChange
    • Ex: onclick="javascript:presentationChange("caminho.jpg"*, <Cases>*, Largura*, Altura*, css, xdi);
    • Onde css são atributos de css passados para ui_presentation e xdi é o identificador do elemento (caso não seja passado, será o primeiro presentation). Ambos os campos são opicionais.
  2. Os objetos de controle podem ser implementados diretamente no Html, caso necessário. Dessa forma, os objetos podem estar localizados em qualquer posição da árvore DOM, não necessariamente abaixo de ui_presentation, como é feito automaticamente pela Ui.
    • Os objetos são: ui_presentationPrev e ui_presentationNext; ui_presentationPaginationMin ou ui_presentationPaginationBig; ui_presentationLegenda; ui_presentationFull.
    • Caso opte por incluir os objetos diretamente no Html, não é necessário implementar todos eles. É possível implementar apenas um, alguns ou todos os objetos-controle. Aqueles que não estiverem explícitamente escritos no Html continuarão sendo implementados pela Ui.
    • Cada objeto encontrado em DOM fará referência para o presentation de acordo com a sua ordem de renderização. Ou seja, o primeiro ui_presentationPrev irá controlar o primeiro ui_presentation renderizado no código-fonte e assim sucessivamente.
    • Atenção: Se existir mais de um presentation na página, é desejável que todos eles sigam o mesmo padrão, ou seja, se escolher implementar algum controle diretamente no Html, faça isso com todos os controles do mesmo tipo. Exemplo: Se há 3 presentations, sendo que um deles precisa que a ui_presentationLegenda esteja direto no Html, logo os outros 2 também precisam ter ui_presentationLegenda implementados diretamente no Html.
  3. A função retorna eventos do tipo callback de ações e estado da apresentação, são eles:
    • presentationOnBefore(pos,id); presentationFirstShow(pos,id); presentationFirstHide(pos,id); presentationLastShow(pos,id); presentationLastHide(pos,id); presentationOnAfter(pos,id)
    • Onde pos é a posição atual da apresentação e id é o identificador da apresentação
    • Todas essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar uma função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Impressão
Janela modal
  1. Crie um gatilho com a classe ui_print que irá disparar a impressão
    • Esse elemento pode ser qualquer tag
  2. Em qualquer parte do seu Html, envolva o conteúdo que será impresso dentro de uma classe ui_printDiv.
    • Esse elemento pode ser qualquer tag
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, o documento é impresso imediatamente após a abertura da janela de impressão.
    • Para alterar esse padrão, use o atributo data-auto com o valor false. Padrão: true
    • Nesse caso, será incluído um botão de imprimir à janela de impressão
  2. A largura e altura da janela de impressão são, respectivamente: 920px e 600px
    • Para definir uma largura, use o atributo data-width e informe o valor desejado, ex: data-width="500"
    • Para a altura, siga o mesmo procedimento usando o atributo data-height
  3. Insira um elemento com a classe ui_printInvisible para incluir um conteúdo invisível à impressão
    • O conteúdo desse elemento não aparece em tela, mas será impresso
    • Pode ser qualquer tag e estar localizado em qualquer local
      do Html, desde que esteja dentro do box ui_printDiv.
  4. Insira um elemento com a classe ui_printForbidden para incluir um conteúdo vedado à impressão
    • O conteúdo desse elemento aparece em tela, mas não será impresso
    • Pode ser qualquer tag e estar localizado em qualquer local
      do Html, desde que esteja dentro do box ui_printDiv.
  1. A função de impressão pode ser usada mais de uma vez no mesmo documento
    • Havendo mais de um elemento de impressão, cada botão (gatilho) fará referência para o seu respectivo elemento de acordo com a ordem de renderização.
    • O primeiro botão irá imprimir o primeiro ui_printDiv, o segundo botão irá imprimir o segundo ui_printDiv renderizado no código-fonte e assim sucessivamente.
    • Ou seja, a restrição é não cruzar botões e conteúdos de impressão.
  2. O elemento ui_printDiv imprime o conteúdo dentro dele, exclusive. Ou seja, o próprio elemento não é renderizado no popup de impressão.
  3. No core do Framework, há uma função que captura os eventos antes e depois de uma impressão via browser que pode ser configurada pors usuários avançados
Remover conteúdo vazio
Remover elemento(s) em função de outro(s)
  1. Insira a classe ui_remove nos elementos que deseja testar
    • Esses elementos podem ser quaisquer marcações Html
    • Se um deles estiver vazio, os outros também serão
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. É possível agrupar elementos testados para que um grupo não interfira no outro
    • Para isso, insira o atributo data-group nos ui_remove que farão parte do grupo
    • Informe um rótulo qualquer que identifique o nome desse grupo, exemplo data-group="meu grupo"
  1. Usuários avançados contam com uma função auxiliar para implementar scripts se um elemento testado estiver cheio ou vazio, veja como:
    • Chame a função testEmpty(elem), onde elem é o seletor do objeto testado. Ex: testEmpty(".seletor");
    • As ações decorrentes desse teste podem servir para manipular outras ações, ex: if(testEmpty(".seletor")) alert("Está vazio") else alert("Não está vazio");
Reordenação
Re-odernar listas
  1. Coloque a classe ui_reorder no elemento que será o gatilho da reordenação
    • Esse elemento pode ser qualquer marcação Html
    • Ele pode estar em qualquer lugar do Html
  2. Coloque a classe ui_reorderItem na lista de itens
    • Essa lista pode ser uma tabela (<table>), lista simples (<ul>) ou uma lista ordanada (<ol>)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use no gatilho o atributo data-label para alterar o rótulo do gatilho quando ativo
    • Informe o valor que desejar, exemplo: data-label="Desfazer ordenação"
Aba swipe
Navegação por abas toouch swipe
  1. Crie uma lista <ul> e <li>’s, onde cada item da lista será uma aba swipe
    • Envolva <ul> em uma div com a class ui_swipetab.
  2. Abaixo de ui_swipetab, crie uma nova lista<ul> e <li>’s.
    • Envolva o novo <ul> em uma div com a class ui_swipetabContent.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, as abas não terão permalink, pois sua relevância pode variar de acordo com os momentos de acesso. Exemplo: um conteúdo de aba visualizada em dois momentos: durante o compartilhamento do remetente e a visita do destinatário. Logo, faz mais sentido privilegiarmos a aba inicial, onde ficam as informações mais relevantes e atemporais.
    • Se achar necessário, gere o permalink para cada uma das abas. Para isso, insira o atributo data-link="true" em ui_swipetab. Dessa forma, é possível capturar a URL após clicar em uma aba, seja para compartilhar ou abrir através de um endereço específico.
    • Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado em ui_swipetab.
    • Já o nome de cada aba pode ser alterado pelo atributo data-link-custom em cada li filho de ui_swipetab.
  1. Antes e depois da renderização das abas swipe, usuários avançados podem implementar funções do tipo callbefore e callback
    • Para isso, crie as funções callbefore_swipetab(xdi) e/ou callback_swipetab(xdi) e implemente as ações que irão ocorrer após a construção das abas swipe, onde xdi é o identificador do ui_swipetab.
  2. Também é possível implementar funções do tipo callbefore e callback após o clique nas abas
    • Para isso, crie as funções callbefore_swipetab_click(xdi,posicao) e/ou callback_swipetab_click(xdi,posicao) e implemente as ações que irão ocorrer após o clique em cada uma das abas, onde xdi é o identificador do ui_swipetab e posicao é a posição da aba corrente.
  3. Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e/ou callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Aba
Navegação por abas
  1. Crie uma lista <ul> e <li>’s, onde cada item da lista será uma aba
    • No <ul> use a class ui_tab
    • Em cada <li>, insira links (<a>’s). Nesses links, use o atributo href para identificar o conteúdo que será aberto (veja o próximo item desse tutorial), ex: href="minhaAba"
  2. Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da aba.
    • As div’s devem possuir uma classe ui_tabContent e um id de acordo com o href da aba de referência (ex: minhaAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada uma das abas:
    • Para isso, insira o atributo data-link="true" na tag <ul>. Dessa forma, é possível capturar a URL após clicar em uma aba, seja para compartilhar ou abrir através de um endereço específico.
    • Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado no ul.
    • Já o nome de cada aba será o próprio id de cada li filho de ui_tab.
  2. Por padrão, as abas ocupam toda a largura destinada à elas
    • Nesse caso, a largura será dividida uniformemente pelo número de abas presentes. Ou seja, esse número pode não ser inteiro e alguns navegadores antigos não interpretam decimal de pixels. Independente disso, não há malefícios à função
    • Para que as abas não ocupem toda a largura, use em ui_tab o atributo data-full="false", onde cada aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das abas serão iguais, determinada pelo tamanho da maior.
    • Caso queira, o atributo data-align pode definir o alinhamento das abas, através dos valores left (padrão), center e right.
    • Vale lembrar que se data-full="false" ou data-full="equal" for usado, o padding-right e padding-left de li terão efeito sobre as abas. (isso não ocorre quando data-full é igual a true ou vazio)
  1. O espaçamento entre as abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da aba.
    Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última aba, caso necessário.
  2. Também é possível manter a borda abaixo das abas. Para isso, use o atributo data-keep-border-bottom="true" na lista </ul>.
  3. Após o clique nas abas, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_tab(obj) e implemente as ações que irão ocorrer após o clique em uma das abas, onde obj é objeto (<li>) clicado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Sub aba
Navegação por sub-abas
  1. Pré-requisito
    • Possuir uma estrutura em Abas
  2. Dentro de um conteúdo de uma aba: crie uma lista <ul> e <li>’s, onde cada item da lista será uma sub-aba
    • No <ul> use a class ui_tabsub.
    • Em cada <li>, insira links (<a>’s). Nesses links, use o atributo href para identificar o conteúdo que será aberto (veja o próximo item desse tutorial), ex: href="minhaSubAba"
  3. Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da sub-aba.
    • As div’s devem possuir uma classe ui_tabsubContent e um id de acordo com o href da aba de referência (ex: minhaSubAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada uma das sub-abas:
    • Para isso, insira o atributo data-link="true" na tag <ul>. Dessa forma, é possível capturar a URL após clicar em uma sub-aba, seja para compartilhar ou abrir através de um endereço específico.
    • Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado no ul.
  2. Por padrão, as sub-abas ocupam toda a largura destinada à elas
    • Nesse caso, a largura será dividida uniformemente pelo número de sub-abas presentes. Ou seja, esse número pode não ser inteiro e alguns navegadores antigos não interpretam decimal de pixels. Independente disso, não há malefícios à função
    • Para que as sub-abas não ocupem toda a largura, use em ui_tabsub o atributo data-full="false", onde cada sub-aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das sub-abas serão iguais, determinada pelo tamanho da maior.
    • Caso queira, o atributo data-align pode definir o alinhamento das sub-abas, através dos valores left (padrão), center e right.
    • Vale lembrar que se data-full="false" ou data-full="equal" for usado, o padding-right e padding-left de li terão efeito sobre as sub-abas. (isso não ocorre quando data-full é igual a true ou vazio)
  1. O espaçamento entre as sub-abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da sub-aba.
    Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última sub-aba, caso necessário.
  2. Também é possível manter a borda abaixo das abas. Para isso, use o atributo data-keep-border-bottom="true" na lista </ul>.
  3. Após o clique nas abas, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_tab(obj) e implemente as ações que irão ocorrer após o clique em uma das sub-abas, onde obj é objeto (<li>) clicado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Miniaturas
Perfilar imagens de um box
  1. Use a class ui_thumb no box que contém a imagem, desde que esse box tenha uma largura e altura definidas.
  2. É possível usar a função de miniaturas em layouts fluídos, onde não há uma largura definida para o box.
    • Nesse caso, use data-thumb-fluid="true". Assim, não é necessário definir uma dimensão do box, muito útil em layouts fluidos.
    • Opcionalmente, é possível complementar data-thumb-fluid="true" com o atributo data-thumb-fluid-ratio e definir a proporção desejada da miniatura, ex: 4:3 (padrão), 16:9, 1:1, etc.
Pronto! Isso é suficiente. Entenda a função:
  1. A função identifica o perfil da imagem do box entre: vertical, quadrado ou horizontal. A partir disso, ela determina qual será o redimensionamento apropriado para cada imagem, se pela largura ou altura do box.
  2. A imagem não precisa ter altura e largura prévias, afinal, ela será redimensionada. O box, por sua vez, deve ter as 2 dimensões informadas, seja por estilo inline, incorporado ou importado. Através dessas informações as imagens serão ajustadas.
Caso queira, você pode customizar a função:
  1. Por padrão, as imagens são centralizadas no box, sejam elas verticais ou horizontais
    • Para alterar esse comportamento, insira o atributo data-thumb-align na imagem ui_thumb e indique "true" para centralizar (padrão), "false" para não centralizar ou "true-vportrait" para que as imagens horizontais continuem centralizadas, mas alinhadas em uma proporção áurea aproximada (golden-ratio) para as imagens verticais, o que pode ser muito útil para retratos.
  1. Após o ajuste das imagens, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_thumb(total) quando todas as imagens estiverem configuradas, onde obj é o elemento que envolve a imagem, xdi é o contador da imagem, img é a imagem propriamente dita e total é o total de miniaturas.
    • Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Alternância de classe
  1. Adicione a classe ui_toggleclass no elemento que alternará entre classes de acordo com a largura da tela.
  2. No mesmo elemento, coloque o atributo data-wbreakups com os seus breakpoints, que são os conjuntos de classes para cada largura de tela (em pixels).
    • Os breakpoints são separados por ponto-e-virgula (;). Já a separação entre largura e classe em cada breakpoints é feita por dois pontos (:), ex: data-wbreakups="768:red;1200:blue".
    • Existem valores notáveis para representar a largura, são eles: sm=576, md=768, lg=992 e xl=1200.
  3. O elemento ficará sem classe quando a largura de tela for menor do que a largura definida para a primeira classe do breakpoint.
    • Se for necessário delegar uma classe para ser aplicada abaixo do primeiro breakpoint, use data-class-default e insira a classe desejada.
Tooltip
Mensagem de tooltip
  1. Coloque a classe ui_tooltip no elemento que terá um tooltip
    • Qualquer elemento pode receber tooltip, <a>, <span>, <div>, etc.
  2. Nesse mesmo elemento, coloque o atributo data-tooltip onde o valor será a mensagem
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use o atributo data-align para informar qual será o alinhamento horizontal da mensagem.
    • Valores notáveis: center (padrão), left, right, cursor-center, cursor-left e cursor-right
  2. Use o atributo data-valign para informar qual será o alinhamento vertical da mensagem.
    • Valores notáveis: top (padrão), bottom, cursor-top e cursor-bottom
  3. Use o atributo data-text-align para informar qual será o alinhamento do texto da mensagem.
    • Valores notáveis: center (padrão), left e right
  4. A largura do tooltip é fluída, ou seja ajusta-se de acordo com o contéudo da mensagem
    • Caso necessário, use o atributo data-width para determinar a largura da mensagem e informe o valor em pixels
  1. A mensagem do tooltip aceita html, como <b>, <i>, <strong>, <br />, <em>, <u>, etc.
  2. Para adicionar uma classe especifica a mensagem, insira em ui_tooltip o atributo data-class com o nome da classe.
  3. Usuários avançados podem alterar a mensagem em tempo de execução a partir de eventos, como no exemplo do uso de tooltip combinado com accordion:
    • onclick="if($(this).hasClass(‘active‘)) $(this).attr(‘data-tooltip‘,‘Visualizar mais itens‘); else $(this).attr(‘data-tooltip‘,‘Esconder itens‘); toolTip($(this));"