Framework7 - Thanh tìm kiếm
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 bộ chọn CSS hoặc phần tử HTML bằng cách sử dụ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ẽ được 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.