Jquery para iniciantes (parte 6) - jquery ui e leitura adicional

Video: Os Melhores Violões p / Iniciantes Parte 02 - Gregory Motta

Em nossa última lição neste jQuery para Iniciantes série tutorial, vamos dar uma breve olhada JQuery UI - o plugin jQuery mais amplamente utilizado para a adição de interfaces gráficas de usuário para aplicações web. De formas de fantasia e efeitos visuais, para os widgets que podem ser arrastadas, spinners e caixas de diálogo - jQuery UI dá-lhe o poder de criar ricos web UIs.

Se você não tiver, certifique-se de ler nossos artigos anteriores da série:

• Introdução: O que é jQuery e por que você deveria se preocupar?
• 1: selectores e Fundamentos
• 2: Métodos
• 3: À espera de carregamento da página e Funções anônimas
• 4: Eventos
• Depuração com Chrome Developer Tools
• 5: AJAX

O que é jQuery UI e por que devo usá-lo?

jQuery UI dá-lhe todos os componentes necessários para uma aplicação web moderna, com uma GUI. Por falta de uma melhor descrição, é uma coleção de widgets.

Para uma rápida idéia do que você pode fazer com ele, basta navegar em torno MakeUseOf. No nosso, o conteúdo é realmente apenas separado divs com uma lista desordenada de agir como um índice. Executar a função de guias jQuery sobre eles, e eles magicamente se transformam em guias. Impressionante! Você pode até carregar o conteúdo guia via AJAX, se quiser.

A página de Recompensas também usa uma caixa de diálogo “modal pop-up” para confirmar a ação do usuário e mensagens voltar. Para focar a atenção do usuário, você pode ter a caixa de diálogo dim o resto do conteúdo da página até que a interacção está terminado.

No nosso respostas local, usamos o simples tooltip recurso para fornecer dicas sobre botões.

jQuery UI realmente se destaca quando se trata de formas, dando acesso a uma infinidade de controles deslizantes e catadores. Eu sou um grande fã do datepicker widget de mim mesmo, que você pode carregar em cima de uma caixa de entrada de texto regular, onde o usuário deve digitar uma data.

Parece complicado, não é? Você pode imaginar codificação algo assim em puro javascript? Isto é como você fazê-lo com jQuery UI:

$ ("#dateField") .datepicker () -

Eu não vou gastar mais tempo explicando o quão incrível é porque as demos oficiais jQuery UI dar uma boa visão geral de todos os recursos disponíveis, bem como exemplos de código simples. Vá ler.

Adicionando jQuery UI

A maneira mais simples para começar com o jQuery UI é adicionar as seguintes linhas ao seu cabeçalho - mas certifique-se estes são adicionados após a referência principal jQuery, desde jQuery UI exige jQuery para ser pré-carregado. Você precisa tanto uma referência para o script plugin, e uma stylesheet que contém a descrição visual dos elementos da interface do usuário.

Neste caso, nós ligado ao tema chamado “ui-leveza” - mas há uma boa selecção de temas pré-fabricados que você pode escolher a partir daqui, ou criar o seu próprio. Tenha em mente que se você optar por criar o seu próprio tema, não vai ser hospedado pelo Google - escolher um pré-fabricados um, e esse link acima vai funcionar muito bem, alterando o nome do tema.

Em WordPress, acho que o método acima para ser a maneira mais fácil de incluí-la - apenas certifique-se de fazê-lo depois wp_head () tem sido chamado. O método oficial WordPress é usar wp_enqueue_script () porém, detalhou nesta questão Stackexchange.

Personalizar o download

Um recurso interessante do site de download UI do jQuery é que você pode personalizar as características que você deseja, reduzindo assim o tamanho total do javascript. O tamanho total do script com tudo habilitado (Não incluindo uma folha de estilo, o que você precisa também incluem) é sobre 230kb. Então, enquanto você poderia reduzir o tamanho do que com um download costume, se você estiver usando mais de 50% do conjunto de recursos, não é realmente vale a pena. Usando o padrão, biblioteca completa, você pode fazer uso da versão Google Hospedado - que é provável que já esteja armazenada em cache no navegador dos usuários de qualquer maneira. Se você só precisa de alguns recursos, porém, fazer um download personalizado e servir um arquivo minimizados localmente a partir de seu site.

Recursos

Nós chegamos ao fim da nossa mini-série, então para onde ir a partir daqui? Felizmente, esta é a internet, eo Google é uma coisa:

Video: Video aula completa de ajax

• Uma das melhores maneiras de aprender é começar a usá-lo para construir coisas legais. Aqui são 19 tutoriais únicas jQuery para seus projetos web.
• 33 (principalmente imagens relacionadas) ideias jQuery.
• Smashing Magazine continua a ser um favorito sólida no meu feed RSS, e eles têm um grande arquivo de jQuery material relacionado para aprender.
• Tuts + tem uma série de vídeos livre de 30 dias em jQuery que é bem vale a pena assistir, com mais de 40.000 assinantes até agora!
• Uma coleção de links para 53 tutoriais jQuery, de 1stwebdesigner.

Eu também sugerem aprender alguns básicos PHP, o que você precisa para lidar com qualquer AJAX ou processamento do lado do servidor de formas. Lembre-se, jQuery é apenas uma linguagem do lado do cliente que é executado no navegador, para que o seu fantástico novo aplicativo web não vai fazer muito sem algum processamento do lado do servidor. WordPress, é claro, é uma ótima maneira de começar a aprender PHP, personalizando temas e escrever seus próprios plugins.Como Ajax verificam o seu WordPress ComentáriosComo Ajax verificam o seu WordPress ComentáriosPor padrão, o sistema de comentários WordPress é totalmente inadequada. Você poderia mudar para um sistema de terceiros, como Livefyre ou Disqus, mas se você preferir manter tudo em casa ou algum outro tipo de ...consulte Mais informação

Agora, ter um momento para dar palmadinhas nas costas por ter vindo até aqui - você é incrível - e sentir-se livre para compartilhar qualquer comentário ou talvez alguns recursos adicionais nos comentários.