hujung hadapan web
tutorial js
Bagaimana untuk melaksanakan wizard borang menggunakan AngularJS_AngularJS
Bagaimana untuk melaksanakan wizard borang menggunakan AngularJS_AngularJS
Hari ini kami akan mencipta borang berbilang langkah dengan animasi menggunakan AngularJs dan Penghala UI yang hebat dan modul ngAnimate Angular. Teknik ini boleh digunakan pada bentuk besar di mana anda ingin memudahkan operasi pengguna.
Kami telah melihat bahawa teknologi ini telah digunakan pada banyak halaman web. Perkara seperti troli beli-belah, borang pendaftaran, aliran masuk dan banyak borang berbilang langkah memudahkan pengguna mengisi borang dalam talian.
Di sini kami akan membinanya:
Menggunakan Penghala UI, yang boleh membenamkan keadaan dan memaparkan pandangan berbeza untuk setiap keadaan, kami boleh membuat borang berbilang langkah dengan agak mudah.
Mari mulakan perniagaan dan mula mencipta bentuk terbaik kami!
Buat projek
Membuat projek mempunyai struktur templat Ia memerlukan fail reka letak, fail paparan untuk setiap borang, fail format dan fail JavaScript.
Berikut ialah senarai fail, buatnya dahulu, kemudian isi kandungannya
- - index.html
- - form.html
- - form-profile.html
- - form-interests.html
- - borang-pembayaran.html
- - app.js
- - style.css
Setiap borang-____.html mewakili fail html dalam struktur hierarki akhirnya membentuk struktur borang kami.
Fail reka letak/templat index.html kami
Kami memulakan projek kami dengan mencipta fail utama untuk memperkenalkan semua sumber yang kami perlukan Di sini kami menggunakan fail index.html sebagai fail utama
Sekarang, kami memuatkan sumber yang kami perlukan (AngularJS, ngAnimate, Ui Router dan skrip serta lembaran gaya lain) dan menyediakan paparan-ui untuk memberitahu Penghala UI tempat paparan kami perlu dipaparkan. Di sini kami menggunakan Bootstrap untuk menggunakan gaya dengan cepat.
<!-- 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>
Selepas melengkapkan pengenalan semua fail, izinkan kami memasuki app.js untuk mula mencipta aplikasi Sudut dan konfigurasi penghalaan yang paling asas. Perhatikan cara kami menggunakan Apl Sudut (formApp) pada badan.
Buat apl Apl Angular kami.js
Sekarang mari buat aplikasi dan laluan. Dalam aplikasi yang besar, anda pasti ingin mengedarkan aplikasi, laluan dan pengawal Angular anda ke dalam modul mereka sendiri, tetapi untuk kes penggunaan mudah kami, kami akan meletakkan semuanya ke dalam keluarga bahagia app.js tengah.
// 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!');
};
});
Kini kami mempunyai aplikasi dengan ngAnimate dan ui.router yang disuntik. Kami juga mewujudkan laluan yang sepadan. Perhatikan cara kami mentakrifkan url, lihat fail (templateUrl) dan pengawal untuk setiap kawasan paparan.
Borang tersebut akan menjadi kawasan pandangan utama kami. Ia juga mempunyai form.profile kawasan subview yang dipisahkan oleh . Idea ini boleh direalisasikan apabila keadaan aplikasi berubah (Penterjemah: ia mungkin penghalaan, queryString, dll.), subview akan dipaparkan dalam kawasan paparan utama. (Penterjemah: Dan ia hanya boleh mengemas kini perubahan kawasan subview dan merekod status kawasan subview).
Kami akan menunjukkan perkara ini dalam bahagian seterusnya. Sekarang kita perlu membuat paparan untuk borang dan kawasan subviewnya.
Paparan templat borang borang.html
Mari mulakan dengan mencipta borang.html baharu. Fail ini akan berfungsi sebagai templat untuk seluruh fail paparan borang kami, sama seperti index.html digunakan sebagai templat keseluruhan untuk keseluruhan projek. Apa yang perlu kita lakukan ialah memasukkan ui-view dalam fail ini supaya pengisytiharan bersarang mengetahui tempat untuk menyuntik pandangan mereka.
<!-- 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数据绑定。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana untuk melaksanakan lompat halaman selepas penyerahan borang PHP
Aug 12, 2023 am 11:30 AM
Cara melaksanakan lompat halaman selepas penyerahan borang PHP [Pengenalan] Dalam pembangunan web, penyerahan borang adalah keperluan fungsian biasa. Selepas pengguna mengisi borang dan mengklik butang hantar, data borang biasanya perlu dihantar ke pelayan untuk diproses, dan pengguna dialihkan ke halaman lain selepas diproses. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan lompatan halaman selepas penyerahan borang. [Langkah 1: Borang HTML] Pertama, kita perlu menulis halaman yang mengandungi borang dalam halaman HTML supaya pengguna boleh mengisi data yang perlu dihantar.
Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi gesaan automatik kandungan kotak input borang?
Oct 20, 2023 pm 04:01 PM
Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi gesaan automatik kandungan kotak input borang? Pengenalan: Fungsi gesaan automatik kandungan kotak input borang adalah sangat biasa dalam aplikasi web Ia boleh membantu pengguna memasukkan kandungan yang betul dengan cepat. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Cipta struktur HTML Mula-mula, kita perlu mencipta struktur HTML yang mengandungi kotak input dan senarai cadangan automatik. Anda boleh menggunakan kod berikut: <!DOCTYP
Cara mengendalikan pengurusan hak pengguna dalam borang PHP
Aug 10, 2023 pm 01:06 PM
Cara mengendalikan pengurusan hak pengguna dalam bentuk PHP Dengan pembangunan berterusan aplikasi web, pengurusan hak pengguna adalah salah satu fungsi penting. Pengurusan hak pengguna boleh mengawal hak operasi pengguna dalam aplikasi dan memastikan keselamatan dan kesahihan data. Dalam bentuk PHP, pengurusan hak pengguna boleh dilaksanakan melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara mengendalikan pengurusan hak pengguna dalam borang PHP dan memberikan contoh kod yang sepadan. 1. Definisi dan pengurusan peranan pengguna Pertama sekali, mentakrif dan mengurus peranan pengguna adalah soal hak pengguna.
Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang?
Oct 18, 2023 am 08:47 AM
Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang? Dalam kebanyakan aplikasi web, borang ialah cara interaksi yang paling biasa antara pengguna dan sistem. Walau bagaimanapun, kandungan yang dimasukkan oleh pengguna selalunya perlu disahkan untuk memastikan ketepatan dan kesempurnaan data. Dalam artikel ini, kami akan mempelajari cara menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang dan memberikan contoh kod khusus. Mencipta borang Mula-mula kita perlu mencipta jadual ringkas dalam HTML
Cara menggunakan HTML, CSS dan jQuery untuk merealisasikan fungsi lanjutan untuk menyimpan borang secara automatik
Oct 28, 2023 am 08:20 AM
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyimpan borang secara automatik adalah salah satu elemen yang paling biasa dalam aplikasi web moden. Apabila pengguna memasukkan data borang, bagaimana untuk melaksanakan fungsi penjimatan automatik bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga memastikan keselamatan data. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi penjimatan automatik borang, dan melampirkan contoh kod tertentu. 1. Struktur bentuk HTML Mari kita buat satu bentuk HTML yang mudah.
Pemprosesan borang PHP: pertanyaan dan penapisan data borang
Aug 07, 2023 pm 06:17 PM
Pemprosesan borang PHP: pertanyaan dan penapisan data borang Pengenalan Dalam pembangunan Web, borang adalah cara interaksi yang penting Pengguna boleh menghantar data kepada pelayan melalui borang untuk pemprosesan selanjutnya. Artikel ini akan memperkenalkan cara menggunakan PHP untuk memproses pertanyaan dan fungsi penapis data borang. Reka bentuk dan penyerahan borang Pertama, kita perlu mereka bentuk borang yang merangkumi fungsi pertanyaan dan penapis. Elemen bentuk biasa termasuk kotak input, senarai juntai bawah, butang radio, kotak semak, dsb., yang boleh direka bentuk mengikut keperluan khusus. Apabila pengguna menyerahkan borang, data akan dihantar ke POS
Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan
Mar 11, 2024 pm 12:51 PM
Borang adalah bahagian penting dalam menulis laman web atau aplikasi. Laravel, sebagai rangka kerja PHP yang popular, menyediakan kelas bentuk yang kaya dan berkuasa, menjadikan pemprosesan borang lebih mudah dan lebih cekap. Artikel ini akan memperkenalkan beberapa petua tentang menggunakan kelas borang Laravel untuk membantu anda meningkatkan kecekapan pembangunan. Yang berikut menerangkan secara terperinci melalui contoh kod tertentu. Mencipta borang Untuk mencipta borang dalam Laravel, anda perlu menulis borang HTML yang sepadan dalam paparan terlebih dahulu. Apabila bekerja dengan borang, anda boleh menggunakan Laravel
2022年最新5款的angularjs教程从入门到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
