jQuery UI Menu. Manual de uso

Neste artigo falaremos do que é e o que proporciona o jQuery User Interface Menu.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 21/11/13
Valorize este artigo:
Esta é uma guia para implementação de um menu dinâmico realizado com a biblioteca jQuery UI e o plugin Menu.

O que é o jQuery User Interface Menu?

Dentro do jQuery User Interface encontramos toda uma serie de elementos de programação da interface de usuário pré programados e prontos para serem integrados em nossos projetos HTML. Trata-se de uma ampla biblioteca JavaScript que abarca desde efeitos dinâmicos até menús, calendários, etc.
O lugar de Internet de referencia e download do componente Menu é: http://jqueryui.com/menu/

Iremos esmiuçando as capacidades que nos proporcionará nos sucessivos títulos que, assim, rapidamente são:
  • Criação de um menú a partir de uma lista não ordenada
  • Adaptação do menú com estilos pré desenhados do jQuery User Interface
  • Desabilitar e reabilitar o menú
  • Personalização do menú mediante estilos
  • Adaptação com estilos para um menú mostrado horizontalmente

Qual é o ponto de partida

Começaremos pelas tarefas de inicialização e como mostrar um menú em nossa página Web; o ponto de partida é uma lista não ordenada, como por exemplo a mostrada no Listado 1 e na figura anexa.
As opções de menú serão finalmente aquelas entradas das listas que contêm os hipervínculos associados.

Listado 1: Lista não ordenada que nos servirá de base para o menú flutuante.


<!DOCTYPE html>
<html>
<head>
<title>Menús flotantes, sólo esquema</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<div>
<ul>
<li>Dante
<ul>
<li><a href="#11">Biografía</a></li>
<li><a href="#12">Narrativa</a></li>
<li><a href="#13">Obra poética</a></li>
</ul>
</li>
<li>Shakespeare
<ul>
<li><a href="#21">Biografía</a></li>
<li><a href="#22">Narrativa</a></li>
<li><a href="#23">Obras teatrales</a></li>
<li>Varios
<ul>
<li><a href="#241">Obras menores</a></li>
<li><a href="#242">Obras críticas</a></li>
</ul>
</li>
<li><a href="#25">Referencias</a></li>
</ul>
</li>
<li>Balzac
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra poética</a></li>
<li><a href="#33">Narrativa</a></li>
</ul>
</li>
<li>Quevedo
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra teatral</a></li>
<li><a href="#33">Obra poética</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

Como passar do esquema ao menú flutuante

Observemos o Listado 2, que passaremos a comentar com detalhes.
Listado 2: Uso básico de um componente Menu

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Menú básico</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
.ui-menu {
width: 200px;
}
</style>

<script>
$(function () {
$("#menu").menu();
});
</script>

</head>
<body>

<div style="position: absolute; top: 20px; left: 0px; z-index: 100">
<ul id="menu">
<li><a href="#">Dante</a>
<ul>
<li><a href="#11">Biografía</a></li>
<li><a href="#12">Narrativa</a></li>
<li><a href="#13">Obra poética</a></li>
</ul>
</li>
<li><a href="#">Shakespeare</a>
<ul>
<li><a href="#21">Biografía</a></li>
<li><a href="#22">Narrativa</a></li>
<li><a href="#23">Obras teatrales</a></li>
<li><a href="#">Varios</a>
<ul>
<li><a href="#241">Obras menores</a></li>
<li><a href="#242">Obras críticas</a></li>
</ul>
</li>
<li><a href="#25">Referencias</a></li>
</ul>
</li>
<li><a href="#">Balzac</a>
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra poética</a></li>
<li><a href="#33">Narrativa</a></li>
</ul>
</li>
<li><a href="#">Quevedo</a>
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra teatral</a></li>
<li><a href="#33">Obra poética</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>


Se repassamos o código encontramos, por ordem sequencial:
  • No início do documento, na etiqueta , inseriremos as bibliotecas CSS e jQuery e os códigos correspondentes
  • A referencia à folha de estilos do User Interface de jQuery:
    jquery-ui.css
    Deve ser a primeira das bibliotecas CSS referenciadas
  • A referencia à biblioteca jQuery geral
    jquery-x.x.x.js
    Deve ser a primeira das bibliotecas JavaScript referenciadas
  • A referencia à biblioteca User Interface de jQuery
    jquery-ui.js
  • Uma função de inicialização do Menu
    $("#menu").menu();
    Que, como vemos, toma o elemento ao que vai associado e a função sem parâmetros simplesmente.
  • No corpo do documento, etiqueta irá o resto de elementos HTML, entre eles a definição do menú –lista não ordenada-
  • No esquema –lista não ordenada- acrescentamos referencias nulas -<a href="#">- aos cabeçalhos
  • principais, para que o ponteiro do mouse apareça como um dedo apontando e seja mostrada também uma ponta de seta à sua direita indicando que se trata de uma entrada de submenú
  • Identificamos a lista numerada para poder atribuí-la a um componente Menu

Jogando com os estilos

Até agora trabalhamos como referencias ao User Interface alojado no foro de jQuery. Dessa maneira dispomos de um modo muito cômodo e relativamente eficiente de criar os Datepicker, mas não de personalizar seus estilos, dado que se trabalha com um pré determinado –uma CSS referenciada específica, dada pelo administrador do jQuery User Interface-. No entanto, o próprio jQuery User Interface dispõe de numerosos estilos pré desenhados e prontos para serem utilizados à demanda; porém, para isso deveremos baixá-los e trabalhar com eles e referenciá-los no local –no próprio servidor-.

Poderemos baixar o jQuery User Interface completo, que inclui Menu. O endereço URL é: http://jqueryui.com/download/

Nesse processo de download, na parte inferior nos encontraremos com o apartado Theme, abrindo a lista podemos selecionar o estilo do Menu que vai ser baixado. Na realidade, de acordo com o que tenhamos selecionado previamente, é o estilo –o tema- dos componentes do jQuery User Interface que baixaremos.

É daí que se extraem os correspondentes CSS e diretórios images particulares.

Nota: No nosso exemplo renomeamos o arquivo CSS baixado com o intuito de poder trabalhar com diferentes estilos, acrescentado a ele o nome de estilo e carregando-o no local –veja a referencia correspondente no listado-. Trabalhando no local, também deveremos copiar em cada caso o correspondente diretorio images e se quisermos poder variar os estilos, dar um nome particular para cada um dos estilos –por exemplo images_sunny- e trocar as referencias no arquivo CSS correspondente.

Listado 3: Um menú baseado em um componente Menu, no que se utilizou o estilo Sunny

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Menú básico con estilo personalizado</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />

<style>
.ui-menu {
width: 200px;
}
</style>

<script>
$(function () {
$("#menu").menu();
});
</script>

</head>
<body>

<div style="position: absolute; top: 20px; left: 0px; z-index: 100">
<ul id="menu">
<li><a href="#">Dante</a>
<ul>
<li><a href="#11">Biografía</a></li>
<li><a href="#12">Narrativa</a></li>
<li><a href="#13">Obra poética</a></li>
</ul>
</li>
<li><a href="#">Shakespeare</a>
<ul>
<li><a href="#21">Biografía</a></li>
<li><a href="#22">Narrativa</a></li>
<li><a href="#23">Obras teatrales</a></li>
<li><a href="#">Varios</a>
<ul>
<li><a href="#241">Obras menores</a></li>
<li><a href="#242">Obras críticas</a></li>
</ul>
</li>
<li><a href="#25">Referencias</a></li>
</ul>
</li>
<li><a href="#">Balzac</a>
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra poética</a></li>
<li><a href="#33">Narrativa</a></li>
</ul>
</li>
<li><a href="#">Quevedo</a>
<ul>
<li><a href="#31">Biografía</a></li>
<li><a href="#32">Obra teatral</a></li>
<li><a href="#33">Obra poética</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

Menú con un estilo Sunny

Para mudar todo o estilo por outro pré-definido no foro de User Interface de jQuery bastará baixar novamente o código e mudar a folha de estilo (e o diretório images) pela nova.

Se o que desejamos é retocar parcialmente um estilo predefinido, recorremos a modificar os estilos da folha de estilos –arquivo CSS- baixado, ou com outro arquivo CSS complementar e referenciado posteriormente no arquivo HTML –para respeitar a ordem de prioridade da cascata de estilos-, ou então mediante estilos inline no próprio documento HTML.

Observemos o Listado 5; ali programamos um menú no que alteraremos o tamanho da fonte e seu estilo, por isso estabeleceremos um apartado style que sobrecarregará os estilos equivalentes da folha de estilos do User Interface de jQuery –arquivo CSS referenciado no começo-.

O aspecto final se observa na figura anexa, compare o resultado com o menú original de estilo Sunny.

Listado 4: Um menú modificado, baseado em um componente Menu no que foi utilizado o estilo Sunny e alguns estilos personalizados

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Menú básico con estilo personalizado y fuente y fondo personalizado</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />

<style>
.ui-menu {
width: 200px;
font: 13px Arial;
background: #00ff21;
}
</style>

<script>
$(function () {
$("#menu").menu();
});
</script>

</head>
<body>

...

</body>
</html>


Menú con un estilo Sunny modificado con CSS

Naturalmente, o retoque de estilos requer um conhecimento importante do arquivo fonte do jQuery User Interface, e uma boa dose de paciência e ensaio e erro, mas que em ocasiões valerá a pena para ir um passo mais à frente nos nossos trabalhos.

Menú desativado e reativado

Outra opção que pode ser de interesse é desativar o componente Menu, de maneira que deixe de ser funcional, embora siga estando presente.
O método a utilizar é disabled que, segundo seu único parâmetro, o ativará ou desativará, a sintaxe é:
  • $(referencia).menu("option", "disabled", true)
  • $(referencia).menu("option", "disabled", false)

Vejamos o listado que segue, no que programamos um componente Menu e dois botões de comando que chamam as funções de desativação e reativação.

Listado 5: Componente Menu associado a botões de comando para sua desativação e reativação.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Menú básico con desactivación y reactivación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />

<style>
.ui-menu {
width: 200px;
}
</style>

<script>
$(function () {
$("#menu").menu();
});

$(function () {
$("#disable").click(function () {
$("#menu").menu("option", "disabled", true);
});
});
$(function () {
$("#enable").click(function () {
$("#menu").menu("option", "disabled", false);
});
});
</script>

</head>
<body>
...
<div style="position: absolute; top: 200px; left: 0px">
<hr />
<input type="button" id="disable" value="disable" />
<input type="button" id="enable" value="enable" />
</div>
</body>
</html>

Menú desactivado


Menú reactivado

Menú com orientação horizontal

São varias as referencias encontradas na Web para converter um componente Menu em um menú horizontal, todas passam pela sobrecarga de estilos.
No Listado 6 adaptamos de forma fidedigna a versão recolhida no endereço URL: http://knowledgebase.bridge-delivery.com/jquery-ui-menu-horizontal-and-vertical/

Observe que o ponto chave é a inclusão dos estilos:
float:left;
Também é crítico o modo de inicialização:
$(referencia).menu({position: {at: "left bottom"}});

Se se eliminam os estilos left e se se inicializa como nos restantes exemplos, teríamos o menú vertical (;-)) –veja as figuras anexas-. O resto dos estilos sobrecarregados é complementar.

Listado 6: Adaptação de um componente Menu para uma disposição de menú horizontal mediante a sobrecarga de estilos

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Menú básico con estilo personalizado y horizontal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />

<style>
.ui-menu {
overflow: hidden;
font: 13px Arial;
}
.ui-menu .ui-menu {
overflow: visible !important;
}
.ui-menu > li {
float: left;
display: block;
width: auto !important;
}
.ui-menu ul li {
display:block;
float:none;
}
.ui-menu ul li ul {
left:120px !important;
width:100%;
}
.ui-menu ul li ul li {
width:auto;
}
.ui-menu ul li ul li a {
float:left;
}
.ui-menu > li {
margin: 5px 5px !important;
padding: 0 0 !important;
}
.ui-menu > li > a {
float: left;
display: block;
clear: both;
overflow: hidden;
}
.ui-menu .ui-menu-icon {
margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li {
float: left;
display: block;
}
</style>

<script>
$(function () {
$("#menu").menu({position: {at: "left bottom"}});;
});

</script>

</head>
<body>
...
</body>
</html>

Menú horizontal


Menú vertical

Conclusões

Neste artigo revisamos as diversas capacidades do componente Menu do jQuery User Interface. Também temos exemplos detalhados de como utilizá-las em nossas aplicações.
Esperamos que todo o exposto tenha servido de ajuda. Até o próximo artigo, boas horas de programação.





Comentários do artigo
Foram enviados 6 comentários ao artigo
6 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato