Comment créer une interface redimensionnable en CSS3
La grande variété et les types d'écrans utilisés pour afficher des informations font qu'il est nécessaire que vos commandes CSS3 permettent à l'utilisateur de redimensionner les éléments que nécessaire. Dans la plupart des cas, vous pouvez tout simplement permettre à l'utilisateur de faire l'élément toute taille. Cependant, il peut y avoir des situations où vous devez surveiller la quantité de redimensionnement de sorte que vous pouvez adapter le contenu pour répondre aux besoins du conteneur.
L'exemple suivant montre comment redimensionner un objet et de surveiller sa taille. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Interactions dossier de la Code téléchargeable comme ResizeContent.HTML).
$ (function () {$ ("# ResizeMe") redimensionnable ({minWidth:. 200, minHeight: 60, redimensionner:. function (event, ui) {$ ("# Contenu») html ("Largeur:" + ui .size.width + "
Hauteur: "+ ui.size.height) -}}) -}) -Cet exemple est intéressant car il montre comment définir les propriétés ainsi que réagir aux événements. Dans ce cas, les propriétés minWidth et minHeight garder l'élément d'une taille minimale spécifique - l'utilisateur ne peut pas faire plus petit élément.
Le code répond également à l'événement resize. Il ya une exigence particulière pour le redimensionnement que vous devez savoir à propos. Le conteneur redimensionnement est distinct de l'élément de contenu. Voici le code HTML pour cet exemple:
Paragraphe redimensionnable
Le style associé, #ResizeMe, fournit une bordure autour de la
Lorsque vous voulez écrire le contenu à l'écran, vous devez utiliser l'élément de contenu, pas l'élément conteneur. Sinon, les poignées de dimensionnement va disparaître, et l'utilisateur ne sera pas capable de redimensionner l'élément après la première fois. Dans ce cas, la taille actuelle du conteneur apparaît dans le cadre de l'objet ui transmis au gestionnaire de l'événement resize.
Vous pouvez accéder à l'information que les propriétés size.width et size.height, comme indiqué dans le code.
-
Comment redimensionner la scène Adobe bord animé -
Comment utiliser les options de mise en page dans le panneau de propriété CSS de Dreamweaver -
Comment créer des listes à puces en HTML5 -
Comment remplacer styles CSS3 - Comment définir la taille des unités de mesure relative pour HTML5 et CSS3 programmation
- Ajouter jquery classes d'interface utilisateur pour les styles de thème
Comment utiliser les objets DOM de base pour gérer le contenu de l'application Le but de toute application javascript est de gérer le contenu. Cela signifie l'ajout, la suppression et la modification du document HTML qui contient les différents éléments qui soutiennent la structure et le contenu. Ces objets donnent…
Balises html commune Le tableau ci-dessous présente quelques-unes des balises HTML les plus courants que vous utilisez pour construire votre site web. Une fois que vous avez travaillé en HTML pour un petit moment, ces balises deviendront une seconde nature pour…
Quatre types de feuilles de style en cascade dans la conception web Cascading Style Sheets (CSS) se répartissent en quatre types différents (ou styles). Lorsque vous comprenez comment ces quatre types différents de travailler, vous serez coiffer vos pages Web plus efficacement.Pour garder votre CSS organisée,…
Comment créer une bordure autour d'une image en CSS3 Un des changements les plus courantes que vous pouvez faire à une image dans CSS3 est d'ajouter une bordure. Cela déclenche l'image de l'autre contenu sur la page. Bien sûr, CSS3 offre une large gamme de types de frontières. L'astuce est…
Comment créer une interface déplaçable en CSS3 Parfois, un utilisateur a besoin de repositionner les éléments à l'écran pour les rendre plus faciles à voir ou à travailler avec. En CSS3, la création d'un environnement dans lequel l'utilisateur peut déplacer des éléments ne doit pas…
Comment créer une interface largable en CSS3 Parfois, un utilisateur doit faire glisser un élément vers un récipient et le déposer dans le conteneur. Il existe de nombreux exemples de ce processus de CSS3 dans les applications actuelles.Par exemple, le concept de glisser un élément à…
Comment créer une interface sélectionnable dans CSS3 Ce qui permet de choisir parmi une liste d'éléments de CSS3 réduit le risque que l'utilisateur entrera des informations incorrectes. Heureusement, HTML5 vient déjà avec un certain nombre de contrôles de sélection, mais vous pouvez constater…
Comment créer une interface sortable en CSS3 Certains types de tri sont faciles pour les ordinateurs à faire, et vous voulez que votre codage de CSS3 pour créer cette situation. Par exemple, un ordinateur peut mettre des élements dans l'ordre alphabétique beaucoup plus rapidement qu'un…
Comment sélectionner des éléments avec jQuery en CSS3 Vous pouvez utiliser jQuery pour effectuer une vaste gamme de sélections d'objets dans votre application de CSS3, mais pour la plupart, vous utiliser les sélecteurs de base. Vous pouvez en savoir plus sur eux à jQuery. Voici une liste des…
Comment faire pour coiffer les paragraphes, les titres, et les pieds avec CSS3 Lorsque vous êtes style paragraphes, titres, et pieds de page, la plupart des travaux peuvent être automatiquement accompli par la création de styles tag Redéfinir pour le tag et cependant de nombreuses balises de titre que vous souhaitez…
Comment utiliser jQuery pour créer une interface à onglets dans CSS3 Pour certains sites une interface à onglets est la meilleure méthode pour afficher les informations. CSS3 a le code d'utiliser la méthode jQuery pour créer une interface à onglets.$ (function () {// Création de variables pour tenir TabHeads de…
Comment travailler avec curseur en CSS3 Sliders donnent à l'utilisateur la possibilité de saisir une valeur visuellement - comme partie d'un tout. En CSS3, un curseur garantit que l'utilisateur entre une valeur correcte dans une plage de valeurs, de sorte que vous ne devez pas vous…
Comment travailler avec les onglets dans CSS3 Beaucoup de développeurs utilisent des interfaces à onglets pour réduire la complexité de l'application. Si vous pouvez attirer l'attention de l'utilisateur sur un élément à la fois, vous réduisez le risque d'entrée errant. Dans cet exemple…
Insertion de contenu avant, après, et à l'intérieur des éléments avec jQuery jQuery vous fournit des moyens faciles d'obtenir les données dans votre page Web. En particulier, vous pouvez insérer le contenu que vous voulez, n'importe où sur votre page. Les exemples qui suivent utilisent tous cet exemple de code:Ma page de…