JavaScript

Esta página mostra os componente que dempendem de JavaScript para o seu funcionamento, além dos respectivos links para a documentação dos componentes de terceiros utilizados.

Para mais detalhes sobre a invocação dos componentes veja os arquivos contidos na pasta src/js do projeto.

Barra de Acessibilidade

Barra com links e funcionalidades para auxiliar na acessibilidade.

Ver no GitHub

Exemplo:

<nav class="acessibility-bar">
    <p>
        <a href="" title="Barra de acessibilidade" onclick="openAcessibilidade(); return false;"><i class="fa fa-wheelchair"></i></a>
    </p>
    <ul>
        <li class="right">
            <a href="#irconteudo" accesskey="1" title="Alt+1 para ir para Conteúdo">
                Ir para Conteúdo <span class="hotkey">1</span></a>
        </li>
        <li>
            <a href="#irmenu" accesskey="2" title="Alt+2 para ir para Menu">
                Ir para Menu <span class="hotkey">2</span></a>
        </li>
        <li>
            <a href="acessibilidade.html" title="Página sobre Acessibilidade">Acessibilidade</a>
        </li>
    </ul>
</nav>

Datepicker

Componente que mostra um calendário nos campo de data.

Ver no GitHub

Exemplo:

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2" for="inputDatepicker">Datepicker</label>
        <div class="col-md-6">
            <div class="input-group date">
                <input type="text" name="datepicker" class="form-control datepicker data"
                       data-date-start-date="0d" data-date-end-date="+30d" autocomplete="off"
                       id="inputDatepicker">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </div>
    </div>
</form>

Timepicker

Componente para facilitar o preenchimento de componentes do tipo hora.

Ver no GitHub

Exemplo:

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2" for="inputTimepicker">Spinner</label>
        <div class="col-md-6">
            <input type="text" name="timepicker" class="form-control hora timepicker"
                   placeholder="  :  " id="inputTimepicker">
        </div>
    </div>
</form>

Spinner

Componente para facilitar o preenchimento de componentes do tipo numérico.

Ver no GitHub

Exemplo:

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2" for="inputSpinner">Spinner</label>
        <div class="col-md-6">
            <input type="text" name="spinner" class="form-control spinner" size="5" maxlength="6"
                   max="99999" min="-99999" placeholder="0" id="inputSpinner">
        </div>
    </div>
</form>

Autocompletar

Autocompletar facilita a seleção de um item em listas muito grandes de intens, onde um select simples compromete a usabilidade. O java script contido no arquivo src/autocomplete trata todos os inputs com class="autocomplete" acrescentando a ele a funcionalidade de autocompletar

Segue lista de atributos de configuração:

url
Endereço da chamada Ajax que lista os campos a serem selecionados.
result
O id do input que recebera o resultado da seleção do autocomplete.
withQuery
Informa se o valor que esta sendo digitado deve ser concatenado a url informada no atributo apropriado e descrito anteriormente
code
Valor a ser informado no campo "result" após a seleção
name
Valor a ser informado no proprio input do autocomplete após a seleção

Ver no GitHub

Exemplo:

 <form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2" for="inputAutocomplete">Autocomplete</label>
        <div class="col-md-6">
            <input type="text" id="inputAutocomplete" class="autocomplete form-control"
                   url="cidades.json" autocomplete="off"
                   result="inputHidden" placeholder="Cidade do Mato Grosso do Sul..."
                   withQuery="false" code="id" name="nome">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="inputHidden">Hidden</label>
        <div class="col-md-6">
            <input type="text" name="autocomplete_hidden" class="form-control" id="inputHidden"
                   disabled="disabled">
        </div>
    </div>
</form>

Popups de Mensagens

Diversos popups para mostrar mensagens no lugar do alert, confirm e prompt do padãos dos browsers.

Ver no GitHub

Exemplo:

<button class="btn btn-primary btn-lg" onclick="bootbox.alert('Este é um alerta.');">
    <i class="fa fa-comment fa-lg"></i> Alert
</button>

<button class="btn btn-danger btn-lg" onclick="
            bootbox.confirm('Este é uma confimação. Confirmar?', function (result) {
                console.log(result)
            });">
    <i class="fa fa-comment fa-lg"></i> Comfirm
</button>

<button class="btn btn-warning btn-lg" onclick="
            bootbox.prompt('Entre com um texto:', function (result) {
                console.log(result)
            });">
    <i class="fa fa-comment fa-lg"></i> Prompt
</button>

Mensagens de Notificação

Mostrar mensagens de notificação como por exemplo, resultados de processamento do backend.

Ver no GitHub

Exemplo:

<button class="btn btn-primary" onclick="notify()">
    <i class="fa fa-flag fa-lg"></i> Notificação
</button>
<script type="application/javascript">
    var notify = function (){
        $.notify({
            icon: 'fa fa-flag',
            title: "<strong>Notificação:</strong> ",
            message: "Bacon ipsum dolor amet kevin leberkas frankfurter capicola pork loin t-bone kielbasa brisket chuck tongue picanha pork chop short loin corned beef. "
        });
    }
</script>

Máscaras

Plugin do JQuery que formata máscaras para o preenchimento dos campos.

Ver no GitHub

Exemplo:

<form class="form-horizontal">
    <div class="form-group text">
        <label class="control-label col-md-2" for="cpf">CPF:</label>
        <div class="col-md-4">
            <input type="text" name="cpf" class="form-control mask" mask="000.000.000-00"
                   placeholder="___.___.___-__" id="cpf" >
        </div>
    </div>
    <div class="form-group text"><label class="control-label col-md-2" for="cnpj">CNPJ:</label>
        <div class="col-md-4">
            <input type="text" name="cnpj" class="form-control mask"
                   mask="00.000.000/0000-00" placeholder="__.___.___/____-__" id="cnpj"
                   >
        </div>
    </div>
    <div class="form-group text">
        <label class="control-label col-md-2" for="telefone">Telefone:</label>
        <div class="col-md-4">
            <input type="text" name="telefone" class="form-control mask"
                   mask="(00)0000-0000" placeholder="(__)____-____" id="telefone"
                   >
        </div>
    </div>
    <div class="form-group text">
        <label class="control-label col-md-2" for="ano-semestre">Ano/Semestre:</label>
        <div class="col-md-4">
            <input type="text" name="ano_semestre" class="form-control mask"
                   mask="0000/0" placeholder="____/_" id="ano-semestre"
                   >
        </div>
    </div>
</form>

Loading

Overlay para tela de espera.

Ver no GitHub

Exemplo:

startLoading(); setTimeout(stopLoading(), 2000);

Grid

UIGrid, é um componente que faz parte da AngularUI suite, componentes de interface mais populares do AngularJS.

Ver no GitHub

Exemplo:

ID Nome 
<table id="myTable" style="width:100%"
       class="table table-striped table-bordered table-hover table-condensed table-responsive">
    <thead>
    <tr>
        <th>ID</th>
        <th>Nome</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script type="application/javascript">
    $('#myTable').DataTable({
        ajax: {
            url: 'cidades.json',
            dataSrc: ''
        },
        columns: [
            {data: 'id'},
            {data: 'nome'}
        ],
        language: {
            url: "../dist/json/dataTable_pt-br.json"
        },
        dom:
        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12'p>>" +
        "<'row'<'col-sm-12'i>>",
    });
</script>

Treeview

Apresenta a visualização de uma estrutura hierarquica em formato de árvore.

Ver no GitHub

Exemplo:

<div id="data"></div>
<script type="application/javascript">
    $('#data').jstree({
        'core': {
            'data': [
                {"text": "Raíz 0", "icon": "fa fa-caret-square-o-right text-muted"},
                {
                    "text": "Raíz 1", "icon": "fa fa-caret-square-o-right text-muted", "children": [
                    {"text": "Filho 1", "icon": "fa fa-user text-muted"},
                    {
                        "text": "Filho 2", "icon": "fa fa-user text-muted", "children": [
                        {"text": "Filho 1", "icon": "fa fa-user text-muted"},
                        {"text": "Filho 2", "icon": "fa fa-user text-muted"}
                    ]
                    }]
                }
            ]
        }
    });
</script>