interface Web
js tutoriel
Comment implémenter l'assistant de formulaire à l'aide d'AngularJS_AngularJS
Comment implémenter l'assistant de formulaire à l'aide d'AngularJS_AngularJS
Aujourd'hui, nous allons créer un formulaire en plusieurs étapes avec animation en utilisant AngularJs et le formidable UI Router et le Module Angular ngAnimate. Cette technique peut être utilisée sur des formulaires volumineux où vous souhaitez simplifier les opérations des utilisateurs.
Nous avons vu que cette technologie a été appliquée à de nombreuses pages Web. Des éléments tels que les paniers d'achat, les formulaires d'inscription, les flux d'intégration et de nombreux formulaires en plusieurs étapes permettent aux utilisateurs de remplir plus facilement des formulaires en ligne.
Ici, nous allons le construire :
En utilisant UI Router, qui peut intégrer des états et afficher différentes vues pour chaque état, nous pouvons créer des formulaires en plusieurs étapes assez facilement.
Passons aux choses sérieuses et commençons à créer notre meilleur formulaire à ce jour !
Créer un projet
La création d'un projet a une structure de modèle. Elle nécessite un fichier de mise en page, un fichier de vue pour chaque formulaire, un fichier de format et un fichier JavaScript.
Voici la liste des fichiers, créez-les d'abord, puis remplissez le contenu
- - index.html
- - formulaire.html
- - formulaire-profile.html
- - formulaire-intérêts.html
- - formulaire-paiement.html
- - app.js
- - style.css
Chaque form-____.html représente un fichier html dans une structure hiérarchique. Ces structures créent finalement notre structure de formulaire.
Notre fichier de mise en page/modèle index.html
Nous commençons notre projet en créant un fichier principal pour introduire toutes les ressources dont nous avons besoin Ici, nous utilisons le fichier index.html comme fichier principal
.Maintenant, nous chargeons les ressources dont nous avons besoin (AngularJS, ngAnimate, Ui Router et autres scripts et feuilles de style) et configurons une vue UI pour indiquer au routeur UI où notre vue doit être affichée. Ici, nous utilisons Bootstrap pour appliquer rapidement des styles.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="formApp">
<div class="container">
<!-- views will be injected here -->
<div ui-view></div>
</div>
</body>
</html>
Après avoir terminé l'introduction de tous les fichiers, entrons dans app.js pour commencer à créer l'application Angular et la configuration de routage la plus basique. Remarquez comment nous avons appliqué l'application angulaire (formApp) au corps.
Créez notre application angulaire app.js
Créons maintenant l'application et les itinéraires. Dans une grande application, vous voudriez certainement distribuer vos applications, routes et contrôleurs Angular dans leurs propres modules, mais pour notre cas d'utilisation simple, nous les placerons tous dans l'heureuse famille du milieu app.js.
// app.js
// create our angular app and inject ngAnimate and ui-router
// =============================================================================
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})
// our controller for the form
// =============================================================================
.controller('formController', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
});
Nous avons maintenant une application avec ngAnimate et ui.router injectés. Nous avons également établi des itinéraires correspondants. Remarquez comment nous définissons l'URL, le fichier de vue (templateUrl) et le contrôleur pour chaque zone de vue.
Le formulaire sera notre zone de visualisation principale. Il dispose également d'une zone de sous-vue form.profile séparée par . Cette idée peut être réalisée lorsque l'état de l'application change (Traducteur : il peut s'agir de routage, de queryString, etc.), la sous-vue sera affichée dans la zone de vue principale. (Traducteur : et il peut uniquement mettre à jour les modifications de la zone de sous-vue et enregistrer l'état de la zone de sous-vue).
Nous le démontrerons dans la section suivante. Nous devons maintenant créer des vues pour le formulaire et ses zones de sous-vues.
Affichage du modèle de formulaire form.html
Commençons par créer un nouveau form.html. Ce fichier servira de modèle pour le reste de nos fichiers de vue de formulaire, tout comme index.html est utilisé comme modèle global pour l'ensemble du projet. Tout ce que nous avons à faire est d'inclure ui-view dans ce fichier pour que les déclarations imbriquées sachent où injecter leurs vues.
<!-- form.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre class="brush:php;toolbar:false">
{{ formData }}
注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见官方文档。
添加基于状态的激活类
我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。
现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。
目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。
基础Stylingstyle.css
我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。
/* style.css */
/* BASIC STYLINGS
============================================================================= */
body { padding-top:20px; }
/* form styling */
#form-container { background:#2f2f2f; margin-bottom:20px;
border-radius:5px; }
#form-container .page-header { background:#151515; margin:0; padding:30px;
border-top-left-radius:5px; border-top-right-radius:5px; }
/* numbered buttons */
#status-buttons { }
#status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
#status-buttons a:hover { text-decoration:none; }
/* we will style the span as the circled number */
#status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px;
border-radius:50%; }
/* active buttons turn light green-blue*/
#status-buttons a.active span { background:#00BC8C; }
现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。
嵌套视图form-profile.html, form-interests.html, form-payment.html
这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。
下面是我们用于嵌套视图的视图文件：
表单概要视图
<!-- form-profile.html --> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" ng-model="formData.name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" ng-model="formData.email"> </div> <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.interests" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div>
表单兴趣视图
<!-- form-interests.html -->
<label>What's Your Console of Choice?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="formData.type" value="xbox" checked>
I like XBOX
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="formData.type" value="ps">
I like PS4
</label>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
表单支付视图
<!-- form-payment.html --> <div class="text-center"> <span class="glyphicon glyphicon-heart"></span> <h3>Thanks For Your Money!</h3> <button type="submit" class="btn btn-danger">Submit</button> </div>
既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.
当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。
下面是我们表单目前的每一个页面。
为了让我们的页面不同寻常，让我们加上动画效果。
让我们的表单产生动画效果
因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。
现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。
让我们进去css文件，将动画，并应用到我们的表单上
/* style.css */
/* ANIMATION STYLINGS
============================================================================= */
#signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views { width:auto; }
/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave { position:absolute; left:30px; right:30px;
transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
}
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 0.5s both ease;
-moz-animation:slideInRight 0.5s both ease;
animation:slideInRight 0.5s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease;
-moz-animation:slideOutLeft 0.5s both ease;
animation:slideOutLeft 0.5s both ease;
}
/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
to { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-200%); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(200%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(200%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(200%); }
to { -webkit-transform: translateX(0); }
}
首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。
其次，应用我们的动画到.ng-enter和.ng-leave类
第三，用@keyframes定义动画。所有这些部分组合到一起，我们的表单就有了Angular动画，基于状态的UI Router和Angular数据绑定。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment implémenter le saut de page après la soumission du formulaire PHP
Aug 12, 2023 am 11:30 AM
Comment implémenter le saut de page après la soumission d'un formulaire PHP [Introduction] Dans le développement Web, la soumission de formulaire est une exigence fonctionnelle courante. Une fois que l'utilisateur a rempli le formulaire et cliqué sur le bouton d'envoi, les données du formulaire doivent généralement être envoyées au serveur pour traitement et l'utilisateur est redirigé vers une autre page après le traitement. Cet article explique comment utiliser PHP pour implémenter le saut de page après la soumission du formulaire. [Étape 1 : Formulaire HTML] Tout d'abord, nous devons écrire une page contenant un formulaire dans une page HTML afin que les utilisateurs puissent remplir les données qui doivent être soumises.
Comment gérer la gestion des droits des utilisateurs dans les formulaires PHP
Aug 10, 2023 pm 01:06 PM
Comment gérer la gestion des droits des utilisateurs dans les formulaires PHP Avec le développement continu des applications Web, la gestion des droits des utilisateurs est l'une des fonctions importantes. La gestion des droits des utilisateurs peut contrôler les droits d'exploitation des utilisateurs dans les applications et garantir la sécurité et la légalité des données. Dans les formulaires PHP, la gestion des droits des utilisateurs peut être implémentée via un code simple. Cet article présentera comment gérer la gestion des droits des utilisateurs dans les formulaires PHP et donnera des exemples de code correspondants. 1. Définition et gestion des rôles utilisateurs Tout d'abord, la définition et la gestion des rôles utilisateurs sont une question de droits d'utilisateur.
Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ?
Oct 18, 2023 am 08:47 AM
Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ? Dans de nombreuses applications Web, les formulaires constituent le moyen d'interaction le plus courant entre les utilisateurs et le système. Cependant, le contenu saisi par l'utilisateur doit souvent être validé pour garantir l'exactitude et l'exhaustivité des données. Dans cet article, nous apprendrons comment utiliser JavaScript pour mettre en œuvre une vérification en temps réel du contenu de la zone de saisie du formulaire et fournirons des exemples de code spécifiques. Création du formulaire Nous devons d'abord créer un tableau simple en HTML
Comment utiliser JavaScript pour réaliser la fonction d'invite automatique du contenu de la zone de saisie du formulaire ?
Oct 20, 2023 pm 04:01 PM
Comment utiliser JavaScript pour réaliser la fonction d'invite automatique du contenu de la zone de saisie du formulaire ? Introduction : La fonction d'invite automatique du contenu de la zone de saisie du formulaire est très courante dans les applications Web. Elle peut aider les utilisateurs à saisir rapidement le contenu correct. Cet article explique comment utiliser JavaScript pour réaliser cette fonction et fournit des exemples de code spécifiques. Créer la structure HTML Tout d'abord, nous devons créer une structure HTML contenant la zone de saisie et la liste de suggestions automatiques. Vous pouvez utiliser le code suivant : <!DOCTYP
Traitement des formulaires PHP : requête et filtrage des données du formulaire
Aug 07, 2023 pm 06:17 PM
Traitement des formulaires PHP : requête et filtrage des données des formulaires Introduction Dans le développement Web, les formulaires constituent un moyen d'interaction important. Les utilisateurs peuvent soumettre des données au serveur via des formulaires pour un traitement ultérieur. Cet article explique comment utiliser PHP pour traiter les fonctions de requête et de filtrage des données de formulaire. Conception et soumission du formulaire Tout d'abord, nous devons concevoir un formulaire qui inclut des fonctions de requête et de filtrage. Les éléments de formulaire courants incluent des zones de saisie, des listes déroulantes, des boutons radio, des cases à cocher, etc., qui peuvent être conçus en fonction de besoins spécifiques. Lorsque l'utilisateur soumet le formulaire, les données seront envoyées au POS
Comment utiliser HTML, CSS et jQuery pour réaliser la fonction avancée de sauvegarde automatique des formulaires
Oct 28, 2023 am 08:20 AM
Comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée d'enregistrement automatique des formulaires. Les formulaires sont l'un des éléments les plus courants dans les applications Web modernes. Lorsque les utilisateurs saisissent des données de formulaire, la manière de mettre en œuvre la fonction d'enregistrement automatique peut non seulement améliorer l'expérience utilisateur, mais également garantir la sécurité des données. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter la fonction de sauvegarde automatique du formulaire et joindra des exemples de code spécifiques. 1. Structure du formulaire HTML Créons d’abord un formulaire HTML simple.
Conseils pour utiliser les classes de formulaires Laravel : moyens d'améliorer l'efficacité
Mar 11, 2024 pm 12:51 PM
Les formulaires font partie intégrante de la rédaction d’un site Web ou d’une application. Laravel, en tant que framework PHP populaire, fournit des classes de formulaires riches et puissantes, rendant le traitement des formulaires plus facile et plus efficace. Cet article présentera quelques conseils sur l'utilisation des classes de formulaires Laravel pour vous aider à améliorer l'efficacité du développement. Ce qui suit explique en détail à travers des exemples de code spécifiques. Créer un formulaire Pour créer un formulaire dans Laravel, vous devez d'abord écrire le formulaire HTML correspondant dans la vue. Lorsque vous travaillez avec des formulaires, vous pouvez utiliser Laravel
Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise
Jun 15, 2017 pm 05:50 PM
Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".
