TimePicker e DatePicker Android

Escrito por Matheus Piscioneri. Em Android

O Android oferece controles para o usuário escolher um tempo ou data em caixa de diálogos com Time Picker e Date Picker. Cada picker fornece controles para selecionar cada parte do tempo (hora, minuto, AM / PM) ou data (dia, mês, ano). Isso ajuda a garantir que os usuários podem escolher um horário ou data em que é válido, formatado corretamente, e ajustado para a localidade do usuário.

O Google recomenda que você use DialogFragment, ele gerencia o ciclo de vida da dialog para você e permite que você exiba os pickers em diferentes configurações de layout, como um dialog básico em aparelhos ou como uma parte incorporada do layout em telas grandes.

Embora DialogFragment foi adicionado pela primeira vez para a plataforma no Android 3.0 (API nível 11), se o seu aplicativo suporta as versões mais antigas do Android, você pode usar a classe DialogFragment que está disponível na biblioteca de suporte para compatibilidade com versões anteriores .

 

Criando um Time Picker

Para exibir uma TimePickerDialog usando DialogFragment , você precisa definir uma fragment que se estende DialogFragment e retornar um TimePickerDialog a partir do método onCreateDialog().

Aqui está um exemplo:

Mostrando o time picker

Uma vez que você definiu um DialogFragment como a mostrada acima, você pode exibir o time picker, criando uma instância do DialogFragment e chamando show().

Por exemplo, aqui está um botão que chama um método para mostrar o diálogo:

Quando o usuário clica neste botão, o sistema chama o seguinte método:

Este método chama show() em uma nova instância do DialogFragment definido acima. O método show() requer uma instância de FragmentManager e uma tag única para o fragment.  

 

Criando um Date Picker

Criar um DatePickerDialog é como criar um TimePickerDialog . A única diferença é o dialog que você cria para o fragmento.

Exemplo:

Mostrando o date picker

Uma vez que você definiu um DialogFragment como a mostrada acima, você pode exibir o date picker, criando uma instância do DialogFragment e chamando show().

Por exemplo, aqui está um botão que chama um método para mostrar o diálogo:

Quando o usuário clica neste botão, o sistema chama o seguinte método:

  pickers     Fonte: www.developer.android.com

Somente números – Jquery

Escrito por Matheus Piscioneri. Em Html, Javascript, JQuery

Algo muito utilizado no tratamento de entrada de dados, em um formulário web, é bloquear determinado campo para aceitar somente números.

Segue abaixo uma pequeno script que fará todo o trabalho:

 

Dessa forma, sempre que tivermos um campo que usar a classe ‘somentoNumero’, ele passará a aceitar somente valores numéricos.

 

Exemplo:

  jquery

A propriedade CSS list

Escrito por Matheus Piscioneri. Em Css, Html

Mudando o estilo das listas HTML

A propriedade list define as características (valores) das listas HTML. As propriedades list são as listadas abaixo:
  • list-style-image…………. imagem como marcador da lista;
  • list-style-position……….onde o marcador da lista é posicionado;
  • list-style-type……………tipo do marcador da lista;
  • list-style……………………maneira abreviada para todas as propriedades;
 

Valores válidos para as propriedades do lista

  • list-style-image:
    1. none
    2. URL: url(caminho/marcador.gif)
  • list-style-position:
    1. outside: marcador fora do alinhamento do texto
    2. inside: marcador alinhado com texto
  • list-style-type:
    1. none: sem marcador
    2. disc: círculo (bolinha cheia)
    3. circle: circunferência (bolinha vazia)
    4. square: quadrado cheio
    5. decimal: números 1, 2, 3, 4, …
    6. decimal-leading-zero
    7. lower-roman: romano minúsculo i, ii, iii, iv, …
    8. upper-roman: romano maiúsculo I, II, III, IV, …
    9. lower-alpha: letra minúscula a, b, c, d, …
    10. upper-alpha: letra maiúscula A, B, C, D, …
    11. lower-greek
    12. lower-latin
    13. upper-latin
    14. hebrew
    15. armenian
    16. georgian
    17. cjk-ideographic
    18. hiragana
    19. katakana
    20. hiragana-iroha
    21. katakana-iroha
  Os tipos de 11 a 21 são de uso específico e sem suporte total pelos navegadores atuais e não serão tratados neste tutorial. Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito do tutorial.  

list-style-image…imagem para marcadores de lista

Este exemplo demonstra como definir uma imagem de marcador de listas A folha de estilo acima resultará nesta lista:
  • Item um
  • Item dois
  • Item tres
 

list-style-position…posição dos marcadores de lista

Este exemplo demonstra como posicionar os marcadores de listas A folha de estilo acima resultará nesta lista:
  • Este texto destina-se a demonstrar o valor: “inside” dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:”inside” dos marcadores de listas.
  • Este texto destina-se a demonstrar o valor: “outside” dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:”outside” dos marcadores de listas.
 

Definir os marcadores de listas não ordenadas

Este exemplo demonstra como definir os marcadores de listas não ordenadas. Este é o efeito da folha de estilo acima:
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
 

Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas ordenadas. Este é o efeito da folha de estilo acima:
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
 

Duas propriedades das listas em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades das listas. Você pode declarar duas das propriedades estudadas em uma regra única: A sintaxe geral é esta: list-style: position; imagem ou list-style: position; type podendo inverter a ordem. Veja o exemplo abaixo: A folha de estilo acima resultará nesta lista:
  • Texto para demonstrar a propriedade de declaração única para listas usando CSS – Folhas de Estilo em Cascata;
  • Item dois;
  • Item tres.
css Fonte: www.maujor.com

LayoutIt! Construtor de Interface

Escrito por Matheus Piscioneri. Em Css, Html, Javascript, JQuery

Crie um código frontend de forma simples e rápida com Bootstrap usando o Construtor de Interface Drag & Drop.

Layoutit! é uma ferramenta online dedicada à criação de layouts com o framework Bootstrap. Este serviço não é um editor de sites, pois ele apenas oferece um molde no qual você trabalha para criar uma interface para uma página.

Para desenvolvedores Front-end:

Código HTML5 de alta qualidade gerado com o nosso construtor de interface.

Baseado nos elementos e componentes de Bootstrap. Bootstrap, Um ambiente robusto do frontend.

Todos os seus projetos podem ser Responsive CSS e Fluid.

layoutit! 2

Características: 

Arraste os mesmos componentes Bootstrap para o seu próprio template.

Fácil de integrar com qualquer linguagem de programação, basta fazer o download do HTML e começar a codificar o desenho dentro dele.

HTML profissional e validado onde você pode substituir com suas próprias variáveis, ciclos ou qualquer controle que você precisa.

Layoutit! NÃO é um construtor de site. É o kick-off para cada projeto frontend que você precisa desenvolver.

Layoutit! tem todos os elementos e componentes de Bootstrap para fazer seu programação frontend mais fácil sem a necessidade de ser um especialista em JavaScriptt, HTML5 ou CSS3. Você constrói o que você precisa para começar, depois você o codifica do jeito que você mais gosta!

Depois de finalizado é só fazer o download dos arquivos. Se quiser apenas o HTML é só copiar e utilizar em qualquer projeto.

layoutit!

Site: Layoutit!

Adicionar Remover Classe CSS com JavaScript

Escrito por Matheus Piscioneri. Em Javascript, JQuery

A manipulação de classes é uma das facilidades que o JQuery proporciona e facilita infinitamente nossa vida. Essas funções nos ajudam muito quando iremos definir um comportamento dinâmico para os elementos.

Com JavaScript e jQuery você pode manipular (adicionar e remover) suas classes CSS.

 
  • addClass: Podemos adicionar uma ou mais classes em um elemento para executarmos uma ação ou formatarmos o elemento com estilos determinados.
  • removeClass: Remove uma ou várias classes dos elementos escolhidos.
  • attr: Define ou retorna atributos e valores dos elementos selecionados.
  • removeAttr: Remove atributos e valores dos elementos selecionados.
  Para adicionar uma classe, é possível usar a função addClass:   Para remover a classe do exemplo anterior, podemos usar o mesmo seletor e a função removeClass:   ou podemos usar a própria classe como seletor:   Para mudar a classe de um elemento, é possível usar as duas funções simultaneamente:   É possível adicionar e remover mais de uma classe ao mesmo tempo:    

É possível, ainda, manipular as classes dos elementos utilizando a função attr do jQuery.

  Para pegar o valor de um atributo de um elemento utilizando JavaScript e jQuery podemos fazer o seguinte:   Caso a intenção seja mudar o valor do atributo do elemento usado no exemplo acima, é possível fazer da seguinte maneira:   Para remover o valor de um atributo, podemos fazer da seguinte maneira:   javascript Fonte: www.sitehtml.com.br