Mountains

Sử dụng pagePiling.js

Tên bài học: Sử dụng pagePiling.js

Thời gian học: 1 giờ | Nguồn: NiemVuiLapTrinh | Lượt xem: 949 lượt xem

Nội dung bài học:

pagePiling.js

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục PagePiling

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải những hình ảnh cần thiết và 2 file jquery.pagepiling.min.js và jquery.pagepiling.css mà mình đã nén và để ở đường dẫn bên dưới. Các bạn có thể sử dụng tùy ý hình nha miễn sao chất lượng đừng quá thấp vì xíu nữa chúng ta sẽ thiết lập ảnh toàn màn hình làm cho ảnh có thể bể dẫn đến xấu trang web của bạn.
 Tải File PagePiling

 Các bạn có thể tải bản đầy đủ hoặc tham khảo thêm ở: Đường dẫn tới trang PagePiling

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css, jquery.pagepiling.min.js và jquery.pagepiling.css. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> trong một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sử dụng PagePilling.js</title>
     <link rel="stylesheet" href="jquery.pagepiling.css">
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <div id="ung_dung_pagepiling">
         <div class="section section1">
             <h2>Việt Nam</h2>
         </div>
         <div class="section section2">
             <h2>Nhật Bản</h2>
         </div>
         <div class="section section3">
             <h2>Trung Quốc</h2>
         </div>
         <div class="section section4">
             <h2>Thái Lan</h2>
         </div>
     </div>

     <script src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
     <script src="jquery.pagepiling.min.js"></script>
</body>

Tiếp theo việc cần làm là chúng ta sẽ gọi ứng dụng pagePiling bằng cách chèn đoạn script dưới đây vào trang_chinh.html. Các bạn lưu ý một chỗ là cũng như trên để sử dụng được ứng dụng thì mình cần đặt nó nằm dưới <script src="jquery.pagepiling.min.js"></script>. Bây giờ các bạn cùng xem đoạn code sau để nắm rõ hơn nhé:

<script>
     $(document).ready(function () {
         $('#ung_dung_pagepiling').pagepiling()
     });
 </script>

Chúng ta hãy cùng xem kết quả của đoạn code trên nhé:

Một vấn đề phát sinh là các chữ đang đè lên nhau vì vậy chúng ta cần vào trang style.css để chỉnh lại một chút CSS và thêm hình nền vào các phần của trang, chỉnh lại font, kích cỡ, màu sắc chữ... Nghe hơi khó hiểu để dễ hình dung các bạn xem đoạn code sau đây nhé:

*{
     margin:0;
     padding:0;
 }
#ung_dung_pagepiling .section{
     text-align: center;
 }
#ung_dung_pagepiling .section h2{
     color:#fff;
     font-size: 10em;
     text-shadow: 0 5px 15px rgba(0,0,0,.5);
 }
#ung_dung_pagepiling .section.sec1{
     background: url(hinh_1.jpg);
     background-size: cover;
 }
#ung_dung_pagepiling .section.sec2{
     background: url(hinh_2.jpg);
     background-size: cover;
 }
 #ung_dung_pagepiling .section.sec3{
     background: url(hinh_3.jpg);
     background-size: cover;
 }
#ung_dung_pagepiling .section.sec4{
     background: url(hinh_4.jpg);
     background-size: cover;
 }

Cùng mình xem kết quả của đoạn code trên:

Ứng dụng pagePiling có cung cấp cho chúng ta một số thuộc tính giúp dễ tùy chỉnh cho trang web hơn. Bây giờ mình sẽ thêm một thuộc tính là navigation để chỉnh màu sắc chữ, tiêu đề cho từng phần trên thanh điều hướng bằng cách thêm vào đoạn script ở trên. Để hiểu rõ các bạn xem đoạn code sau đây nhé:

<script>
     $(document).ready(function () {
         $('#ung_dung_pagepiling').pagepiling({
             navigation: {
             'textColor': '#fff',
             'bulletsColor': '#fff',
             'position': 'right',
             'tooltips': ['Hình Ảnh Việt Nam', 'Hình Ảnh Nhật Bản', 'Hình Ảnh Trung Quốc', 'Hình Ảnh Thái Lan']
             }
         });
     });
 </script>

Và đây là kết quả của đoạn code bên trên nhé:

Mình chỉ giới thiệu những điều cơ bản của ứng dung pagePiling này. Thật ra nó còn có rất nhiều thuộc tính các bạn có thể tìm hiểu thông qua đường link mà mình để bên dưới nhé!

Mình gửi các bạn đường dẫn để tải về những file trong thư mục pagePiling để bạn đễ hình dung và có thể xem lại!
 Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
 Đường dẫn để bạn tìm hiểu thêm

 

Nguồn: niemvuilaptrinh.com


Bạn có muốn xác nhận hoàn thành bài học này không?


Xác nhận hoàn thành bài học

Copyright Disclaimer

This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.


Tuyên bố từ chối trách nhiệm bản quyền

Trang web này không lưu trữ bất kỳ tệp (files) nào trên máy chủ (server). Chúng tôi chỉ lập chỉ mục và liên kết đến nội dung được cung cấp bởi các trang web khác. Vui lòng liên hệ với các nhà cung cấp nội dung để xóa nội dung bản quyền nếu có và gửi email cho chúng tôi, chúng tôi sẽ xóa các liên kết hoặc nội dung có liên quan ngay lập tức.

Bình luận bài viết

Đăng bình luận

0 bình luận