Como criar uma interface de Resizable em CSS3

A grande variedade e tipos de telas usadas para exibir informações tornam necessário que os seus comandos CSS3 permitem que o usuário redimensionar elementos, conforme necessário. Na maioria dos casos, você pode simplesmente permitir que o usuário faça o elemento de qualquer tamanho. No entanto, pode haver situações em que você precisa para monitorar a quantidade de redimensionamento de modo que você pode adaptar o conteúdo para atender às necessidades do recipiente.

O exemplo a seguir mostra como redimensionar um objeto e monitorar seu tamanho. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 interações do código para download como ResizeContent.HTML).

$ (Function () {$ ( "# ResizeMe") redimensionável ({minWidth:. 200, minHeight: 60, redimensionar:. Função (evento, ui) {$ ( "# Conteúdo") html ( "Largura:" + ui .size.width + "
Altura: "+ ui.size.height) -}}) -}) -

Este exemplo é interessante porque mostra como definir propriedades, bem como responder a eventos. Neste caso, as propriedades MinWidth e MinHeight manter o elemento de um tamanho mínimo específico - o usuário não pode fazer o elemento menor.

O código também responde ao evento de redimensionamento. Há uma exigência especial para o redimensionamento que você precisa saber sobre. O redimensionamento recipiente é separado do elemento de conteúdo. Aqui está o HTML para este exemplo:

Parágrafo redimensionável

O estilo associado, #ResizeMe, fornece uma borda em torno da

Quando você quer escrever o conteúdo para a tela, você deve usar o elemento de conteúdo, e não o elemento de recipiente. Caso contrário, as alças de dimensionamento irá desaparecer, e o usuário não será capaz de redimensionar o elemento depois da primeira vez. Neste caso, o tamanho atual do recipiente aparece como parte do objeto ui passado para o manipulador de eventos de redimensionamento.

Pode aceder a informação embora as propriedades e size.width size.height, como mostrado no código.