Framework7 - Панель поиска
Описание
Framework 7 позволяет искать элементы с помощью класса панели поиска .
Параметры панели поиска
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | searchList Он выполняет поиск в селекторе CSS или HTML-элементе списка. |
строка или элемент HTML | - |
| 2 | searchIn Вы можете искать элементы представления списка селекторов CSS, а также искать элементы, передавая классы .item-title , .item-text . |
строка | '.item-title' |
| 3 | found Он выполняет поиск в селекторе CSS или элементе HTML, используя «найденный» элемент. Кроме того, он использует элемент .searchbar-found, если элемент не указан. |
строка или элемент HTML | - |
| 4 | notfound Он выполняет поиск в селекторе CSS или HTML-элементе, используя «не найденный» элемент. Кроме того, он использует элемент .searchbar-not-found, если элемент не указан. |
строка или элемент HTML | - |
| 5 | overlay Он выполняет поиск в селекторе CSS или элементе HTML с помощью элемента «наложение панели поиска» и использует элемент .searchbar-overlay , если элемент не указан. |
строка или элемент HTML | - |
| 6 | ignore Вы можете игнорировать селектор CSS для элементов, используя панель поиска. |
строка | '.searchbar-ignore' |
| 7 | customSearch Когда он включен, панель поиска не будет выполнять поиск ни в одном из блоков списков, указанных в searchList, и вам будет разрешено использовать настраиваемые функции поиска. |
логический | ложный |
| 8 | removeDiacritics При поиске элемента удалите диакритические знаки, включив этот параметр. |
логический | ложный |
| 9 | hideDividers Этот параметр скроет разделители элементов и заголовок группы, если элементов нет. |
логический | правда |
| 10 | hideGroups Этот параметр скроет группы, если в группах просмотра списка нет элементов. |
логический | правда |
Обратные вызовы панели поиска
| S.No | Обратные вызовы и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | onSearch Этот метод будет запускать функцию обратного вызова при выполнении поиска. |
функция (ы) | - |
| 2 | onEnable Этот метод запускает функцию обратного вызова, когда панель поиска становится активной. |
функция (ы) | - |
| 3 | onDisable Этот метод запускает функцию обратного вызова, когда панель поиска становится неактивной. |
функция (ы) | - |
| 4 | onClear Этот метод вызовет функцию обратного вызова, когда вы нажмете на «очистить» элемент. |
функция (ы) | - |
Свойства панели поиска
| S.No | Свойства и описание |
|---|---|
| 1 | mySearchbar.params Представляет инициализированные параметры, переданные с объектом. |
| 2 | mySearchbar.query Ищет текущий запрос. |
| 3 | mySearchbar.searchList Определяет блок списка поиска. |
| 4 | mySearchbar.container Определяет контейнер панели поиска с элементом HTML. |
| 5 | mySearchbar.input Определяет ввод панели поиска с элементом HTML. |
| 6 | mySearchbar.active Он определяет, включена или отключена панель поиска. |
Методы панели поиска
| S.No | Методы и описание |
|---|---|
| 1 | mySearchbar.search(query); Этот метод выполняет поиск переданного запроса. |
| 2 | mySearchbar.enable(); Это включает панель поиска. |
| 3 | mySearchbar.disable(); Отключает панель поиска. |
| 4 | mySearchbar.clear(); Вы можете очистить запрос и результаты поиска. |
| 5 | mySearchbar.destroy(); Он уничтожает экземпляр панели поиска. |
События JavaScript панели поиска
| S.No | Описание события | Цель |
|---|---|---|
| 1 | search Вы можете активировать это событие при поиске элементов. |
<div class = "list-block"> |
| 2 | clearSearch Это событие запускается, когда пользователь щелкает элемент clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Когда панель поиска становится доступной, это событие запускается. |
<div class = "list-block"> |
| 4 | disableSearch Когда панель поиска отключается и пользователь нажимает кнопку отмены или элемент «наложение панели поиска», это событие запускается. |
<div class = "list-block"> |
пример
В следующем примере демонстрируется использование панели поиска при прокрутке в 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>Вывод
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните указанный выше HTML-код search_bar.html файл в корневой папке вашего сервера.
Откройте этот HTML-файл как http: //localhost/search_bar.html, и результат отобразится, как показано ниже.
Если элемент, содержащийся в списке, вводится в строку поиска, он отображает этот конкретный элемент из списка.
Если вводится элемент, отличный от элементов, содержащихся в списке, он не отображает ни одного найденного элемента.