Учебники

Framework7 — Панель поиска

Декабрь 31, 2018

Framework 7 позволяет искать элементы, используя класс панели поиска .

Параметры панели поиска

S.No Параметры и описание Тип По умолчанию
1

спискупоиска

Он ищет селектор CSS или HTML-элемент списка.

строка или элемент HTML —
2

Searchin

Вы можете искать элементы списка в селекторах CSS, а также искать элементы, передавая классы .item-title , .item-text .

строка ‘.Item-титул’
3

найденный

Он ищет селектор CSS или элемент HTML, используя элемент «найдено». Кроме того, он использует элемент .searchbar-found, если элемент не указан.

строка или элемент HTML —
4

не найдено

Он ищет селектор CSS или элемент HTML, используя элемент «not-found». Кроме того, он использует элемент .searchbar-not-found, если элемент не указан.

строка или элемент HTML —
5

наложение

Он ищет селектор CSS или элемент HTML, используя элемент «searchbar overlay», и использует элемент .searchbar-overlay , если элемент не указан.

строка или элемент HTML —
6

игнорировать

Вы можете игнорировать селектор CSS для элементов, используя панель поиска.

строка ‘.Searchbar-игнорировать’
7

customSearch

Когда она включена, панель поиска не будет искать ни в одном из блоков списка, указанных в searchList, и вам будет разрешено использовать пользовательские функции поиска.

логический ложный
8

removeDiacritics

При поиске элемента удалите диакритические знаки, включив этот параметр.

логический ложный
9

hideDividers

Этот параметр скрывает разделители элементов и заголовок группы, если элементов нет.

логический правда
10

hideGroups

Этот параметр скрывает группы, если в группах представления списка не найдено ни одного элемента.

логический правда

спискупоиска

Он ищет селектор CSS или HTML-элемент списка.

Searchin

Вы можете искать элементы списка в селекторах CSS, а также искать элементы, передавая классы .item-title , .item-text .

найденный

Он ищет селектор CSS или элемент HTML, используя элемент «найдено». Кроме того, он использует элемент .searchbar-found, если элемент не указан.

не найдено

Он ищет селектор CSS или элемент HTML, используя элемент «not-found». Кроме того, он использует элемент .searchbar-not-found, если элемент не указан.

наложение

Он ищет селектор CSS или элемент HTML, используя элемент «searchbar overlay», и использует элемент .searchbar-overlay , если элемент не указан.

игнорировать

Вы можете игнорировать селектор CSS для элементов, используя панель поиска.

customSearch

Когда она включена, панель поиска не будет искать ни в одном из блоков списка, указанных в searchList, и вам будет разрешено использовать пользовательские функции поиска.

removeDiacritics

При поиске элемента удалите диакритические знаки, включив этот параметр.

hideDividers

Этот параметр скрывает разделители элементов и заголовок группы, если элементов нет.

hideGroups

Этот параметр скрывает группы, если в группах представления списка не найдено ни одного элемента.

Панель поиска

S.No Обратные звонки и описание Тип По умолчанию
1

onSearch

Этот метод вызовет функцию обратного вызова при выполнении поиска.

функция (и) —
2

onEnable

Этот метод вызовет функцию обратного вызова, когда панель поиска станет активной.

функция (и) —
3

onDisable

Этот метод вызовет функцию обратного вызова, когда панель поиска станет неактивной.

функция (и) —
4

OnClear

Этот метод вызовет функцию обратного вызова при нажатии на элемент «очистить».

функция (и) —

onSearch

Этот метод вызовет функцию обратного вызова при выполнении поиска.

onEnable

Этот метод вызовет функцию обратного вызова, когда панель поиска станет активной.

onDisable

Этот метод вызовет функцию обратного вызова, когда панель поиска станет неактивной.

OnClear

Этот метод вызовет функцию обратного вызова при нажатии на элемент «очистить».

Свойства панели поиска

S.No Свойства и описание
1

mySearchbar.params

Представляет инициализированные параметры, переданные с объектом.

2

mySearchbar.query

Ищет текущий запрос.

3

mySearchbar.searchList

Определяет блок списка поиска.

4

mySearchbar.container

Определяет контейнер панели поиска с элементом HTML.

5

mySearchbar.input

Определяет ввод строки поиска с HTML-элементом.

6

mySearchbar.active

Он определяет, включена ли панель поиска.

mySearchbar.params

Представляет инициализированные параметры, переданные с объектом.

mySearchbar.query

Ищет текущий запрос.

mySearchbar.searchList

Определяет блок списка поиска.

mySearchbar.container

Определяет контейнер панели поиска с элементом HTML.

mySearchbar.input

Определяет ввод строки поиска с HTML-элементом.

mySearchbar.active

Он определяет, включена ли панель поиска.

Методы панели поиска

S.No Методы и описание
1

mySearchbar.search (запрос);

Этот метод ищет пропущенный запрос.

2

mySearchbar.enable ();

Включает панель поиска.

3

mySearchbar.disable ();

Это отключает панель поиска.

4

mySearchbar.clear ();

Вы можете очистить запрос и результаты поиска.

5

mySearchbar.destroy ();

Уничтожает экземпляр панели поиска.

mySearchbar.search (запрос);

Этот метод ищет пропущенный запрос.

mySearchbar.enable ();

Включает панель поиска.

mySearchbar.disable ();

Это отключает панель поиска.

mySearchbar.clear ();

Вы можете очистить запрос и результаты поиска.

mySearchbar.destroy ();

Уничтожает экземпляр панели поиска.

Панель поиска JavaScript События

S.No Описание события цель
1

поиск

Вы можете запустить это событие при поиске элементов.

<div class = «list-block»>
2

ClearSearch

Это событие вызывается, когда пользователь нажимает на элемент clearSearch.

<div class = «list-block»>
3

enableSearch

Когда панель поиска станет активной, это событие будет запущено.

<div class = «list-block»>
4

disableSearch

Когда панель поиска отключается и пользователь нажимает кнопку «Отмена» или элемент «Поиск панели наложения», это событие запускается.

<div class = «list-block»>

поиск

Вы можете запустить это событие при поиске элементов.

ClearSearch

Это событие вызывается, когда пользователь нажимает на элемент clearSearch.

enableSearch

Когда панель поиска станет активной, это событие будет запущено.

disableSearch

Когда панель поиска отключается и пользователь нажимает кнопку «Отмена» или элемент «Поиск панели наложения», это событие запускается.

пример

В следующем примере демонстрируется использование панели поиска при прокрутке в 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 code search_bar.html в корневой папке вашего сервера.

Откройте этот HTML-файл как http: //localhost/search_bar.html, и вывод отобразится, как показано ниже.

Если элемент, содержащийся в списке, введен в строку поиска, он отображает этот конкретный элемент из списка.

Если введен элемент, отличный от элементов, содержащихся в списке, он не отображает найденный элемент.

44
Share: