Framework7 - Hướng dẫn nhanh
Framework7 là một khung mã nguồn mở và miễn phí cho HTML di động. Nó được sử dụng để phát triển ứng dụng di động kết hợp hoặc ứng dụng web cho thiết bị iOS và Android.
Framework7 được giới thiệu vào năm 2014. Phiên bản 1.4.2 mới nhất được phát hành vào tháng 2 năm 2016 được cấp phép theo MIT.
Tại sao sử dụng Framework7?
- Việc phát triển ứng dụng cho iOS và Android dễ dàng hơn.
- Đường cong học tập cho Framework7 rất dễ dàng.
- Nó có nhiều widget / thành phần được tạo kiểu sẵn.
- Nó có các thư viện trợ giúp tích hợp sẵn.
Đặc trưng
Framework7 là một framework mã nguồn mở và sử dụng miễn phí.
Framework7 có cú pháp jQuery dễ dàng và quen thuộc để bắt đầu mà không bị chậm trễ.
Để kiểm soát độ trễ nhấp chuột cho giao diện người dùng cảm ứng, Framework7 đã tích hợp sẵn thư viện FastClick .
Framework7 có bố cục hệ thống lưới tích hợp để sắp xếp các phần tử của bạn một cách phản ứng.
Framework7 tải động các trang từ các mẫu thông qua api bộ định tuyến linh hoạt .
Ưu điểm
Framework7 không phụ thuộc vào bất kỳ thư viện bên thứ ba nào ngay cả đối với thao tác DOM. Thay vào đó, nó có DOM7 tùy chỉnh của riêng mình.
Framework7 cũng có thể được sử dụng với các khuôn khổ Angular và React .
Bạn có thể bắt đầu tạo ứng dụng khi đã biết HTML, CSS và một số JavaScript cơ bản.
Nó hỗ trợ phát triển nhanh hơn thông qua Bower .
Có thể dễ dàng phát triển ứng dụng cho iOS và Android mà không cần học nó.
Nhược điểm
Framework7 chỉ hỗ trợ các nền tảng như iOS và Android.
Sự hỗ trợ của cộng đồng trực tuyến cho khung Framework7 ít hơn so với iOS và Andriod.
Trong chương này, chúng ta sẽ thảo luận về cách cài đặt và thiết lập Framework7.
Bạn có thể tải xuống Framework7 theo hai cách:
Tải xuống từ kho lưu trữ Github của Framework7
Bạn có thể cài đặt Framework7, sử dụng Bower như hình dưới đây -
bower install framework7Sau khi cài đặt thành công Framework7, bạn cần làm theo các bước dưới đây để sử dụng Framework7 trong ứng dụng của mình -
Step 1 - Bạn cần cài đặt gulp-cli để xây dựng các phiên bản phát triển và phân phối của Framework7 bằng cách sử dụng lệnh sau.
npm install gulp-cliCác cli là viết tắt của Command Line Tiện ích cho Gulp.
Step 2 - Gulp phải được cài đặt trên toàn cầu bằng cách sử dụng lệnh sau.
npm install --global gulpStep 3- Tiếp theo, cài đặt trình quản lý gói NodeJS, cài đặt các chương trình nút giúp chỉ định và liên kết các phần phụ thuộc dễ dàng hơn. Lệnh sau được sử dụng để cài đặt npm.
npm installStep 4 - Phiên bản phát triển của Framework7 có thể được xây dựng bằng cách sử dụng lệnh sau.
npm buildStep 5- Khi bạn xây dựng phiên bản phát triển của Framework7, hãy bắt đầu xây dựng ứng dụng từ thư mục dist / bằng cách sử dụng lệnh sau.
npm distStep 6 - Giữ thư mục ứng dụng của bạn trong máy chủ và chạy lệnh sau để điều hướng giữa các trang trong ứng dụng của bạn.
gulp serverTải xuống Thư viện Framework7 từ CDN
CDN hoặc Mạng phân phối nội dung là một mạng gồm các máy chủ được thiết kế để cung cấp tệp cho người dùng. Nếu bạn sử dụng liên kết CDN trong trang web của mình, nó sẽ chuyển trách nhiệm lưu trữ tệp từ máy chủ của bạn sang một loạt máy chủ bên ngoài. Điều này cũng mang lại một lợi thế là nếu khách truy cập vào trang web của bạn đã tải xuống bản sao của Framework7 từ cùng một CDN, nó sẽ không phải tải xuống lại. Bạn có thể đưa các tệp CDN sau vào tài liệu HTML.
Các CDN sau được sử dụng trong iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Nó được sử dụng để đưa Thư viện CSS Framework7 iOS vào ứng dụng của bạn.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Nó được sử dụng để bao gồm các kiểu màu liên quan đến Framework7 iOS cho ứng dụng của bạn.
Các CDN sau được sử dụng trong Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Nó được sử dụng để bao gồm thư viện JS Framework7 vào ứng dụng của bạn.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Nó được sử dụng để đưa kiểu dáng của Framework7 Material vào ứng dụng của bạn.
Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này. Chúng tôi sử dụng AMPPS (AMPPS là một ngăn xếp WAMP, MAMP và LAMP của máy chủ Apache, MySQL, MongoDB, PHP, Perl & Python) để thực thi tất cả các ví dụ của chúng tôi.
Thí dụ
Ví dụ sau minh họa việc sử dụng ứng dụng đơn giản trong Framework7, sẽ hiển thị hộp cảnh báo với thông báo tùy chỉnh khi bạn nhấp vào thanh điều hướng.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>Tiếp theo, tạo thêm một trang HTML, tức là envirmnt_about.html như hình dưới đây -
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML ở trên dưới dạng framework7_environment.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/framework7_enosystem.html và kết quả được hiển thị như hình dưới đây.
Khi bạn nhấp vào thanh điều hướng, nó sẽ hiển thị hộp cảnh báo với thông báo tùy chỉnh.
Sự miêu tả
Framework7 cung cấp các loại bố cục khác nhau cho ứng dụng của bạn. Nó hỗ trợ ba loại bố cục Thanh điều hướng / Thanh công cụ -
| S. không | Loại bố cục & Mô tả |
|---|---|
| 1 | Bố cục tĩnh Bố cục tĩnh là loại bố cục thường được sử dụng nhất và bao gồm thanh điều hướng và thanh công cụ, có thể là nội dung trang có thể cuộn và mỗi trang chứa thanh điều hướng và thanh công cụ riêng. |
| 2 | Bố cục cố định Bố cục cố định bao gồm thanh điều hướng và thanh công cụ của riêng nó, có thể hiển thị trên màn hình và không thể cuộn trên trang. |
| 3 | Thông qua bố cục Trong bố cục này, thanh điều hướng và thanh công cụ xuất hiện cố định cho tất cả các trang trong một chế độ xem. |
| 4 | Bố cục hỗn hợp Bạn có thể kết hợp các loại bố cục khác nhau trong một chế độ xem. |
Không có Thanh điều hướng / Thanh công cụ
Nếu bạn không muốn sử dụng thanh điều hướng và thanh công cụ, thì không bao gồm các lớp thích hợp (thanh điều hướng cố định , điều hướng qua , thanh công cụ cố định , thanh công cụ qua ) vào trang / trang / chế độ xem.
Sự miêu tả
Trong chương này, chúng ta hãy nghiên cứu về navbar . Nó thường được đặt ở đầu màn hình chứa tiêu đề của trang và các yếu tố điều hướng.
Navbar bao gồm ba phần, mỗi phần có thể chứa bất kỳ nội dung HTML nào, nhưng bạn nên sử dụng các phần này theo cách được đưa ra bên dưới:
Left- Nó được thiết kế để đặt các biểu tượng liên kết ngược hoặc liên kết văn bản duy nhất.
Center - Nó được sử dụng để hiển thị tiêu đề của trang hoặc các liên kết tab.
Right- Phần này tương tự với phần bên trái .
Bảng sau minh họa chi tiết việc sử dụng thanh điều hướng :
| S. không | Các loại và mô tả thanh điều hướng |
|---|---|
| 1 | Thanh điều hướng cơ bản Thanh điều hướng cơ bản có thể được tạo bằng cách sử dụng các lớp điều hướng , thanh điều hướng bên trong , bên trái , trung tâm và bên phải . |
| 2 | Thanh điều hướng với các liên kết Để sử dụng các liên kết ở phần bên trái và bên phải của thanh điều hướng, chỉ cần thêm thẻ <a> với liên kết lớp . |
| 3 | Nhiều liên kết Để sử dụng nhiều liên kết, chỉ cần thêm một vài <a class = "link"> vào phần bạn chọn. |
| 4 | Liên kết với văn bản và biểu tượng Các liên kết có thể được cung cấp các biểu tượng và văn bản bằng cách thêm các lớp cho các biểu tượng và bao bọc văn bản liên kết bằng phần tử <span> . |
| 5 | Liên kết chỉ có biểu tượng Các liên kết trên thanh điều hướng chỉ có thể được cung cấp với các biểu tượng bằng cách thêm lớp chỉ biểu tượng vào các liên kết. |
| 6 | Ứng dụng và phương pháp xem có liên quan Khi khởi tạo Chế độ xem , framework7 cho phép bạn sử dụng các phương pháp có sẵn cho thanh điều hướng. |
| 7 | Tự động ẩn thanh điều hướng Thanh điều hướng có thể được ẩn / hiển thị tự động đối với một số trang được tải Ajax mà thanh điều hướng không được yêu cầu. |
Sự miêu tả
Thanh công cụ cung cấp khả năng truy cập dễ dàng vào các trang khác bằng cách sử dụng các phần tử điều hướng ở cuối màn hình.
Bạn có thể sử dụng thanh công cụ theo hai cách như được chỉ định trong bảng -
| S. không | Các loại & Mô tả của Thanh công cụ |
|---|---|
| 1 | Ẩn thanh công cụ Bạn có thể tự động ẩn thanh công cụ khi tải các trang bằng cách sử dụng no-toolbar lớp đến trang đã tải. |
| 2 | Thanh công cụ dưới cùng Đặt thanh công cụ ở cuối trang bằng cách sử dụng toolbar-bottom lớp học. |
Phương pháp của Thanh công cụ
Các phương pháp có sẵn sau đây có thể được sử dụng với Thanh công cụ:
| S. không | Phương pháp & Mô tả Thanh công cụ |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Nó ẩn thanh công cụ được chỉ định. |
| 2 | myApp.showToolbar(toolbar) Nó hiển thị thanh công cụ được chỉ định. |
| 3 | view.hideToolbar() Nó ẩn thanh công cụ được chỉ định trong dạng xem. |
| 4 | view.showToolbar() Nó hiển thị thanh công cụ được chỉ định trong dạng xem. |
Thí dụ
Ví dụ sau minh họa việc sử dụng bố cục thanh công cụ trong Framework7.
Đầu tiên, chúng tôi sẽ tạo một trang HTML có tên toolbar.html như hình dưới đây -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Toolbar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Toolbar Layout</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page with-subnavbar">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href = "#" class = "link">Link 2</a>
<a href = "#" class = "link">Link 3</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>Bây giờ, khởi tạo ứng dụng và chế độ xem của bạn trong tệp JS tùy chỉnh toolbar.js.
Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng toolbar.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/toolbar.html và kết quả được hiển thị như hình dưới đây.
Sự miêu tả
Framework 7 cho phép tìm kiếm các phần tử bằng cách sử dụng lớp thanh tìm kiếm .
Tham số thanh tìm kiếm
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | searchList Nó tìm kiếm bộ chọn CSS hoặc phần tử HTML của danh sách. |
chuỗi hoặc Phần tử HTML | - |
| 2 | searchIn Bạn có thể tìm kiếm các phần tử dạng xem danh sách của các bộ chọn CSS, cũng có thể tìm kiếm các phần tử bằng cách chuyển các lớp .item-title , .item-text . |
chuỗi | '.danh mục' |
| 3 | found Nó tìm kiếm bộ chọn CSS hoặc phần tử HTML bằng phần tử "found". Hơn nữa, nó sử dụng phần tử tìm thấy .searchbar nếu không có phần tử nào được chỉ định. |
chuỗi hoặc Phần tử HTML | - |
| 4 | notfound Nó tìm kiếm bộ chọn CSS hoặc phần tử HTML bằng phần tử "không tìm thấy". Hơn nữa, nó sử dụng phần tử .searchbar-not-found nếu không có phần tử nào được chỉ định. |
chuỗi hoặc Phần tử HTML | - |
| 5 | overlay Nó tìm kiếm công cụ chọn CSS hoặc phần tử HTML bằng phần tử "lớp phủ thanh tìm kiếm" và sử dụng phần tử .searchbar-overlay , nếu không có phần tử nào được chỉ định. |
chuỗi hoặc Phần tử HTML | - |
| 6 | ignore Bạn có thể bỏ qua bộ chọn CSS cho các mục bằng cách sử dụng thanh tìm kiếm. |
chuỗi | '.searchbar-ignore' |
| 7 | customSearch Khi nó được bật, thanh tìm kiếm sẽ không tìm kiếm qua bất kỳ khối danh sách nào được searchList chỉ định và bạn sẽ được phép sử dụng chức năng tìm kiếm tùy chỉnh. |
boolean | sai |
| số 8 | removeDiacritics Khi tìm kiếm một phần tử, hãy loại bỏ các dấu phụ bằng cách bật tham số này. |
boolean | sai |
| 9 | hideDividers Tham số này sẽ ẩn các ngăn chia mục và tiêu đề nhóm, nếu không có mục nào. |
boolean | thật |
| 10 | hideGroups Tham số này sẽ ẩn các nhóm, nếu không có mục nào được tìm thấy trong nhóm chế độ xem danh sách. |
boolean | thật |
Lệnh gọi lại của thanh tìm kiếm
| S. không | Gọi lại & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | onSearch Phương thức này sẽ kích hoạt hàm gọi lại trong khi thực hiện tìm kiếm. |
chức năng) | - |
| 2 | onEnable Phương thức này sẽ kích hoạt chức năng gọi lại khi Thanh Tìm kiếm hoạt động. |
chức năng) | - |
| 3 | onDisable Phương thức này sẽ kích hoạt chức năng gọi lại khi Thanh tìm kiếm không hoạt động. |
chức năng) | - |
| 4 | onClear Phương thức này sẽ kích hoạt hàm gọi lại khi bạn nhấp vào phần tử "xóa". |
chức năng) | - |
Thuộc tính thanh tìm kiếm
| S. không | Thuộc tính & Mô tả |
|---|---|
| 1 | mySearchbar.params Đại diện cho các tham số khởi tạo được truyền với đối tượng. |
| 2 | mySearchbar.query Tìm kiếm truy vấn hiện tại. |
| 3 | mySearchbar.searchList Xác định khối danh sách tìm kiếm. |
| 4 | mySearchbar.container Xác định vùng chứa thanh tìm kiếm với phần tử HTML. |
| 5 | mySearchbar.input Xác định đầu vào thanh tìm kiếm với phần tử HTML. |
| 6 | mySearchbar.active Nó xác định xem thanh tìm kiếm được bật hay tắt. |
Phương pháp thanh tìm kiếm
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | mySearchbar.search(query); Phương pháp này tìm kiếm truy vấn đã chuyển. |
| 2 | mySearchbar.enable(); Nó bật thanh tìm kiếm. |
| 3 | mySearchbar.disable(); Nó vô hiệu hóa thanh tìm kiếm. |
| 4 | mySearchbar.clear(); Bạn có thể xóa truy vấn và kết quả tìm kiếm. |
| 5 | mySearchbar.destroy(); Nó phá hủy phiên bản thanh tìm kiếm. |
Sự kiện JavaScript trên thanh tìm kiếm
| S. không | Sự kiện & Mô tả | Mục tiêu |
|---|---|---|
| 1 | search Bạn có thể kích hoạt sự kiện này trong khi tìm kiếm các phần tử. |
<div class = "list-block"> |
| 2 | clearSearch Sự kiện này sẽ được kích hoạt khi người dùng nhấp vào phần tử clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Khi Thanh tìm kiếm được bật, sự kiện này sẽ được kích hoạt. |
<div class = "list-block"> |
| 4 | disableSearch Khi Thanh tìm kiếm bị tắt và người dùng nhấp vào nút hủy hoặc phần tử "lớp phủ thanh tìm kiếm", sự kiện này sẽ bị kích hoạt. |
<div class = "list-block"> |
Thí dụ
Ví dụ sau minh họa việc sử dụng thanh tìm kiếm khi cuộn trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên search_bar.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/search_bar.html và kết quả được hiển thị như hình dưới đây.
Nếu phần tử có trong danh sách được nhập vào thanh tìm kiếm, nó sẽ hiển thị phần tử cụ thể đó từ danh sách.
Nếu phần tử khác với các phần tử có trong danh sách được nhập, nó sẽ hiển thị không tìm thấy phần tử nào.
Sự miêu tả
IOS 7+ cho phép bạn tạo các ứng dụng toàn màn hình có thể gây ra sự cố khi thanh trạng thái chồng lên ứng dụng của bạn. Framework7 giải quyết vấn đề này bằng cách phát hiện xem ứng dụng của bạn có đang ở chế độ toàn màn hình hay không. Nếu ứng dụng của bạn ở chế độ toàn màn hình thì Framework7 sẽ tự động thêm lớp with-statusbar-overlay vào <html> (hoặc loại bỏ nếu ứng dụng không ở chế độ toàn màn hình) và bạn cần thêm lớp statusbar-overlay trong <body> như được hiển thị trong đoạn mã sau:
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...Theo mặc định, <div> sẽ luôn bị ẩn và cố định trên đầu màn hình của bạn. Nó sẽ chỉ hiển thị khi ứng dụng ở chế độ toàn màn hình và lớp với-statusbar-overlay được thêm vào <html> .
Thí dụ
Ví dụ sau minh họa việc sử dụng thanh trạng thái trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã html đã cho ở trên dưới dạng status_bar.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/status_bar.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cho thấy việc sử dụng statusbar-overlay, cho phép bạn tạo ứng dụng toàn màn hình khi thanh trạng thái của bạn chồng lên ứng dụng.
Sự miêu tả
Các bảng điều khiển bên di chuyển về phía bên trái hoặc bên phải của màn hình để hiển thị nội dung. Framework7 cho phép bạn bao gồm tối đa 2 bảng (bảng bên phải và bảng bên trái) vào ứng dụng của mình. Bạn cần thêm bảng vào đầu <body> và sau đó chọn hiệu ứng mở bằng cách áp dụng các lớp được liệt kê sau:
panel-reveal - Điều này sẽ làm cho toàn bộ nội dung của ứng dụng chuyển ra ngoài.
panel-cover - Điều này sẽ làm cho bảng điều khiển phủ lên nội dung của ứng dụng.
Ví dụ, đoạn mã sau chỉ ra cách sử dụng các lớp trên:
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>Bảng sau đây cho thấy các loại bảng điều khiển được hỗ trợ bởi Framework77:
| S. không | Loại & Mô tả |
|---|---|
| 1 | Mở và đóng bảng điều khiển Sau khi bạn thêm bảng điều khiển và hiệu ứng, chúng tôi cần thêm chức năng để mở và đóng bảng điều khiển. |
| 2 | Sự kiện bảng điều khiển Để phát hiện cách người dùng tương tác với bảng điều khiển, bạn có thể sử dụng các sự kiện bảng điều khiển. |
| 3 | Mở bảng bằng vuốt Framework7 cung cấp cho bạn tính năng mở bảng điều khiển bằng cử chỉ vuốt . |
| 4 | Bảng điều khiển được mở? Chúng tôi có thể xác định xem bảng điều khiển có được mở hay không bằng cách sử dụng with-panel[position]-[effect] qui định. |
Sự miêu tả
Các khối nội dung có thể được sử dụng để thêm nội dung bổ sung với định dạng khác nhau.
Thí dụ
Ví dụ sau minh họa việc sử dụng khối nội dung trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng content_block.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/content_block.html và kết quả được hiển thị như hình dưới đây.
Mã thêm định dạng bổ sung và khoảng cách bắt buộc cho nội dung văn bản.
Sự miêu tả
Framework7 cung cấp các loại kiểu lưới khác nhau để đặt nội dung theo nhu cầu của người dùng.
Lưới bố cục cung cấp các loại kích thước cột khác nhau như được mô tả trong bảng sau:
| S. không | Lớp học | Lớp bảng | Chiều rộng |
|---|---|---|---|
| 1 | col-5 | máy tính bảng-5 | 5% |
| 2 | col-10 | máy tính bảng-10 | 10% |
| 3 | col-15 | máy tính bảng-15 | 15% |
| 4 | col-20 | máy tính bảng-20 | 20% |
| 5 | col-25 | máy tính bảng-25 | 25% |
| 6 | col-30 | máy tính bảng-30 | 30% |
| 7 | col-33 | máy tính bảng-33 | 33,3% |
| số 8 | col-35 | máy tính bảng-35 | 35% |
| 9 | col-40 | máy tính bảng-40 | 40% |
| 10 | col-45 | máy tính bảng-45 | 45% |
| 11 | col-50 | máy tính bảng-50 | 50% |
| 12 | col-55 | máy tính bảng-55 | 55% |
| 13 | col-60 | máy tính bảng-60 | 60% |
| 14 | col-65 | máy tính bảng-65 | 65% |
| 15 | col-66 | máy tính bảng-66 | 66,6% |
| 16 | col-70 | máy tính bảng-70 | 70% |
| 17 | col-75 | máy tính bảng-75 | 75% |
| 18 | col-80 | máy tính bảng-80 | 80% |
| 19 | col-85 | máy tính bảng-85 | 85% |
| 20 | col-90 | máy tính bảng-90 | 90% |
| 21 | col-95 | máy tính bảng-95 | 95% |
| 21 | col-100 | máy tính bảng-100 | 100% |
| 22 | col-auto | máy tính bảng tự động | Chiều rộng bằng nhau |
Thí dụ
Ví dụ sau cung cấp bố cục lưới để đặt nội dung của bạn khi bạn cần trong Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng layout_grid.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/layout_grid.html đầu ra được hiển thị như hình dưới đây.
Mã này cung cấp các loại lưới khác nhau để đặt nội dung theo nhu cầu của người dùng.
Sự miêu tả
Framework7 cung cấp các loại lớp phủ khác nhau để hoạt động trơn tru với các ứng dụng. Bảng sau liệt kê một số lớp phủ của Framework7:
| S. không | Loại lớp phủ & Mô tả |
|---|---|
| 1 | Phương thức Modal là một cửa sổ nhỏ hiển thị nội dung từ các nguồn riêng biệt mà không cần rời khỏi cửa sổ mẹ. |
| 2 | Cửa sổ bật lên Popup là một hộp bật lên hiển thị nội dung khi người dùng nhấp vào phần tử. |
| 3 | Popover Để quản lý việc trình bày nội dung tạm thời, thành phần bật lên có thể được sử dụng. |
| 4 | Bảng hành động Các hành động tấm được sử dụng để trình bày cho người dùng một tập hợp các khả năng làm thế nào để xử lý một nhiệm vụ nhất định. |
| 5 | Màn hình đăng nhập Màn hình đăng nhập lớp phủ được sử dụng để hiển thị định dạng màn hình đăng nhập có thể được sử dụng trong trang hoặc cửa sổ bật lên hoặc như một lớp phủ độc lập. |
| 6 | Phương thức chọn Phương thức bộ chọn được sử dụng để chọn một số nội dung tùy chỉnh tương tự như bộ chọn lịch. |
Sự miêu tả
Trình tải trước trong Framework7 được tạo bằng Đồ họa Vectơ có thể mở rộng (SVG) và hoạt hình bằng CSS, giúp dễ dàng thay đổi kích thước. Trình tải trước có sẵn với hai màu -
- mặc định là nền sáng
- một cái khác là nền tối
Bạn có thể sử dụng lớp trình tải trước trong HTML của mình như hình dưới đây -
Thí dụ
Ví dụ sau minh họa việc sử dụng trình tải trước trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng preloader.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/preloader.html và kết quả được hiển thị như hình dưới đây.
Mã này hiển thị chỉ báo trình tải trước, được tạo bằng SVG và hoạt hình bằng CSS.
Sự miêu tả
Các thanh tiến trình có thể được sử dụng để hiển thị tải nội dung hoặc tiến trình của một nhiệm vụ cho người dùng. Bạn có thể chỉ định thanh tiến trình bằng cách sử dụng lớp thanh tiến trình . Khi người dùng không biết quá trình tải sẽ diễn ra trong bao lâu cho yêu cầu, bạn có thể sử dụng lớp vô hạn của thanh tiến trình .
API JavaScript trên thanh tiến trình
Thanh tiến trình có thể được sử dụng cùng với API JavaScript để chỉ định các thuộc tính hiển thị , ẩn và tiến trình bằng cách sử dụng các phương pháp sau:
| S. không | Phương pháp | Mô tả & Thông số |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Nó đặt thanh tiến trình cho tiến trình của một nhiệm vụ.
|
| 2 | myApp.hideProgressbar (contain er) | Nó ẩn thanh tiến trình.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Nó hiển thị thanh tiến trình.
|
Thí dụ
Ví dụ sau đây hiển thị một thanh tiến trình xác định và không xác định động để chỉ ra hoạt động trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Progress Bar</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng progress_bar.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/progress_bar.html và kết quả được hiển thị như hình dưới đây.
Ví dụ hiển thị thanh tiến trình, cho biết một thao tác sẽ mất bao lâu để hoàn thành quy trình và hiển thị các loại thanh tiến trình khác nhau để biểu thị hoạt động.
Sự miêu tả
Chế độ xem danh sách là thành phần giao diện người dùng mạnh mẽ trình bày dữ liệu trong danh sách có thể cuộn gồm nhiều hàng. Framework7 cung cấp các loại Dạng xem Danh sách khác nhau để làm việc với ứng dụng của bạn. Bảng sau liệt kê một số Chế độ xem Danh sách Framework7 :
| S. không | Loại & Mô tả |
|---|---|
| 1 | Xem danh sách Chế độ xem danh sách là thành phần giao diện người dùng mạnh mẽ, trình bày dữ liệu trong danh sách có thể cuộn có chứa nhiều hàng. |
| 2 | Danh sách liên lạc Danh sách liên hệ là một kiểu xem danh sách, có thể được sử dụng để hiển thị danh sách liên hệ của mọi người. |
| 3 | Chế độ xem danh sách phương tiện Chế độ xem danh sách Phương tiện được sử dụng để hiển thị cấu trúc dữ liệu phức tạp như sản phẩm, dịch vụ, thông tin người dùng. |
| 4 | Swipeout Các swipeout cho phép bạn để lộ những hành động đơn ẩn bởi swiping trên các yếu tố danh sách. |
| 5 | Danh sách có thể sắp xếp Danh sách có thể sắp xếp là một kiểu xem danh sách, sắp xếp các phần tử của dạng xem danh sách. |
| 6 | Danh sách ảo Danh sách ảo là một kiểu xem danh sách, bao gồm danh sách số lượng lớn các phần tử dữ liệu mà không làm giảm hiệu suất của chúng. |
Sự miêu tả
Đàn accordion là một phần tử điều khiển đồ họa được hiển thị dưới dạng danh sách các mục xếp chồng lên nhau. Mỗi đàn accordion có thể được mở rộng hoặc kéo dài để tiết lộ nội dung liên quan đến đàn accordion đó.
Bố cục có thể thu gọn
Khi bạn đang sử dụng một phần tử có thể thu gọn riêng biệt, bạn cần phải bỏ qua phần tử bao bọc danh sách accordion .
Sau đây là cấu trúc của bố cục có thể thu gọn -
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>Các lớp sau được sử dụng cho đàn accordion trong Framework7:
| S. không | Lớp học & Mô tả |
|---|---|
| 1 | accordion-list Nó là một lớp tùy chọn, chứa một nhóm danh sách các mục đàn accordion. |
| 2 | accordion-item Nó là một lớp bắt buộc cho một mặt hàng đàn accordion. |
| 3 | accordion-item-toggle Nó là một lớp bắt buộc được sử dụng để mở rộng nội dung mục đàn accordion. |
| 4 | accordion-item-content Nó là một lớp bắt buộc được sử dụng cho nội dung vật phẩm đàn accordion ẩn. |
| 5 | accordion-item-expanded Nó là một mục đàn accordion mở rộng duy nhất. |
API Accordion JavaScript
Các phương thức JavaScript API được sử dụng để mở và đóng đàn accordion theo chương trình.
Nó chứa các phương thức API JavaScript sau:
myApp.accordionOpen(item) - Dùng để mở đàn accordion.
myApp.accordionClose(item) - Dùng để đóng đàn accordion.
myApp.accordionToggle(item) - Dùng để bật tắt đàn accordion.
Tất cả các phương thức đều chứa tham số được gọi là item là HTML hoặc phần tử chuỗi của accordion-item.
Sự kiện Accordion
Accordion chứa bốn sự kiện như được liệt kê trong bảng sau:
| S. không | Biến cố | Mục tiêu & Mô tả |
|---|---|---|
| 1 | mở | Accordion item Khi bạn mở một hoạt ảnh, sự kiện này sẽ được kích hoạt. |
| 2 | mở ra | Accordion item Khi hoàn tất việc mở hoạt ảnh, sự kiện này sẽ được kích hoạt. |
| 3 | đóng | Accordion item Khi bạn đóng hoạt ảnh, sự kiện này sẽ bị kích hoạt. |
| 4 | đóng cửa | Accordion item Khi quá trình đóng hoạt ảnh hoàn tất, sự kiện này sẽ được kích hoạt. |
Chế độ xem danh sách Accordion
Trong dạng xem danh sách đàn accordion, bạn có thể sử dụng phần tử liên kết mục thay vì chuyển đổi accordion .
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>Thí dụ
Ví dụ sau minh họa việc sử dụng đàn accordion trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng accordion.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/accordion.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cung cấp bố cục có thể thu gọn, có thể mở rộng để hiển thị nội dung liên quan đến đàn accordion.
Sự miêu tả
Các thẻ chứa thông tin có tổ chức liên quan đến một chủ đề như ảnh, liên kết và văn bản. Bảng sau đây cho thấy các loại thẻ Framework7:
| S. không | Loại & Mô tả |
|---|---|
| 1 | Bố cục HTML thẻ Bố cục HTML thẻ cơ bản sử dụng các lớp thẻ để sắp xếp các mục của nó. |
| 2 | Xem danh sách bằng thẻ Bạn có thể sử dụng thẻ làm phần tử xem danh sách bằng cách thêm lớp danh sách thẻ vào <div class = "list-block"> . |
Sự miêu tả
Chip là một khối thực thể nhỏ, có thể chứa ảnh, chuỗi tiêu đề nhỏ và thông tin ngắn.
Bố cục HTML chip
Đoạn mã sau đây cho thấy bố cục HTML chip cơ bản được sử dụng trong Framework7:
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>Bố cục HTML ở trên chứa nhiều lớp như được liệt kê bên dưới:
chips - Đó là hộp đựng chip.
chip-media- Đây là phần tử phương tiện chip có thể chứa hình ảnh, hình đại diện hoặc biểu tượng. Nó là tùy chọn.
card-label - Đó là nhãn văn bản chip.
card-delete - Đây là liên kết biểu tượng xóa tùy chọn của chip.
Thí dụ
Ví dụ sau đại diện cho các thực thể như album, phần tử thẻ, v.v. cùng với ảnh và thông tin ngắn gọn -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Chips HTML Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7;
$$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng cards_html_layout.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/cards_html_layout.html và kết quả được hiển thị như hình dưới đây.
Ví dụ đại diện cho các thực thể phức tạp trong các khối nhỏ như album, phần tử thẻ, hình ảnh đã đăng, chứa ảnh, chuỗi tiêu đề và thông tin ngắn gọn.
Sự miêu tả
Framework7 cung cấp một nhóm các nút sẵn sàng sử dụng bằng cách thêm các lớp thích hợp vào các liên kết hoặc các nút đầu vào.
| S. không | Loại & Mô tả |
|---|---|
| 1 | Các nút chủ đề iOS Framework7 cung cấp nhiều nút chủ đề iOS, có thể được sử dụng bằng cách áp dụng các lớp thích hợp. |
| 2 | Các nút Chủ đề Vật liệu Chủ đề material cung cấp nhiều nút để sử dụng trong ứng dụng của bạn bằng cách sử dụng các lớp thích hợp. |
Sự miêu tả
Framework7 cung cấp nút hành động nổi cho một hành động được thúc đẩy. Chúng xuất hiện dưới dạng biểu tượng được khoanh tròn nổi trên giao diện người dùng. Nó có các hành vi chuyển động bao gồm biến đổi , khởi chạy và chuyển một điểm neo .
Nút tác vụ nổi chỉ được hỗ trợ trong chủ đề Material.
Bảng sau liệt kê các loại nút hành động được sử dụng trong Framework7:
| S. không | Loại & Mô tả |
|---|---|
| 1 | Bố cục nút tác vụ nổi Nó rất đơn giản; bạn chỉ cần đặt nó dưới dạng phần con của trang hoặc chế độ xem . |
| 2 | Biến đổi để bật lên Nếu bạn muốn mở cửa sổ bật lên khi nhấp vào nút tác vụ nổi thì bạn có thể sử dụng lớp nút-để-bật lên nổi . |
| 3 | Quay số nhanh Bạn có thể gọi các hành động liên quan khi nhấp vào nút hành động nổi bằng cách sử dụng quay số nhanh . |
Sự miêu tả
Biểu mẫu được sử dụng để tương tác với người dùng và thu thập dữ liệu từ người dùng web bằng cách sử dụng các trường văn bản, hộp kiểm, nút radio, v.v.
Framework7 cung cấp các loại phần tử biểu mẫu khác nhau để hoạt động trơn tru với các ứng dụng như được chỉ định trong bảng bên dưới -
| S. không | Loại lớp phủ & Mô tả |
|---|---|
| 1 | Phần tử hình thức Các phần tử biểu mẫu được sử dụng để tạo bố cục biểu mẫu đẹp mắt. |
| 2 | Hộp kiểm và Rađiô Phần mở rộng dạng xem danh sách cho phép bạn tạo hộp kiểm và đầu vào vô tuyến trong Framework7. |
| 3 | Lựa chọn thông minh Lựa chọn thông minh là một cách dễ dàng để thay đổi các lựa chọn biểu mẫu thành các trang động bằng cách sử dụng các nhóm hộp kiểm và đầu vào radio. |
| 4 | Các phần tử bị vô hiệu hóa Các phần tử có thể bị vô hiệu hóa bằng cách áp dụng lớp bị vô hiệu hóa cho phần tử hoặc thêm các thuộc tính bị vô hiệu hóa cho phần tử biểu mẫu. |
| 5 | Dữ liệu biểu mẫu Framework7 có rất ít phương pháp hữu ích, giúp làm việc với các biểu mẫu dễ dàng. |
| 6 | Lưu trữ biểu mẫu Thật dễ dàng với bộ lưu trữ biểu mẫu để lưu trữ và phân tích dữ liệu biểu mẫu tự động trên các trang được tải Ajax. |
| 7 | Gửi biểu mẫu Ajax Framework7 cho phép bạn gửi dữ liệu tự động bằng Ajax. |
Sự miêu tả
Tab là tập hợp các nội dung được nhóm hợp lý cho phép chúng ta nhanh chóng lật giữa chúng và tiết kiệm không gian như đàn accordion.
Bố cục tab
Đoạn mã sau xác định bố cục cho các tab:
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>Ở đâu -
<div class = "tabs">- Nó là một trình bao bọc bắt buộc cho tất cả các tab. Nếu chúng ta bỏ lỡ điều này, các tab sẽ không hoạt động.
-
<div class = "tab"> - Đây là một tab duy nhất, nên có unique id thuộc tính.
-
<div class = "tab active">- Đây là một tab hoạt động duy nhất, sử dụng lớp hoạt động bổ sung để làm cho tab hiển thị (hoạt động).
Chuyển đổi giữa các tab
Bạn có thể sử dụng một số bộ điều khiển trong bố cục các tab để người dùng có thể chuyển đổi giữa chúng.
Đối với điều này, bạn cần tạo liên kết (thẻ <a>) với lớp liên kết tab và thuộc tính href bằng thuộc tính id của tab mục tiêu -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>Chuyển đổi nhiều tab
Nếu bạn đang sử dụng liên kết tab đơn để chuyển đổi giữa nhiều tab, thì bạn có thể sử dụng các lớp thay vì sử dụng thuộc tính tab và dữ liệu của ID .
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>Các dữ liệu tab thuộc tính của tab-link chứa CSS selector của mục tiêu tab / tab.
Chúng ta có thể sử dụng các cách khác nhau của các tab, chúng được chỉ định trong bảng sau:
| S. không | Loại & Mô tả tab |
|---|---|
| 1 | Tab nội tuyến Tab nội tuyến là tập hợp các tab nội tuyến được nhóm lại cho phép bạn lật nhanh giữa chúng. |
| 2 | Chuyển tab từ thanh điều hướng Chúng tôi có thể đặt các tab trong thanh điều hướng cho phép bạn lật giữa chúng. |
| 3 | Chuyển chế độ xem từ thanh tab Tab đơn có thể được sử dụng để chuyển đổi giữa các chế độ xem với điều hướng và bố cục riêng. |
| 4 | Tab hoạt hình Bạn có thể sử dụng chuyển tiếp đơn giản (hoạt ảnh) để chuyển đổi các tab. |
| 5 | Các tab có thể vuốt Bạn có thể tạo các tab có thể vuốt bằng cách chuyển đổi đơn giản bằng cách sử dụng lớp bọc có thể vuốt cho các tab. |
| 6 | Sự kiện JavaScript tab Các sự kiện JavaScript có thể được sử dụng khi bạn đang làm việc với mã JavaScript cho các tab. |
| 7 | Hiển thị tab bằng JavaScript Bạn có thể chuyển đổi hoặc hiển thị tab bằng các phương pháp JavaScript. |
Sự miêu tả
Thanh trượt swiper là thanh trượt cảm ứng mạnh mẽ và hiện đại nhất và có trong Framework7 với rất nhiều tính năng.
Bố cục HTML sau đây hiển thị thanh trượt xoay -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>Các lớp sau được sử dụng cho thanh trượt swiper:
swiper-container - Nó là một phần tử bắt buộc cho vùng chứa thanh trượt chính và nó được sử dụng cho các trang trình bày và phân trang.
Swiper-wrapper - Nó là một yếu tố bắt buộc cho các slide trình bao bọc bổ sung.
swiper-slide - Nó là một phần tử slide duy nhất và nó có thể chứa bất kỳ HTML nào bên trong.
swiper-pagination - Nó là tùy chọn cho các dấu đầu dòng phân trang và chúng được tạo tự động.
Bạn có thể khởi tạo swiper bằng JavaScript bằng các phương pháp liên quan của nó -
myApp.swiper(swiperContainer,parameters)HOẶC LÀ
new Swiper(swiperContainer, parameters)Cả hai phương pháp đều được sử dụng để khởi tạo thanh trượt với các tùy chọn.
Các phương thức đã cho ở trên chứa các tham số sau:
swiperContainer- Nó là HTMLElement hoặc chuỗi của một thùng chứa swiper và nó là bắt buộc.
parameters - Đây là các phần tử tùy chọn chứa đối tượng với các tham số swiper.
Ví dụ -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});Có thể truy cập thể hiện của swiper và thuộc tính swiper của vùng chứa của thanh trượt có phần tử HTML sau:
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();Bạn có thể xem các cách và kiểu swiper khác nhau trong bảng sau:
| S. không | Các loại & Mô tả Swiper |
|---|---|
| 1 | Swiper mặc định có phân trang Nó là một thanh trượt cảm ứng hiện đại và thanh trượt vuốt theo chiều ngang, theo mặc định. |
| 2 | Swiper dọc Cái này cũng hoạt động như một swiper mặc định nhưng nó vuốt dọc. |
| 3 | Có khoảng trống giữa các trang trình bày Swiper này được sử dụng để tạo khoảng trống giữa hai slide. |
| 4 | Nhiều Swipers Swiper này sử dụng nhiều hơn một swipers trên một trang. |
| 5 | Swipers lồng nhau Nó là sự kết hợp của các slide dọc và ngang. |
| 6 | Kiểm soát tùy chỉnh Nó được sử dụng cho các điều khiển tùy chỉnh để chọn hoặc vuốt bất kỳ trang chiếu nào. |
| 7 | Đang tải chậm Nó có thể được sử dụng cho tập tin đa phương tiện, cần thời gian để tải. |
Sự miêu tả
Trình duyệt Ảnh tương tự như thành phần của trình duyệt ảnh iOS để hiển thị nhóm ảnh, có thể thu phóng và xoay. Để trượt giữa các hình ảnh, trình duyệt ảnh sử dụng Swiper Slider .
Bảng sau đây cho thấy các loại trình duyệt ảnh được sử dụng trong framework7:
| S. không | Mô tả và loại trình duyệt ảnh |
|---|---|
| 1 | Tạo phiên bản trình duyệt ảnh Trình duyệt ảnh chỉ có thể được tạo và khởi chạy bằng JavaScript. |
| 2 | Thông số trình duyệt ảnh Framework7 cung cấp danh sách các tham số được sử dụng với trình duyệt ảnh. |
| 3 | Phương thức & Thuộc tính Trình duyệt Ảnh Bạn sẽ nhận được một biến phiên bản đã khởi tạo để sử dụng các phương pháp và thuộc tính của trình duyệt ảnh khi bạn khởi chạy trình duyệt ảnh. |
| 4 | Mảng ảnh Trong quá trình khởi chạy trình duyệt ảnh, bạn cần chuyển mảng có ảnh / video trong tham số ảnh . |
| 5 | Mẫu trình duyệt ảnh Framework7 cung cấp cho bạn nhiều mẫu trình duyệt ảnh, bạn có thể chuyển qua việc khởi tạo trình duyệt ảnh. |
Sự miêu tả
Tự động hoàn thành là một thành phần được tối ưu hóa bằng cảm ứng và thân thiện với thiết bị di động của Framework7, có thể là thành phần thả xuống hoặc theo cách độc lập. Bạn có thể tạo và khởi tạo phiên bản Tự động điền bằng cách sử dụng phương pháp JavaScript -
myApp.autocomplete(parameters)Trong đó các tham số là các đối tượng bắt buộc được sử dụng để khởi tạo phiên bản Tự động hoàn thành.
Tham số tự động hoàn thành
Bảng sau liệt kê các tham số Tự động điền có sẵn trong Framework7:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | openIn Nó xác định cách mở một Tự động hoàn thành có thể được sử dụng làm trình đơn thả xuống, cửa sổ bật lên hoặc trang. |
chuỗi | trang |
| 2 | source Nó sử dụng phiên bản tự động hoàn thành, truy vấn tìm kiếm và chức năng kết xuất để chuyển các mục phù hợp với mảng. |
chức năng (tự động hoàn thành, truy vấn, kết xuất) | - |
| 3 | valueProperty Nó chỉ định giá trị mục của khóa của đối tượng mục phù hợp. |
chuỗi | Tôi |
| 4 | limit Nó hiển thị số lượng hạn chế các mục trong tự động hoàn thành cho mỗi truy vấn. |
con số | - |
| 5 | preloader Trình tải trước có thể được sử dụng để chỉ định bố cục tự động hoàn thành bằng cách đặt nó thành true. |
boolean | sai |
| 6 | preloaderColor Nó chỉ định màu của trình tải trước. Theo mặc định, màu là "đen". |
chuỗi | - |
| 7 | value Xác định mảng với các giá trị được chọn mặc định. |
mảng | - |
| số 8 | textProperty Nó chỉ định giá trị mục của khóa của đối tượng mục phù hợp, có thể được sử dụng làm tiêu đề của các tùy chọn được hiển thị. |
chuỗi | bản văn |
Tham số Tự động hoàn thành Độc lập
Bảng sau liệt kê các tham số Tự động hoàn thành Độc lập sẵn có trong Framework7:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | opener Đây là tham số phần tử chuỗi hoặc HTML, sẽ mở trang tự động hoàn thành độc lập. |
chuỗi hoặc HTMLElement | - |
| 2 | popupCloseText Nó được sử dụng để đóng cửa sổ bật lên tự động điền. |
chuỗi | 'Đóng' |
| 3 | backText Nó cung cấp liên kết quay lại khi tự động hoàn thành được mở dưới dạng trang. |
chuỗi | 'Trở lại' |
| 4 | pageTitle Nó chỉ định tiêu đề trang tự động hoàn thành. |
chuỗi | - |
| 5 | searchbarPlaceholderText Nó chỉ định văn bản giữ chỗ trên thanh tìm kiếm. |
chuỗi | 'Tìm kiếm' |
| 6 | searchbarCancelText Nó xác định văn bản nút hủy thanh tìm kiếm. |
chuỗi | 'hủy bỏ' |
| 7 | notFoundText Nó hiển thị văn bản khi không tìm thấy phần tử phù hợp. |
chuỗi | 'Không kết quả' |
| số 8 | multiple Nó cho phép chọn nhiều lựa chọn bằng cách đặt thành true. |
boolean | sai |
| 9 | navbarTheme Nó chỉ định chủ đề màu cho thanh điều hướng. |
chuỗi | - |
| 10 | backOnSelect Khi người dùng chọn giá trị, tự động hoàn thành sẽ được đóng lại bằng cách đặt giá trị đó thành true. |
boolean | sai |
| 11 | formTheme Nó chỉ định chủ đề màu sắc cho biểu mẫu. |
chuỗi | - |
Thông số tự động hoàn thành thả xuống
Bảng sau liệt kê các thông số Tự động điền thả xuống có sẵn trong Framework7:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | input Nó là chuỗi hoặc phần tử HTML được sử dụng để nhập văn bản. |
chuỗi hoặc HTMLElement | - |
| 2 | dropdownPlaceholderText Nó chỉ định văn bản trình giữ chỗ thả xuống. |
chuỗi | - |
| 3 | updateInputValueOnSelect Bạn có thể cập nhật giá trị đầu vào trên select bằng cách đặt nó thành true. |
boolean | thật |
| 4 | expandInput Bạn có thể mở rộng đầu vào văn bản trong Chế độ xem danh sách để hiển thị toàn màn hình trong khi thả xuống bằng cách đặt mục nhập thành true. |
boolean | sai |
Chức năng gọi lại tự động hoàn thành
Bảng dưới đây liệt kê các tham số Tự động hoàn thành thả xuống có sẵn trong Framework7 -
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | onChange Bất cứ khi nào giá trị tự động hoàn thành được thay đổi, hàm gọi lại này sẽ được thực thi. |
chức năng (tự động hoàn thành, giá trị) | - |
| 2 | onOpen Bất cứ khi nào tự động hoàn thành được mở, hàm gọi lại này sẽ được thực thi. |
chức năng (tự động hoàn thành) | - |
| 3 | onClose Bất cứ khi nào tính năng tự động hoàn tất bị đóng, hàm gọi lại này sẽ được thực thi. |
chức năng (tự động hoàn thành) | - |
Mẫu tự động hoàn thành
Bảng sau liệt kê các thông số Tự động điền thả xuống có sẵn trong Framework7:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | navbarTemplate Đây là mẫu thanh điều hướng tự động hoàn thành độc lập. |
chuỗi | - |
| 2 | itemTemplate Nó là một mục biểu mẫu template7 độc lập. |
chuỗi | - |
| 3 | dropdownTemplate Đây là mẫu thả xuống template7. |
chuỗi | - |
| 4 | dropdownItemTemplate Đây là mục danh sách thả xuống template7. |
chuỗi | - |
| 5 | dropdownPlaceholderTemplate Đây là mục trình giữ chỗ thả xuống template7. |
chuỗi | - |
Mẫu mặc định
Sau đây là các đoạn mã mẫu mặc định cho các thông số mẫu đã xác định ở trên -
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>itemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>Phương pháp tự động hoàn thành
Bảng sau chỉ định các phương pháp Tự động điền có sẵn trong Framework7:
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | myAutocomplete.params Xác định các tham số khởi tạo được truyền với đối tượng. |
| 2 | myAutocomplete.value Nó xác định mảng với các giá trị đã chọn. |
| 3 | myAutocomplete.opened Nó sẽ mở Tự động điền nếu nó được đặt thành true. |
| 4 | myAutocomplete.dropdown Nó chỉ định một phiên bản của trình đơn thả xuống Tự động điền. |
| 5 | myAutocomplete.popup Nó chỉ định một phiên bản của cửa sổ bật lên Tự động điền. |
| 6 | myAutocomplete.page Nó chỉ định một phiên bản của trang Tự động điền. |
| 7 | myAutocomplete.pageData Nó xác định dữ liệu trang Tự động điền. |
| số 8 | myAutocomplete.searchbar Nó xác định phiên bản thanh tìm kiếm Tự động điền. |
Thuộc tính tự động điền
Bảng sau chỉ định các phương pháp Tự động điền có sẵn trong Framework7:
| S. không | Thuộc tính & Mô tả |
|---|---|
| 1 | myAutocomplete.open() Nó mở ra Tự động điền, có thể được sử dụng làm trình đơn thả xuống, cửa sổ bật lên hoặc trang. |
| 2 | myAutocomplete.close() Nó đóng Tự động hoàn thành. |
| 3 | myAutocomplete.showPreloader() Nó hiển thị trình tải trước Tự động điền. |
| 4 | myAutocomplete.hidePreloader() Nó ẩn trình tải trước Tự động điền. |
| 5 | myAutocomplete.destroy() Nó làm hỏng phiên bản trình tải trước Tự động điền và xóa tất cả các sự kiện. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các tham số tự động hoàn thành ẩn trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
backOnSelect: true, //After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
// Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page', //Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng autocomplete.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/autocomplete.html và kết quả được hiển thị như hình dưới đây.
Ví dụ này cung cấp tính năng tự động hoàn thành các giá trị trong menu thả xuống đơn giản, menu thả xuống với tất cả các giá trị, menu thả xuống với trình giữ chỗ, tự động hoàn thành độc lập, v.v.
Sự miêu tả
Bộ chọn trông giống như bộ chọn gốc của iOS và nó là một thành phần mạnh mẽ cho phép bạn chọn bất kỳ giá trị nào từ danh sách và cũng được sử dụng để tạo bộ chọn lớp phủ tùy chỉnh. Bạn có thể sử dụng Bộ chọn làm thành phần nội tuyến hoặc làm lớp phủ. Bộ chọn lớp phủ sẽ được tự động chuyển đổi thành Cửa sổ bật lên trên máy tính bảng (iPad).
Sử dụng phương pháp của Ứng dụng sau, bạn có thể tạo và khởi chạy phương thức JavaScript -
myApp.picker(parameters)Trong đó các tham số là đối tượng bắt buộc, được sử dụng để khởi tạo thể hiện bộ chọn và nó là một phương thức bắt buộc.
Tham số bộ chọn
Bảng sau chỉ định các tham số có sẵn trong bộ chọn:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | container Chuỗi với bộ chọn CSS hoặc HTMLElement được sử dụng để tạo HTML bộ chọn cho bộ chọn nội tuyến. |
chuỗi hoặc HTMLElement | - |
| 2 | input Phần tử đầu vào có liên quan được đặt với chuỗi bằng bộ chọn CSS hoặc HTMLElement. |
chuỗi hoặc HTMLElement | - |
| 3 | scrollToInput Nó được sử dụng để cuộn khung nhìn (trang-nội dung) của đầu vào, bất cứ khi nào bộ chọn được mở. |
boolean | thật |
| 4 | inputReadOnly Được sử dụng để đặt thuộc tính "chỉ đọc" trên đầu vào được chỉ định. |
boolean | thật |
| 5 | convertToPopover Nó được sử dụng để chuyển đổi phương thức bộ chọn thành Popover trên màn hình lớn như iPad. |
boolean | thật |
| 6 | onlyOnPopover Bạn có thể mở bộ chọn trong Popover bằng cách bật nó. |
boolean | thật |
| 7 | cssClass Để chọn phương thức, bạn có thể sử dụng tên lớp CSS bổ sung. |
chuỗi | - |
| số 8 | closeByOutsideClick Bạn có thể đóng bộ chọn bằng cách nhấp vào bên ngoài bộ chọn hoặc phần tử đầu vào bằng cách bật phương pháp. |
boolean | sai |
| 9 | toolbar Nó được sử dụng để kích hoạt thanh công cụ phương thức bộ chọn. |
boolean | thật |
| 10 | toolbarCloseText Được sử dụng cho nút Xong / Đóng thanh công cụ. |
chuỗi | 'Làm xong' |
| 11 | toolbarTemplate Nó là Mẫu HTML của thanh công cụ, theo mặc định nó là chuỗi HTML với mẫu sau: |
chuỗi | - |
Tham số bộ chọn cụ thể
Bảng sau liệt kê các thông số bộ chọn cụ thể có sẵn:
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | rotateEffect Nó cho phép hiệu ứng xoay 3D trong bộ chọn. |
boolean | sai |
| 2 | momentumRatio Khi bạn nhả bộ chọn sau khi chạm và di chuyển nhanh, nó sẽ tạo ra nhiều động lực hơn. |
con số | 7 |
| 3 | updateValuesOnMomentum Được sử dụng để cập nhật bộ chọn và giá trị đầu vào trong động lượng. |
boolean | sai |
| 4 | updateValuesOnTouchmove Được sử dụng để cập nhật bộ chọn và giá trị đầu vào trong quá trình di chuyển chạm. |
boolean | thật |
| 5 | value Mảng có các giá trị ban đầu của nó và mỗi mục mảng cũng đại diện cho giá trị của cột liên quan. |
mảng | - |
| 6 | formatValue Hàm được sử dụng để định dạng giá trị đầu vào và nó sẽ trả về giá trị chuỗi mới / được định dạng. Các giá trị và displayValues là mảng của cột có liên quan. |
hàm (p, giá trị, giá trị hiển thị) | - |
| 7 | cols Mọi mục mảng đại diện cho một đối tượng với các tham số cột. |
mảng | - |
Gọi lại thông số bộ chọn
Bảng sau đây cho thấy danh sách các hàm gọi lại có sẵn trong bộ chọn:
| S. không | Gọi lại & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | onChange Hàm gọi lại sẽ được thực thi bất cứ khi nào giá trị bộ chọn thay đổi và các giá trị và displayValues là các mảng của cột có liên quan. |
hàm (p, giá trị, giá trị hiển thị) | - |
| 2 | onOpen Hàm gọi lại sẽ được thực thi bất cứ khi nào bộ chọn được mở. |
hàm (p) | - |
| 3 | onClose Hàm gọi lại sẽ được thực thi bất cứ khi nào bộ chọn đóng. |
hàm (p) | - |
Tham số cột
Tại thời điểm cấu hình của Picker, chúng ta cần truyền tham số cols . Nó được biểu diễn dưới dạng mảng, trong đó mỗi mục là đối tượng với các tham số cột -
| S. không | Thông số & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | values Bạn có thể chỉ định các giá trị cột chuỗi bằng một mảng. |
mảng | - |
| 2 | displayValues Nó có mảng với các giá trị cột chuỗi và nó sẽ hiển thị giá trị từ tham số giá trị , Khi nó không được chỉ định. |
mảng | - |
| 3 | cssClass Tên lớp CSS được sử dụng để đặt trên vùng chứa HTML cột. |
chuỗi | - |
| 4 | textAlign Nó được sử dụng để đặt căn chỉnh văn bản của các giá trị cột và nó có thể là "trái", "giữa" hoặc "phải" . |
chuỗi | - |
| 5 | width Chiều rộng được tính toán tự động, theo mặc định. Nếu bạn cần sửa độ rộng cột trong bộ chọn với các cột phụ thuộc phải bằng px . |
con số | - |
| 6 | divider Nó được sử dụng cho cột phải là bộ chia trực quan, nó không có bất kỳ giá trị nào. |
boolean | sai |
| 7 | content Nó được sử dụng để chỉ định cột chia (divider: true) với nội dung của cột. |
chuỗi | - |
Tham số gọi lại cột
| S. không | Gọi lại & Mô tả | Kiểu | Mặc định |
|---|---|---|---|
| 1 | onChange Bất cứ khi nào giá trị cột sẽ thay đổi lúc đó hàm gọi lại sẽ thực thi. Các giá trị và displayValue đại diện cho cột hiện giá trị và displayValue . |
function (p, value, displayValue) | - |
Thuộc tính bộ chọn
Biến Picker có nhiều thuộc tính được đưa ra trong bảng sau:
| S. không | Thuộc tính & Mô tả |
|---|---|
| 1 | myPicker.params Bạn có thể khởi tạo các tham số được truyền với đối tượng. |
| 2 | myPicker.value Giá trị đã chọn cho mỗi cột được biểu thị bằng một mảng mục. |
| 3 | myPicker.displayValue Giá trị hiển thị đã chọn cho mỗi cột được biểu thị bằng một mảng mục. |
| 4 | myPicker.opened Khi bộ chọn được mở, nó đặt thành giá trị thực . |
| 5 | myPicker.inline Khi bộ chọn nằm trong dòng, nó đặt thành giá trị thực . |
| 6 | myPicker.cols Các cột Bộ chọn có các phương thức và thuộc tính riêng của nó. |
| 7 | myPicker.container Phiên bản Dom7 được sử dụng cho vùng chứa HTML. |
Phương pháp chọn
Biến bộ chọn có các phương thức hữu ích, được đưa ra trong bảng sau:
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | myPicker.setValue(values, duration) Sử dụng để đặt giá trị bộ chọn mới. Các giá trị nằm trong mảng trong đó mỗi mục đại diện cho giá trị cho mỗi cột. thời lượng - Đó là thời lượng chuyển đổi tính bằng mili giây. |
| 2 | myPicker.open() Sử dụng để mở Bộ chọn. |
| 3 | myPicker.close() Sử dụng để đóng Bộ chọn. |
| 4 | myPicker.destroy() Sử dụng để hủy thể hiện Bộ chọn và xóa tất cả các sự kiện. |
Thuộc tính cột
Mỗi cột trong mảng myPicker.cols cũng có các thuộc tính hữu ích riêng của nó, được đưa ra trong bảng sau:
//Get first column
var col = myPicker.cols[0];| S. không | Thuộc tính & Mô tả |
|---|---|
| 1 | col.container Bạn có thể tạo một phiên bản với cột chứa HTML. |
| 2 | col.items Bạn có thể tạo một phiên bản với các phần tử HTML của các mục cột. |
| 3 | col.value Dùng để chọn giá trị cột hiện tại. |
| 4 | col.displayValue Được sử dụng để chọn giá trị cột hiện tại của màn hình. |
| 5 | col.activeIndex Cung cấp số chỉ mục hiện tại, là mục đã chọn / đang hoạt động. |
Phương pháp cột
Các phương pháp cột hữu ích được đưa ra trong bảng sau:
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | col.setValue(value, duration) Được sử dụng để đặt giá trị mới cho cột hiện tại. Các giá trị phải là một giá trị mới, và thời gian là thời gian chuyển tiếp được đưa ra trong ms. |
| 2 | col.replaceValues(values, displayValues) Được sử dụng để thay thế các giá trị cột và displayValues bằng những giá trị mới. |
Nó được sử dụng để truy cập phiên bản của Bộ chọn từ vùng chứa HTML của nó, bất cứ khi nào bạn khởi tạo Bộ chọn dưới dạng Bộ chọn nội tuyến.
var myPicker = $$('.picker-inline')[0].f7Picker;Có các loại Bộ chọn khác nhau như được chỉ định trong bảng sau:
| S. không | Loại & Mô tả tab |
|---|---|
| 1 | Bộ chọn với một giá trị Nó là một thành phần mạnh mẽ cho phép bạn chọn bất kỳ giá trị nào từ danh sách. |
| 2 | Hai giá trị và Hiệu ứng xoay 3D Trong bộ chọn, bạn có thể sử dụng cho hiệu ứng xoay 3D. |
| 3 | Giá trị phụ thuộc Các giá trị phụ thuộc vào nhau cho phần tử được chỉ định. |
| 4 | Thanh công cụ tùy chỉnh Bạn có thể sử dụng một hoặc nhiều bộ chọn trên một trang để tùy chỉnh. |
| 5 | Bộ chọn nội tuyến / Ngày-giờ Bạn có thể chọn số lượng giá trị trong bộ chọn nội tuyến. Ngày tương tự có ngày, tháng, năm và thời gian có giờ, phút, giây. |
Sự miêu tả
Thành phần Lịch cho phép bạn xử lý ngày tháng một cách dễ dàng và có thể được sử dụng như một thành phần nội dòng hoặc như một thành phần lớp phủ. Lịch lớp phủ sẽ tự động được chuyển đổi thành cửa sổ bật lên trên máy tính bảng.
Lịch chỉ có thể được tạo và khởi chạy bằng cách sử dụng JavaScript. Bạn cần sử dụng phương pháp của Ứng dụng liên quan như hình dưới đây -
myApp.calendar(parameters)- Phương thức này trả về cá thể lịch đã khởi tạo. Nó chấp nhận một đối tượng là paramaters.
Bảng sau đây cho thấy việc sử dụng lịch trong Framework7:
| S. không | Sử dụng & Mô tả Lịch |
|---|---|
| 1 | Tham số lịch Framework7 cung cấp danh sách các tham số, được sử dụng với lịch. |
| 2 | Phương pháp & Thuộc tính Lịch Bạn sẽ nhận được một biến phiên bản đã khởi tạo để sử dụng các phương thức và thuộc tính lịch, sau khi bạn khởi tạo lịch. |
| 3 | Truy cập vào Phiên bản của Lịch Có thể truy cập phiên bản lịch từ vùng chứa HTML của nó khi bạn khởi tạo lịch dưới dạng nội tuyến. |
Sự miêu tả
Nó là một thành phần đặc biệt được sử dụng để làm mới (tải lại) nội dung trang bằng cách kéo nó.
Đoạn mã sau cho biết cách làm mới nội dung trang:
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>Các lớp sau được sử dụng trong làm mới:
page-content- Nó có thêm một lớp nội dung kéo để làm mới và yêu cầu của nó để cho phép kéo để làm mới.
pull-to-refresh-layer- Nó là một lớp ẩn, được sử dụng để kéo để làm mới phần tử hình ảnh và nó chỉ là một trình tải trước và một mũi tên.
data-ptr-distance = "55" - Đây là thuộc tính bổ sung cho phép bạn đặt khoảng cách kích hoạt 'kéo để làm mới' tùy chỉnh và giá trị mặc định của nó là 44px.
Kéo để làm mới sự kiện
Trong 'Kéo để Làm mới' có một số sự kiện JavaScript, được đưa ra trong bảng sau:
| S. không | Sự kiện & Mô tả | Mục tiêu |
|---|---|---|
| 1 | pullstart Nó sẽ được kích hoạt bất cứ khi nào bạn bắt đầu kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 2 | pullmove Nó được kích hoạt khi bạn đang kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 3 | pullend Nó sẽ được kích hoạt bất cứ khi nào bạn thả kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 4 | refresh Sự kiện này sẽ được kích hoạt khi kéo để làm mới chuyển sang trạng thái "làm mới" . |
Kéo để làm mới nội dung. |
| 5 | refreshdone Nó sẽ được kích hoạt sau khi nó được làm mới và nó trở lại trạng thái ban đầu. Điều này sẽ được thực hiện sau khi gọi phương thức pullToRefreshDone . |
Kéo để làm mới nội dung. |
Có những phương pháp của Ứng dụng có thể được sử dụng với Kéo để làm mới.
| S. không | Phương thức & Mô tả của Ứng dụng |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Nó được sử dụng để đặt lại nội dung kéo để làm mới . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Nó được sử dụng để kích hoạt làm mới nội dung kéo để làm mới được chỉ định . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Nó được sử dụng để hủy / vô hiệu hóa pull to refresh trên nội dung pull to refresh được chỉ định . |
| 4 | myApp.initPullToRefresh(ptrContent) Nó được sử dụng để khởi tạo / cho phép kéo để làm mới nội dung . |
Trong đó ptrContent được sử dụng để HTMLElement hoặc chuỗi để kéo để làm mới nội dung để đặt lại / kích hoạt hoặc tắt / bật.
Thí dụ
Ví dụ sau minh họa việc sử dụng thành phần làm mới để bắt đầu làm mới nội dung trang:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng pull_to_refresh.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/pull_to_refresh.html và kết quả được hiển thị như hình dưới đây.
Khi người dùng kéo xuống, trang sẽ được làm mới với nội dung.
Sự miêu tả
Infinite Scroll cho phép bạn tải nội dung bổ sung và thực hiện các tác vụ cần thiết khi trang ở gần cuối.
Bố cục HTML sau đây hiển thị cuộn vô hạn -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>Bố cục trên chứa các lớp sau:
page-content infinite-scroll - Nó được sử dụng cho vùng chứa cuộn vô hạn.
data-distance - Thuộc tính này cho phép bạn định cấu hình khoảng cách từ cuối trang (tính bằng px) để kích hoạt sự kiện cuộn vô hạn và giá trị mặc định của nó là 50px.
Nếu bạn muốn sử dụng cuộn vô hạn trên đầu trang, bạn cần thêm lớp bổ sung "vô hạn-cuộn-trên cùng" vào "nội dung trang" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Sự kiện cuộn vô hạn
infinite- Nó được sử dụng để kích hoạt khi cuộn trang đạt đến khoảng cách xác định đến cuối trang. Nó sẽ được nhắm mục tiêu bởi div class = "page-contentfinity-scroll" .
Có hai phương pháp của Ứng dụng có thể được sử dụng với vùng chứa cuộn vô hạn -
Để thêm trình xử lý sự kiện cuộn vô hạn vào vùng chứa HTML được chỉ định, hãy sử dụng phương pháp sau:
myApp.attachInfiniteScroll(container)Bạn có thể xóa trình xử lý sự kiện cuộn vô hạn khỏi vùng chứa HTML được chỉ định bằng cách sử dụng phương pháp sau:
myApp.detachInfiniteScroll(container)Trong đó tham số là các tùy chọn bắt buộc được sử dụng dưới dạng HTMLElement hoặc chuỗi cho vùng chứa cuộn vô hạn.
Thí dụ
Ví dụ sau minh họa cuộn vô hạn tải nội dung bổ sung khi cuộn trang ở gần cuối -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng infinite_scroll.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/infinite_scroll.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cho phép tải nội dung bổ sung khi cuộn trang của bạn đạt đến khoảng cách xác định đến cuối.
Sự miêu tả
Tin nhắn là thành phần của Framework7, cung cấp hình ảnh trực quan về nhận xét và hệ thống nhắn tin trong ứng dụng.
Bố cục tin nhắn
Framework7 có cấu trúc bố cục thư sau:
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>Bố cục chứa các lớp sau trong các khu vực khác nhau:
Bố cục trang tin nhắn
Bảng sau đây cho thấy các lớp của bố cục trang thông báo với mô tả.
| S. không | Lớp học & Mô tả |
|---|---|
| 1 | messages-content Nó là một lớp bổ sung bắt buộc được thêm vào "nội dung trang" và được sử dụng cho trình bao bọc thư. |
| 2 | messages Nó là một yếu tố bắt buộc cho bong bóng tin nhắn. |
| 3 | messages-date Nó sử dụng hộp chứa tem ngày để hiển thị ngày và thời gian của tin nhắn được gửi hoặc nhận. |
| 4 | message Nó là một thông báo duy nhất được hiển thị. |
Phần bên trong tin nhắn đơn
Bảng sau đây cho thấy các lớp của các phần bên trong thông báo đơn giản với mô tả.
| S. không | Lớp học & Mô tả |
|---|---|
| 1 | message-name Nó cung cấp tên người gửi. |
| 2 | message-text Xác định văn bản với loại bong bóng. |
| 3 | message-avatar Nó chỉ định hình đại diện người gửi. |
| 4 | message-label Nó chỉ định nhãn văn bản bên dưới bong bóng. |
Các lớp bổ sung cho Vùng chứa Thông điệp Đơn
Bảng sau đây hiển thị các lớp bổ sung cho mô tả vùng chứa thư đơn.
| S. không | Lớp học & Mô tả |
|---|---|
| 1 | message-sent Nó chỉ định rằng tin nhắn được gửi bởi người dùng và được hiển thị với màu nền xanh lá cây ở phía bên phải. |
| 2 | message-received Nó được sử dụng để hiển thị một tin nhắn cho biết rằng, tin nhắn đã được người dùng nhận và nằm ở phía bên trái với màu nền xám. |
| 3 | message-pic Nó là một lớp bổ sung để hiển thị hình ảnh với một tin nhắn. |
| 4 | message-with-avatar Nó là một lớp bổ sung để hiển thị một tin nhắn (nhận hoặc gửi) với hình đại diện. |
| 5 | message-with-tail Bạn có thể thêm đuôi bong bóng cho một tin nhắn (đã nhận hoặc đã gửi). |
Các lớp bổ sung có sẵn cho một tin nhắn
Bảng sau đây cho thấy các lớp có sẵn cho một thông báo với mô tả.
| S. không | Lớp học & Mô tả |
|---|---|
| 1 | message-hide-name Nó là một lớp bổ sung để ẩn tên tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 2 | message-hide-avatar Nó là một lớp bổ sung để ẩn hình đại diện tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 3 | message-hide-label Nó là một lớp bổ sung để ẩn nhãn tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 4 | message-last Bạn có thể sử dụng lớp này để chỉ ra tin nhắn đã nhận hoặc đã gửi cuối cùng trong cuộc trò chuyện hiện tại của một người gửi cho một tin nhắn (đã nhận hoặc đã gửi). |
| 5 | message-first Bạn có thể sử dụng lớp này để chỉ ra tin nhắn nhận được đầu tiên hoặc được gửi đầu tiên trong cuộc trò chuyện hiện tại của một người gửi cho một tin nhắn (đã nhận hoặc đã gửi). |
Khởi tạo Tin nhắn bằng JavaScript
Bạn có thể khởi tạo thông báo bằng JavaScript bằng cách sử dụng phương pháp sau:
myApp.messages(messagesContainer, parameters)Phương pháp này có hai tùy chọn -
messagesContainer - Đây là một phần tử hoặc chuỗi HTML bắt buộc bao gồm phần tử HTML chứa thư.
parameters - Nó chỉ định một đối tượng với các tham số thông báo.
Thông số Tin nhắn
Bảng sau đây cho thấy các thông số của tin nhắn với mô tả.
| S. không | Mô tả về Thông Số | Kiểu | Mặc định |
|---|---|---|---|
| 1 | autoLayout Nó thêm các lớp cần thiết bổ sung cho mỗi thông báo bằng cách kích hoạt nó. |
boolean | thật |
| 2 | newMessagesFirst Bạn có thể hiển thị tin nhắn ở trên cùng thay vì hiển thị ở dưới cùng bằng cách bật nó. |
boolean | sai |
| 3 | messages Nó hiển thị một mảng thông báo trong đó mỗi thông báo phải được biểu diễn dưới dạng đối tượng với các tham số thông báo. |
mảng | - |
| 4 | messageTemplate Nó hiển thị một mẫu tin nhắn. |
chuỗi | - |
Thuộc tính Tin nhắn
Bảng sau đây cho thấy các thuộc tính của thông báo với mô tả.
| S. không | Kê khai tài sản |
|---|---|
| 1 | myMessages.params Bạn có thể khởi tạo các tham số được truyền với đối tượng. |
| 2 | myMessages.container Xác định phần tử DOM7 bằng vùng chứa HTML trên thanh thông báo. |
Phương thức nhắn tin
Bảng sau đây cho thấy các phương pháp của thông báo với mô tả.
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Thông báo có thể được thêm vào đầu hoặc cuối bằng cách sử dụng tham số phương thức. Nó có các thông số sau:
|
| 2 | myMessages.appendMessage(messageParameters, animate); Nó thêm một tin nhắn vào cuối vùng chứa tin nhắn. |
| 3 | myMessages.prependMessage(messageParameters, animate); Nó thêm một tin nhắn vào đầu vùng chứa tin nhắn. |
| 4 | myMessages.addMessages(messages, method, animate); Bạn có thể thêm nhiều tin nhắn cùng một lúc. Nó có tham số sau:
|
| 5 | myMessages.removeMessage(message); Nó được sử dụng để xóa tin nhắn. Nó có tham số sau:
|
| 6 | myMessages.removeMessages(messages); Bạn có thể xóa nhiều tin nhắn. Nó có tham số sau:
|
| 7 | myMessages.scrollMessages(); Bạn có thể cuộn tin nhắn từ trên xuống dưới và ngược lại tùy thuộc vào tham số đầu tiên của tin nhắn mới. |
| số 8 | myMessages.layout(); Bố cục tự động có thể được áp dụng cho các tin nhắn. |
| 9 | myMessages.clean(); Nó được sử dụng để làm sạch các tin nhắn. |
| 10 | myMessages.destroy(); Nó được sử dụng để hủy các tin nhắn. |
Tham số tin nhắn đơn
Bảng sau đây hiển thị các thông số cho một thông báo có mô tả.
| S. không | Mô tả về Thông Số | Kiểu | Mặc định |
|---|---|---|---|
| 1 | text Nó xác định văn bản tin nhắn, có thể là một chuỗi HTML. |
chuỗi | - |
| 2 | name Nó chỉ định tên người gửi. |
chuỗi | - |
| 3 | avatar Nó chỉ định chuỗi URL hình đại diện của người gửi. |
chuỗi | - |
| 4 | time Nó chỉ định chuỗi thời gian của thông báo như '9:45 AM', '18: 35 '. |
chuỗi | - |
| 5 | type Nó cung cấp loại tin nhắn cho dù nó có thể được gửi đi hoặc nhận được tin nhắn. |
chuỗi | gởi |
| 6 | label Nó xác định nhãn của tin nhắn. |
chuỗi | - |
| 7 | day Nó cung cấp chuỗi ngày của thông báo như 'chủ nhật', 'thứ hai', 'hôm qua', v.v. |
chuỗi | - |
Khởi tạo Tin nhắn bằng HTML
Bạn có thể khởi tạo các thư bằng HTML mà không cần JavaScript bằng cách sử dụng lớp messages-init bổ sung cho các thư và sử dụng các thuộc tính data- để chuyển các tham số bắt buộc như được hiển thị trong đoạn mã dưới đây -
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...Thí dụ
Ví dụ sau minh họa việc sử dụng các thông báo trong Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// It indicates conversation flag
var conversationStarted = false;
// Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng messages.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/messages.html và kết quả được hiển thị như hình dưới đây.
Khi bạn nhập một tin nhắn vào hộp tin nhắn và nhấp vào nút Gửi, nó chỉ định rằng tin nhắn của bạn đã được gửi và được hiển thị với màu nền xanh ở phía bên phải.
Thư mà bạn nhận được, xuất hiện ở phía bên trái với nền màu xám cùng với tên người gửi.
Sự miêu tả
Framework7 cung cấp thanh công cụ có thể thay đổi kích thước đặc biệt để làm việc với hệ thống nhắn tin trong ứng dụng.
Đoạn mã sau đây hiển thị bố cục thanh thông báo -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>Trong thanh thông báo, phần bên trong của "trang" rất quan trọng và nằm ở bên phải của "nội dung-thông báo" -
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>Bạn có thể sử dụng phương pháp sau để khởi tạo thanh thông báo bằng JavaScript:
myApp.messagesbar(messagesbarContainer, parameters)Phương pháp này có hai tùy chọn -
messagesbarContainer - Đây là một phần tử hoặc chuỗi HTML bắt buộc bao gồm phần tử HTML vùng chứa thanh thông báo.
parameters - Nó chỉ định một đối tượng với các tham số trên thanh thông báo.
Ví dụ -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Thông số thanh thông báo
maxHeight- Nó được sử dụng để đặt chiều cao tối đa của vùng văn bản và sẽ được thay đổi kích thước tùy thuộc vào lượng văn bản của nó. Loại tham số là số và giá trị mặc định là null .
Thuộc tính thanh thông báo
Bảng sau đây cho thấy các thuộc tính của thanh thông báo:
| S. không | Thuộc tính & Mô tả |
|---|---|
| 1 | myMessagebar.params Bạn có thể chỉ định đối tượng với các tham số khởi tạo được truyền vào. |
| 2 | myMessagebar.container Bạn có thể chỉ định phần tử dom7 với phần tử HTML vùng chứa thanh thông báo. |
| 3 | myMessagebar.textarea Bạn có thể chỉ định phần tử dom7 với phần tử HTML văn bản trên thanh thông báo. |
Phương thức thanh thông báo
Bảng sau đây cho thấy các phương thức của thanh thông báo:
| S. không | Phương pháp & Mô tả |
|---|---|
| 1 | myMessagebar.value(newValue); Nó đặt giá trị textarea / văn bản của thanh tin nhắn và trả về giá trị textarea của thanh tin nhắn, nếu newValue không được chỉ định. |
| 2 | myMessagebar.clear(); Nó xóa vùng văn bản và cập nhật / đặt lại kích thước. |
| 3 | myMessagebar.destroy(); Nó phá hủy cá thể thanh thông báo. |
Khởi tạo Thanh thông báo bằng HTML
Bạn có thể khởi tạo thanh thông báo bằng HTML mà không có các phương thức và thuộc tính JavaScript bằng cách thêm lớp messagebar-init vào thanh .messagebar và bạn có thể chuyển các tham số bắt buộc bằng cách sử dụng thuộc tính data- .
Đoạn mã sau chỉ định việc khởi tạo thanh thông báo bằng HTML -
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>Truy cập vào phiên bản của Messagebar
Có thể truy cập cá thể thanh thông báo, nếu bạn khởi tạo nó bằng cách sử dụng HTML; nó đạt được bằng cách sử dụng thuộc tính Thanh thông báo f7 của phần tử vùng chứa của nó.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');Bạn có thể xem ví dụ về Messagebar, được giải thích trong liên kết này
Sự miêu tả
Thông báo được sử dụng để hiển thị các thông báo bắt buộc, giống như thông báo Đẩy (hoặc Cục bộ) iOS.
Bảng sau minh họa việc sử dụng thông báo một cách chi tiết:
| S. không | Sử dụng thông báo & Mô tả |
|---|---|
| 1 | API JavaScript thông báo Các thông báo cũng có thể được thêm hoặc đóng bằng JavaScript bằng cách sử dụng các phương pháp ứng dụng liên quan. |
| 2 | Bố cục thông báo Thông báo của Framework7 sẽ được thêm vào bằng cách sử dụng JavaScript. |
| 3 | IOS ví dụ Framework7 cho phép bạn sử dụng các loại thông báo khác nhau trong bố cục iOS của mình. |
| 4 | Vật liệu mẫu Thông báo Framework7 cũng có thể được sử dụng trong bố cục vật liệu. |
Sự miêu tả
Tải chậm làm chậm quá trình tải hình ảnh của bạn trên một trang nhất định. Tải chậm cải thiện hiệu suất cuộn, tăng tốc độ tải trang và tiết kiệm lưu lượng truy cập.
Các phần tử tải chậm và hình ảnh phải nằm trong <div class = "page-content"> có thể cuộn để hoạt động bình thường.
Bảng sau minh họa việc sử dụng tải lười biếng:
| S. không | Mô tả và sử dụng tải chậm |
|---|---|
| 1 | Sử dụng Tải lười biếng có thể được áp dụng cho hình ảnh, hình nền và với hiệu ứng mờ dần. |
| 2 | Init Lazy Load theo cách thủ công Sau khi khởi tạo một trang, nếu bạn thêm hình ảnh lazy load theo cách thủ công, thì lazy load sẽ không hoạt động và bạn cần sử dụng các phương pháp để khởi tạo nó. |
Có thể tải hình ảnh kích hoạt bằng tay bằng cách sử dụng lười biếng sự kiện trên lười biếng image / yếu tố như hình dưới đây -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');Thí dụ
Ví dụ sau minh họa việc sử dụng tải lười biếng trong Framework7:
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng framework7_lazy_load.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/framework7_lazy_load.html và kết quả được hiển thị như hình dưới đây.
Ví dụ chỉ định tải chậm của hình ảnh nơi hình ảnh sẽ được tải trên trang khi bạn cuộn chúng xuống.
Sự miêu tả
Framework7 cung cấp các chủ đề màu sắc khác nhau cho các ứng dụng của bạn.
Chủ đề màu cung cấp các loại màu chủ đề khác nhau được sử dụng để hoạt động trơn tru với các ứng dụng như được chỉ định trong bảng bên dưới -
| S. không | Loại chủ đề & Mô tả |
|---|---|
| 1 | Màu chủ đề iOS Bạn có thể sử dụng 10 chủ đề màu iOS mặc định khác nhau cho ứng dụng. |
| 2 | Màu sắc chủ đề vật liệu Framework7 cung cấp 22 chủ đề màu vật liệu mặc định khác nhau cho ứng dụng. |
Áp dụng chủ đề màu sắc
Framework7 cho phép bạn áp dụng các chủ đề màu trên các phần tử khác nhau như trang, khối danh sách, thanh điều hướng, hàng nút, v.v. bằng cách sử dụng lớp theme- [color] cho phần tử mẹ.
Thí dụ
...
</body>
<div class = "page theme-gray">
...
</div>
<div class = "list-block theme-blue">
...
</div>
<div class = "navbar theme-green">
...
</div>
<div class = "buttons-row theme-red">
...
</div>Chủ đề bố cục
Bạn có thể sử dụng chủ đề bố cục mặc định cho ứng dụng của mình bằng cách sử dụng hai chủ đề trắng và tối . Các chủ đề có thể được áp dụng bằng cách sử dụng lớp layout- [theme] cho phần tử cha.
Thí dụ
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Lớp người trợ giúp
Framework7 cung cấp các lớp trợ giúp bổ sung, có thể được sử dụng bên ngoài hoặc không có các chủ đề như được liệt kê bên dưới -
color-[color] - Nó có thể được sử dụng để thay đổi màu văn bản của khối hoặc màu của nút, liên kết, biểu tượng, v.v.
bg-[color] - Nó đặt màu nền được xác định trước trên khối hoặc phần tử.
border-[color] - Nó đặt màu viền được xác định trước trên khối hoặc phần tử.
Sự miêu tả
Hairline là một lớp thêm đường viền 1px xung quanh các hình ảnh bằng cách sử dụng lớp đường viền. Với việc phát hành 1.x, hairlines đã sửa đổi cách làm việc với : after và : before các phần tử giả thay vì sử dụng các đường viền CSS.
Hairlines chứa các quy tắc sau:
:after- Phần tử giả này được sử dụng cho phần chân tóc dưới và bên phải .
:before- Phần tử giả này được sử dụng cho phần tóc trên và bên trái .
Đoạn mã sau cho thấy việc sử dụng phần tử : after .
.navbar:after {
background-color: red;
}Đoạn mã sau sẽ xóa thanh công cụ chân tóc dưới cùng -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}lớp "không biên giới"
Đường viền sẽ được loại bỏ bằng cách sử dụng lớp không viền và nó được hỗ trợ trên Thanh điều hướng, thanh công cụ, thẻ và các phần tử của nó.
Đoạn mã sau được sử dụng để xóa chân tóc khỏi thanh điều hướng:
<div class = "navbar no-border">
...
</div>Sự miêu tả
Template7 là một công cụ JavaScript nhẹ, ưu tiên cho thiết bị di động, đại diện cho Ajax và các trang động dưới dạng các mẫu Template7 với ngữ cảnh cụ thể và không yêu cầu bất kỳ tập lệnh bổ sung nào. Template7 được liên kết với Framework7 như một công cụ mẫu nhẹ, mặc định, hoạt động nhanh hơn cho các ứng dụng.
Hiệu suất
Quá trình biên dịch chuỗi thành hàm JS là phân đoạn chậm nhất của template7. Do đó, bạn không cần phải biên dịch mẫu nhiều lần, chỉ một lần là đủ.
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});Template7 là một công cụ mẫu nhẹ được sử dụng như một thư viện độc lập không có Framework7. Tệp Template7 có thể được cài đặt bằng hai cách:
Bạn có thể tải xuống từ kho lưu trữ github của Template7 .
Bạn có thể cài đặt nó bằng lệnh sau qua Bower:
Hoặc là
bower install template7Sự miêu tả
Trong Template7, bạn có thể tự động biên dịch các mẫu của mình bằng cách chỉ định các thuộc tính đặc biệt trong thẻ <script>.
Đoạn mã sau hiển thị bố cục biên dịch tự động:
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>Bạn có thể sử dụng các thuộc tính sau để khởi tạo tự động biên dịch -
type = "text/template7" - Nó được sử dụng để yêu cầu Template7 tự động biên dịch và nó là một loại tập lệnh bắt buộc.
id = "myTemplate" - Mẫu có thể truy cập thông qua id và nó là id mẫu bắt buộc.
Để biên dịch tự động, bạn cần bật khởi tạo ứng dụng bằng cách chuyển tham số sau:
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
Các mẫu được biên dịch tự động có thể được truy cập dưới dạng thuộc tính của Template7.templates sau khi khởi chạy ứng dụng. Nó còn được gọi là myApp.templates trong đó myApp là một phiên bản được khởi tạo của ứng dụng.
Bạn có thể sử dụng các mẫu sau trong tệp index.html của chúng tôi -
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>Bạn cũng có thể truy cập các mẫu trong JavaScript sau khi khởi chạy ứng dụng -
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});Sự miêu tả
Template7 là công cụ tạo mẫu JavaScript ưu tiên cho thiết bị di động với cú pháp giống như handlebars.js . Đây là công cụ mẫu mặc định siêu nhẹ và cực nhanh trong Framework7.
Đầu tiên, chúng ta cần chuyển tham số sau vào quá trình khởi tạo ứng dụng để hiển thị tất cả các trang Ajax và động dưới dạng mẫu Template7:
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S. không | Cách sử dụng & mô tả 7 trang mẫu |
|---|---|
| 1 | Dữ liệu Mẫu / Trang Bạn có thể chuyển dữ liệu / ngữ cảnh bắt buộc cho các trang cụ thể bằng cách chỉ định tất cả dữ liệu trang trong tham số template7Data , được gửi khi khởi chạy Ứng dụng. |
| 2 | Vượt qua ngữ cảnh tùy chỉnh Framework7 cho phép bạn chuyển ngữ cảnh tùy chỉnh đến bất kỳ trang động nào hoặc bất kỳ Ajax nào được tải. |
| 3 | Tải mẫu trực tiếp Bạn có thể kết xuất và tải các mẫu ngay lập tức dưới dạng các trang động. |
| 4 | Truy vấn URL Nếu bạn đang sử dụng Template7 để hiển thị các trang Ajax, ngữ cảnh của nó sẽ luôn được mở rộng với thuộc tính đặc biệt url_query . |
Thí dụ
Ví dụ sau cung cấp các liên kết, hiển thị thông tin người dùng như chi tiết người dùng, lượt thích của người dùng, v.v. khi bạn nhấp vào các liên kết đó.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng index.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/index.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cung cấp các liên kết, hiển thị thông tin người dùng như chi tiết người dùng, lượt thích của người dùng khi bạn nhấp vào các liên kết đó.
Sự miêu tả
Khi bạn nhấn vào các liên kết và nút, chúng sẽ được đánh dấu. Điều này được thực hiện bởi trạng thái hoạt động trong Framework7.
- Nó hoạt động giống như một ứng dụng gốc, không giống như một ứng dụng web ..
- Nó có một thư viện Fast click tích hợp và nó sẽ được kích hoạt.
- Lớp trạng thái hoạt động giống như CSS : active selector.
- Trạng thái hoạt động được bật bằng cách thêm lớp trạng thái xem-hoạt động vào phần tử <html> .
Đoạn mã sau được sử dụng cho trạng thái hoạt động trong kiểu CSS:
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}Đoạn mã sau cho thấy khả năng tương thích dự phòng, khi trạng thái Hoạt động hoặc Nhấp chuột nhanh bị vô hiệu hóa -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}Sự miêu tả
Sự kiện Nhấn giữ được sử dụng để kích hoạt (bật) sau một sự kiện chạm duy trì và hoàn thành, do đó, nó được gọi là sự kiện nhấn giữ . Các Tab Giữ được một built-inFast Clicks thư viện.
Các tham số sau được sử dụng để tắt hoặc bật và định cấu hình theo mặc định:
| S. không | Mô tả về Thông Số | Kiểu | Mặc định |
|---|---|---|---|
| 1 | tapHold Để bật các sự kiện nhấn giữ khi nó được đặt thành true. |
boolean | sai |
| 2 | tapHoldDelay Nó chỉ định khoảng thời gian giữ vòi trước khi kích hoạt sự kiện giữ vòi trên phần tử mục tiêu. |
con số | 750 |
| 3 | tapHoldPreventClicks Sự kiện nhấn giữ sẽ không được kích hoạt sau khi nhấp vào sự kiện. |
boolean | thật |
Mã sau được sử dụng để bật các sự kiện nhấn giữ -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Sự miêu tả
Touch Ripple là một hiệu ứng chỉ được hỗ trợ trong chủ đề material của Framework7. Theo mặc định, nó được bật trong chủ đề material và bạn có thể tắt nó bằng cách sử dụng tham số materialRipple: false .
Các yếu tố Ripple
Bạn có thể bật các phần tử gợn sóng để khớp với một số bộ chọn CSS chẳng hạn như -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox, v.v.
Chúng được chỉ định trong tham số materialRippleElements . Bạn cần bật gợn cảm ứng , thêm bộ chọn của phần tử vào tham số materialRippleElements để sử dụng hiệu ứng gợn hoặc chỉ sử dụng lớp gợn .
Màu sóng gợn
Màu của gợn sóng có thể được thay đổi trên phần tử bằng cách thêm lớp ripple- [color] vào phần tử.
Ví dụ -
<a href = "#" class = "button ripple-orange">Ripple Button</a>hoặc bạn có thể xác định màu sóng gợn bằng cách sử dụng CSS như hình dưới đây -
.button .ripple-wave {
background-color: #FFFF00;
}Tắt các phần tử Ripple
Bạn có thể vô hiệu hóa gợn sóng cho một số phần tử được chỉ định bằng cách thêm lớp không gợn sóng vào các phần tử đó. Ví dụ -
<a href = "#" class = "button no-ripple">Ripple Button</a>