Framework7 — Обзор

Framework7 — это бесплатная платформа с открытым исходным кодом для мобильного HTML. Он используется для разработки гибридных мобильных приложений или веб-приложений для устройств iOS и Android.

Framework7 был представлен в 2014 году. Последняя версия 1.4.2 была выпущена в феврале 2016 года по лицензии MIT.

Зачем использовать Framework7?

• Проще разрабатывать приложения для iOS и Android.
• Кривая обучения для Framework7 очень проста.
• У этого есть много предварительно стилизованных виджетов / компонентов.
• Он имеет встроенные вспомогательные библиотеки.

Характеристики

• Framework7 — это общедоступный и бесплатный фреймворк.

• Framework7 имеет простой и знакомый синтаксис jQuery, чтобы начать работу без каких-либо задержек.

• Чтобы контролировать задержку нажатия для сенсорных интерфейсов, Framework7 имеет встроенную библиотеку FastClick .

• В Framework7 есть встроенная сеточная система компоновки, позволяющая быстро организовать ваши элементы.

• Framework7 динамически загружает страницы из шаблонов через гибкий маршрутизатор API .

Framework7 — это общедоступный и бесплатный фреймворк.

Framework7 имеет простой и знакомый синтаксис jQuery, чтобы начать работу без каких-либо задержек.

Чтобы контролировать задержку нажатия для сенсорных интерфейсов, Framework7 имеет встроенную библиотеку FastClick .

В Framework7 есть встроенная сеточная система компоновки, позволяющая быстро организовать ваши элементы.

Framework7 динамически загружает страницы из шаблонов через гибкий маршрутизатор API .

преимущества

• Framework7 не зависит от какой-либо сторонней библиотеки даже для манипулирования DOM. Вместо этого у него есть свой собственный DOM7.

• Framework7 также можно использовать с платформами Angular и React .

• Вы можете начать создавать приложения, когда вы знаете HTML, CSS и немного базового JavaScript.

• Он поддерживает более быструю разработку через Bower .

• Легко разрабатывать приложения для iOS и Android, не изучая его.

Framework7 не зависит от какой-либо сторонней библиотеки даже для манипулирования DOM. Вместо этого у него есть свой собственный DOM7.

Framework7 также можно использовать с платформами Angular и React .

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

Он поддерживает более быструю разработку через Bower .

Легко разрабатывать приложения для iOS и Android, не изучая его.

Недостатки

• Framework7 поддерживает только такие платформы, как iOS и Android.

• Онлайн-сообщество поддерживает Framework7 меньше по сравнению с iOS и Andriod.

Framework7 поддерживает только такие платформы, как iOS и Android.

Онлайн-сообщество поддерживает Framework7 меньше по сравнению с iOS и Andriod.

Framework7 — Окружающая среда

В этой главе мы обсудим, как установить и настроить Framework7.

Вы можете скачать Framework7 двумя способами —

Загрузить из репозитория Framework7 Github

Вы можете установить Framework7, используя Bower, как показано ниже —

bower install framework7

После успешной установки Framework7 вам необходимо выполнить следующие шаги, чтобы использовать Framework7 в своем приложении —

Шаг 1 — Вам необходимо установить gulp-cli для сборки разрабатываемых и дистрибутивных версий Framework7 с помощью следующей команды.

npm install gulp-cli

Cli обозначает утилиту командной строки для Gulp.

Шаг 2 — Gulp должен быть установлен глобально с помощью следующей команды.

npm install --global gulp

Шаг 3 — Затем установите менеджер пакетов NodeJS, который устанавливает программы узлов, которые упрощают определение и связывание зависимостей. Следующая команда используется для установки npm.

npm install

Шаг 4 — Разрабатываемая версия Framework7 может быть собрана с помощью следующей команды.

npm build

Шаг 5 — Как только вы соберете версию разработки Framework7, начните сборку приложения из папки dist / с помощью следующей команды.

npm dist

Шаг 6. Сохраните папку своего приложения на сервере и выполните следующую команду для перехода между страницами своего приложения.

gulp server

Скачать библиотеку Framework7 из CDN

CDN или Сеть доставки контента — это сеть серверов, предназначенная для обслуживания файлов пользователям. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию Framework7 из той же CDN, ее не нужно будет повторно загружать. Вы можете включить следующие файлы CDN в документ HTML.

Следующие CDN используются в макете приложения iOS —

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

Он используется для включения iOS7-библиотеки Framework7 в ваше приложение.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

Он используется для включения в ваше приложение цветовых стилей Framework7 iOS.

Следующие CDN используются в Android / Material App Layout —

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

Он используется для включения библиотеки JS Framework7 в ваше приложение.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

Он используется для включения в ваше приложение стилей Framework7 Material.

В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS — это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.

В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS — это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.

пример

В следующем примере демонстрируется использование простого приложения в 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>
      //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>

Затем создайте еще одну HTML-страницу, т.е. envirmnt_about.html, как показано ниже —

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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл framework7_environment.html в корневой папке вашего сервера.

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

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

Сохраните приведенный выше HTML-код как файл framework7_environment.html в корневой папке вашего сервера.

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

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

Framework7 — макеты

Описание

Framework7 предоставляет различные типы макетов для вашего приложения. Он поддерживает три типа разметки Navbar / Toolbar —

S.No	Типы макетов и описание
1	Статическая компоновка Статический макет чаще всего используется в макете и включает в себя панель навигации и панель инструментов, которые могут быть прокручиваемым содержимым страницы, и каждая страница содержит свою собственную панель навигации и панель инструментов.
2	Фиксированный макет Фиксированный макет включает в себя собственную панель навигации и панель инструментов, которые могут быть видны на экране и не могут быть прокручены на странице.
3	Через макет В этом макете панель навигации и панель инструментов отображаются фиксированными для всех страниц в одном представлении.
4	Смешанный макет Вы можете смешивать различные типы макетов в одном представлении.

Статический макет чаще всего используется в макете и включает в себя панель навигации и панель инструментов, которые могут быть прокручиваемым содержимым страницы, и каждая страница содержит свою собственную панель навигации и панель инструментов.

Фиксированный макет включает в себя собственную панель навигации и панель инструментов, которые могут быть видны на экране и не могут быть прокручены на странице.

В этом макете панель навигации и панель инструментов отображаются фиксированными для всех страниц в одном представлении.

Вы можете смешивать различные типы макетов в одном представлении.

Нет Навбар / Панель инструментов

Если вы не хотите использовать панель навигации и панель инструментов, не включайте в page / pages / view соответствующие классы ( navbar-fixed , navbar-through , toolbar-through , toolbar-through ).

Framework7 — Навбары

Описание

В этой главе давайте изучим navbar . Обычно он размещается в верхней части экрана и содержит заголовок страницы и элементы навигации.

Navbar состоит из трех частей, каждая из которых может содержать любой HTML-контент, но предлагается использовать их так, как указано ниже:

• Слева — предназначена для размещения значков обратной ссылки или отдельной текстовой ссылки.

• Центр — используется для отображения заголовка страницы или ссылок вкладки.

• Справа — эта часть похожа на левую часть.

Слева — предназначена для размещения значков обратной ссылки или отдельной текстовой ссылки.

Центр — используется для отображения заголовка страницы или ссылок вкладки.

Справа — эта часть похожа на левую часть.

Следующая таблица демонстрирует использование navbar в деталях —

S.No	Типы и описание Navbar
1	Базовая навигация Базовая панель навигации может быть создана с использованием классов navbar , navbar-inner , left , center и right .
2	Навбар со ссылками Чтобы использовать ссылки в левой и правой части панели навигации, просто добавьте тег <a> со ссылкой на класс.
3	Несколько ссылок Чтобы использовать несколько ссылок, просто добавьте еще несколько <a class = «link»> к выбранной вами части.
4	Ссылки с текстом и иконками Ссылки могут быть снабжены значками и текстами, добавив классы для значков и обернув текст ссылки элементом <span> .
5	Ссылки только с иконками Ссылки на панели навигации могут быть снабжены только значками, добавив в ссылки только класс значков.
6	Связанные приложения и методы просмотра При инициализации View , framework7 позволяет вам использовать методы, доступные для navbar.
7	Скрыть Navbar автоматически Панель навигации может быть скрыта / показана автоматически для некоторых страниц, загруженных Ajax, где панель навигации не требуется.

Базовая панель навигации может быть создана с использованием классов navbar , navbar-inner , left , center и right .

Чтобы использовать ссылки в левой и правой части панели навигации, просто добавьте тег <a> со ссылкой на класс.

Чтобы использовать несколько ссылок, просто добавьте еще несколько <a class = «link»> к выбранной вами части.

Ссылки могут быть снабжены значками и текстами, добавив классы для значков и обернув текст ссылки элементом <span> .

Ссылки на панели навигации могут быть снабжены только значками, добавив в ссылки только класс значков.

При инициализации View , framework7 позволяет вам использовать методы, доступные для navbar.

Панель навигации может быть скрыта / показана автоматически для некоторых страниц, загруженных Ajax, где панель навигации не требуется.

Framework7 — Панели инструментов

Описание

Панель инструментов обеспечивает легкий доступ к другим страницам с помощью элементов навигации в нижней части экрана.

Вы можете использовать панель инструментов двумя способами, как указано в таблице —

S.No	Типы панелей инструментов и описание
1	Скрыть панель инструментов Вы можете автоматически скрывать панель инструментов при загрузке страниц, используя класс панели инструментов для загруженной страницы.
2	Нижняя панель инструментов Поместите панель инструментов внизу страницы, используя класс панели инструментов внизу .

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

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

Методы панели инструментов

Следующие доступные методы могут быть использованы с панелями инструментов —

S.No	Методы панели инструментов и описание
1	myApp.hideToolbar (панель инструментов) Скрывает указанную панель инструментов.
2	myApp.showToolbar (панель инструментов) Показывает указанную панель инструментов.
3	view.hideToolbar () Он скрывает указанную панель инструментов в представлении.
4	view.showToolbar () Показывает указанную панель инструментов в представлении.

myApp.hideToolbar (панель инструментов)

Скрывает указанную панель инструментов.

myApp.showToolbar (панель инструментов)

Показывает указанную панель инструментов.

view.hideToolbar ()

Он скрывает указанную панель инструментов в представлении.

view.showToolbar ()

Показывает указанную панель инструментов в представлении.

пример

В следующем примере демонстрируется использование макета панели инструментов в Framework7.

Сначала мы создадим одну HTML-страницу с именем toolbar.html, как показано ниже —

<!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>

Теперь инициализируйте ваше приложение и представления в пользовательском файле JS toolbar.js .

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла toolbar.html в корневой папке вашего сервера.

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

Сохраните приведенный выше HTML-код в виде файла toolbar.html в корневой папке вашего сервера.

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

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

Описание

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, и вывод отобразится, как показано ниже.

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

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

Сохраните указанный выше файл HTML code search_bar.html в корневой папке вашего сервера.

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

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

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

Framework7 — строка состояния

Описание

IOS 7+ позволяет создавать полноэкранные приложения, которые могут создавать проблемы, когда ваша строка состояния перекрывает ваше приложение. Framework7 решает эту проблему, определяя, находится ли ваше приложение в полноэкранном режиме или нет. Если ваше приложение находится в полноэкранном режиме, то Framework7 автоматически добавит класс с-statusbar-overlay в <html> (или удалит, если приложение не находится в полноэкранном режиме), и вам нужно добавить класс наложения statusbar в <body> как показано в следующем коде —

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

По умолчанию <div> всегда будет скрыт и зафиксирован в верхней части экрана. Он будет виден только тогда, когда приложение находится в полноэкранном режиме, а класс с-statusbar-overlay добавлен в <html> .

пример

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

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла status_bar.html в корневой папке вашего сервера.

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

Сохраните приведенный выше HTML-код в виде файла status_bar.html в корневой папке вашего сервера.

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

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

Framework7 — боковые панели

Описание

Боковая панель перемещается в левую или правую часть экрана для отображения содержимого. Framework7 позволяет включать в приложение до 2 панелей (правая и левая). Вам нужно добавить панели в начале <body> и затем выбрать эффект открытия, применяя следующие перечисленные классы —

• панель-раскрытие — это заставит весь контент приложения переместиться.

• панель-крышка — это сделает панель для наложения на контент приложения.

панель-раскрытие — это заставит весь контент приложения переместиться.

панель-крышка — это сделает панель для наложения на контент приложения.

Например, следующий код показывает, как использовать вышеупомянутые классы —

<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>     

В следующей таблице показаны типы панелей, поддерживаемые Framework77.

S.No	Тип и описание
1	Открывать и закрывать панели Как только вы добавите панель и эффекты, нам нужно добавить функциональность, чтобы открывать и закрывать панели.
2	Панельные События Чтобы определить, как пользователь взаимодействует с панелью, вы можете использовать события панели.
3	Открытые панели с проведением Framework7 предоставляет вам возможность открывать панель жестом смахивания .
4	Панель открыта? Мы можем определить, открыта ли панель или нет, используя правило with-panel [position] — [effect] .

Как только вы добавите панель и эффекты, нам нужно добавить функциональность, чтобы открывать и закрывать панели.

Чтобы определить, как пользователь взаимодействует с панелью, вы можете использовать события панели.

Framework7 предоставляет вам возможность открывать панель жестом смахивания .

Мы можем определить, открыта ли панель или нет, используя правило with-panel [position] — [effect] .

Framework7 — Блок контента

Описание

Блоки содержимого можно использовать для добавления дополнительного содержимого в другом формате.

пример

В следующем примере демонстрируется использование блока содержимого в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла content_block.html в корневой папке вашего сервера.

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

• Код добавляет дополнительное форматирование и необходимый интервал для текстового содержимого.

Сохраните приведенный выше HTML-код в виде файла content_block.html в корневой папке вашего сервера.

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

Код добавляет дополнительное форматирование и необходимый интервал для текстового содержимого.

Framework7 — Layout Grid

Описание

Framework7 предоставляет различные типы типов сетки для размещения контента в соответствии с потребностями пользователя.

Сетка макета предоставляет различные типы размеров столбцов, как описано в следующей таблице:

S.No	Учебный класс	Класс стола	ширина
1	Col-5	Планшет-5	5%
2	Col-10	Планшет-10	10%
3	Col-15	Планшет-15	15%
4	Col-20	Планшет-20	20%
5	Col-25	Планшет-25	25%
6	Col-30	Планшет-30	30%
7	Col-33	Планшет-33	33,3%
8	Col-35	Планшет-35	35%
9	Col-40	Планшет-40	40%
10	Col-45	Планшет-45	45%
11	Col-50	Планшет-50	50%
12	Col-55	Планшет-55	55%
13	Col-60	Планшет-60	60%
14	Col-65	Планшет-65	65%
15	Col-66	Планшет-66	66,6%
16	Col-70	Планшет-70	70%
17	Col-75	Планшет-75	75%
18	Col-80	Планшет-80	80%
19	Col-85	Планшет-85	85%
20	Col-90	Планшет-90	90%
21	Col-95	Планшет-95	95%
21	Col-100	Планшет-100	100%
22	кол-авто	Таблетка-авто	Равная ширина

пример

В следующем примере представлен макет сетки для размещения вашего контента, как вам нужно в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл layout_grid.html в корневой папке вашего сервера.

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

• Этот код предоставляет различные типы типов сетки для размещения контента в соответствии с потребностями пользователя.

Сохраните приведенный выше HTML-код как файл layout_grid.html в корневой папке вашего сервера.

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

Этот код предоставляет различные типы типов сетки для размещения контента в соответствии с потребностями пользователя.

Framework7 — Оверлеи

Описание

Framework7 предоставляет различные типы оверлеев для плавной работы с приложениями. В следующей таблице перечислены некоторые наложения Framework7 —

S.No	Тип и описание наложения
1	модальный Модальное — это небольшое окно, которое отображает контент из отдельных источников, не покидая родительское окно.
2	Неожиданно возникнуть Всплывающее окно — это всплывающее окно, в котором отображается содержимое, когда пользователь нажимает на элемент.
3	Трещать Для управления представлением временного контента может использоваться компонент popover.
4	Лист действий Лист действий используется, чтобы предоставить пользователю набор возможностей для выполнения данной задачи.
5	Экран входа Оверлейный экран входа в систему используется для отображения формата экрана входа в систему, который можно использовать на странице или во всплывающем окне или в качестве отдельного наложения.
6	Пикер Модал Модал Picker используется для выбора некоторого пользовательского контента, который похож на сборщик каландров.

Модальное — это небольшое окно, которое отображает контент из отдельных источников, не покидая родительское окно.

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

Для управления представлением временного контента может использоваться компонент popover.

Лист действий используется, чтобы предоставить пользователю набор возможностей для выполнения данной задачи.

Оверлейный экран входа в систему используется для отображения формата экрана входа в систему, который можно использовать на странице или во всплывающем окне или в качестве отдельного наложения.

Модал Picker используется для выбора некоторого пользовательского контента, который похож на сборщик каландров.

Framework7 — Preloaders

Описание

Preloader в Framework7 выполнен с масштабируемой векторной графикой (SVG) и анимирован с помощью CSS, что позволяет легко изменять его размеры. Preloader доступен в двух цветах —

• по умолчанию светлый фон
• еще один темный фон

Вы можете использовать класс preloader в своем HTML, как показано ниже —

пример

Следующий пример демонстрирует использование preloader в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл preloader.html в корневой папке вашего сервера.

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

• Этот код отображает индикатор предварительной загрузки, который сделан с помощью SVG и анимирован с помощью CSS.

Сохраните приведенный выше HTML-код как файл preloader.html в корневой папке вашего сервера.

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

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

Framework7 — Progress Bar

Описание

Индикаторы выполнения могут использоваться для отображения загрузки активов или хода выполнения задачи пользователям. Вы можете указать индикатор выполнения с помощью класса progressbar . Когда пользователь не знает, как долго будет длиться процесс загрузки для запроса, вы можете использовать класс progressbar-infinite .

Прогресс-бар JavaScript API

Индикатор выполнения может использоваться вместе с JavaScript API для указания свойств show , hide и progress с помощью следующих методов:

S.No	методы	Описание и параметры
1	myApp.setProgressbar (контейнер, прогресс, скорость)	Он устанавливает индикатор выполнения для выполнения задачи. Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения. Прогресс — представляет в целочисленном формате и определяет ход выполнения задачи. скорость — представляет в целочисленном формате и указывает продолжительность выполнения задачи.
2	myApp.hideProgressbar (содержит er)	Скрывает индикатор выполнения. Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения.
3	myApp.showProgressbar (содержимое, прогресс, цвет)	Он отображает индикатор выполнения. Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения. Прогресс — представляет в целочисленном формате и определяет ход выполнения задачи. скорость — представляет в целочисленном формате и указывает продолжительность выполнения задачи.

Он устанавливает индикатор выполнения для выполнения задачи.

Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения.

Прогресс — представляет в целочисленном формате и определяет ход выполнения задачи.

скорость — представляет в целочисленном формате и указывает продолжительность выполнения задачи.

Скрывает индикатор выполнения.

Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения.

Он отображает индикатор выполнения.

Контейнер — это строка или элемент HTML, который определяет контейнер элемента индикатора выполнения.

Прогресс — представляет в целочисленном формате и определяет ход выполнения задачи.

скорость — представляет в целочисленном формате и указывает продолжительность выполнения задачи.

пример

В следующем примере отображаются анимированные детерминированные и неопределенные индикаторы выполнения для обозначения активности в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл progress_bar.html в корневой папке вашего сервера.

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

• В этом примере отображается индикатор выполнения, который указывает, сколько времени займет операция, чтобы завершить процесс, и отображаются различные типы индикаторов выполнения, указывающие активность.

Сохраните приведенный выше HTML-код как файл progress_bar.html в корневой папке вашего сервера.

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

В этом примере отображается индикатор выполнения, который указывает, сколько времени займет операция, чтобы завершить процесс, и отображаются различные типы индикаторов выполнения, указывающие активность.

Framework7 — представления списка

Описание

Представления списка — это мощные компоненты пользовательского интерфейса, которые представляют данные в виде прокручиваемого списка из нескольких строк. Framework7 предоставляет различные типы представления списка для работы с вашим приложением. В следующей таблице перечислены некоторые представления списка Framework7 —

S.No	Типы и описание
1	Посмотреть список Представления списка — это мощные компоненты пользовательского интерфейса, которые представляют данные в прокручиваемом списке, содержащем несколько строк.
2	Список контактов Список контактов — это вид списка, который можно использовать для отображения списка контактов людей.
3	Просмотр списка СМИ Представление списка мультимедиа используется для отображения сложных структур данных, таких как продукты, услуги, информация о пользователях.
4	Swipeout Размах позволяет выявить скрытые действия меню, проводя по элементам списка.
5	Сортируемый список Сортируемый список — это тип представления списка, который сортирует элементы представления списка.
6	Виртуальный список Виртуальный список тип представления списка, который включает в себя списки большого количества элементов данных без снижения их производительности.

Представления списка — это мощные компоненты пользовательского интерфейса, которые представляют данные в прокручиваемом списке, содержащем несколько строк.

Список контактов — это вид списка, который можно использовать для отображения списка контактов людей.

Представление списка мультимедиа используется для отображения сложных структур данных, таких как продукты, услуги, информация о пользователях.

Размах позволяет выявить скрытые действия меню, проводя по элементам списка.

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

Виртуальный список тип представления списка, который включает в себя списки большого количества элементов данных без снижения их производительности.

Framework7 — Аккордеон

Описание

Гармошка — это графический элемент управления, отображаемый в виде списка предметов. Каждый аккордеон может быть расширен или растянут, чтобы показать содержание, связанное с этим аккордеоном.

Разборный макет

Когда вы используете отдельный отдельный складной элемент, вам нужно пропустить элемент — оболочку accordion-list .

Ниже приводится структура разборного макета —

<!-- 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>

Следующие классы используются для аккордеона в Framework7 —

S.No	Классы и описание
1	аккордеона список Это необязательный класс, который содержит группу элементов списка аккордеона.
2	аккордеона пункт Это обязательный класс для одного предмета аккордеона.
3	аккордеона пункт-переключатель Это обязательный класс, используемый для расширения содержимого аккордеонных предметов.
4	аккордеона пункт-контент Это обязательный класс, используемый для скрытого содержания аккордеонных предметов.
5	аккордеона элемент вспененные Это один расширенный аккордеонный предмет.

аккордеона список

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

аккордеона пункт

Это обязательный класс для одного предмета аккордеона.

аккордеона пункт-переключатель

Это обязательный класс, используемый для расширения содержимого аккордеонных предметов.

аккордеона пункт-контент

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

аккордеона элемент вспененные

Это один расширенный аккордеонный предмет.

Аккордеонный JavaScript API

Методы JavaScript API используются для программного открытия и закрытия аккордеона.

Он содержит следующие методы JavaScript API —

• myApp.accordionOpen (item) — используется для открытия аккордеона.

• myApp.accordionClose (item) — используется для закрытия аккордеона.

• myApp.accordionToggle (item) — используется для переключения аккордеона.

myApp.accordionOpen (item) — используется для открытия аккордеона.

myApp.accordionClose (item) — используется для закрытия аккордеона.

myApp.accordionToggle (item) — используется для переключения аккордеона.

Все методы содержат параметр item, который является HTML или строковым элементом accordion-item.

Аккордеонные События

Аккордеон содержит четыре события, перечисленные в следующей таблице:

S.No	Событие	Цель и описание
1	открыть	Аккордеонный предмет Когда вы открываете анимацию, это событие будет запущено.
2	открытый	Аккордеонный предмет Когда открытие анимации будет завершено, это событие будет запущено.
3	близко	Аккордеонный предмет Когда вы закрываете анимацию, это событие будет запущено.
4	закрыто	Аккордеонный предмет Когда закрытие анимации будет завершено, это событие будет запущено.

Аккордеонный предмет

Когда вы открываете анимацию, это событие будет запущено.

Аккордеонный предмет

Когда открытие анимации будет завершено, это событие будет запущено.

Аккордеонный предмет

Когда вы закрываете анимацию, это событие будет запущено.

Аккордеонный предмет

Когда закрытие анимации будет завершено, это событие будет запущено.

Аккордеонный Список

В представлении списка аккордеонов вы можете использовать элемент item-link вместо аккордеон-переключателя .

<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>

пример

Следующий пример демонстрирует использование аккордеона в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл accordion.html в корневой папке вашего сервера.

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

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

Сохраните приведенный выше HTML-код как файл accordion.html в корневой папке вашего сервера.

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

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

Framework7 — Карты

Описание

Карты содержат организованную информацию, относящуюся к одному предмету, такую ​​как фотография, ссылка и текст. В следующей таблице показаны типы карт Framework7 —

S.No	Типы и описание
1	HTML-макет карты Базовый макет карты использует классы карт для упорядочивания элементов.
2	Просмотр списка с картами Вы можете использовать карты в качестве элементов списка, добавив класс списка карт в <div class = «list-block»> .

Базовый макет карты использует классы карт для упорядочивания элементов.

Вы можете использовать карты в качестве элементов списка, добавив класс списка карт в <div class = «list-block»> .

Framework7 — Чипсы

Описание

Чип — это небольшой блок сущности, который может содержать фотографию, небольшую строку заголовка и краткую информацию.

Микросхемы HTML Layout

Следующий код показывает базовый макет HTML-чипа, используемый в 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>

Приведенный выше макет HTML содержит много классов, перечисленных ниже.

• чипсы — это контейнер для чипов.

• chip-media — это элемент медиа-чипа, который может содержать изображения, аватар или значок. Это необязательно.

• карточка-этикетка — это чип-текстовая метка.

• удаление карты — это необязательная ссылка на значок удаления чипа.

чипсы — это контейнер для чипов.

chip-media — это элемент медиа-чипа, который может содержать изображения, аватар или значок. Это необязательно.

карточка-этикетка — это чип-текстовая метка.

удаление карты — это необязательная ссылка на значок удаления чипа.

пример

В следующем примере представлены объекты, такие как альбомы, элементы карточек и т. Д., А также фотография и краткая информация.

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла cards_html_layout.html в корневой папке вашего сервера.

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

• Пример представляет сложные объекты в небольших блоках, таких как альбомы, элементы карточек, размещенное изображение, которое содержит фотографию, строку заголовка и краткую информацию.

Сохраните приведенный выше HTML-код в виде файла cards_html_layout.html в корневой папке вашего сервера.

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

Пример представляет сложные объекты в небольших блоках, таких как альбомы, элементы карточек, размещенное изображение, которое содержит фотографию, строку заголовка и краткую информацию.

Framework7 — кнопки

Описание

Framework7 предоставляет группу готовых к использованию кнопок, просто добавляя соответствующие классы в ссылки или кнопки ввода.

S.No	Типы и описание
1	iOS Тематические Кнопки Framework7 предоставляет множество кнопок тем iOS, которые можно использовать, применяя соответствующие классы.
2	Материал Тематические кнопки Тема материала предоставляет множество кнопок для использования в вашем приложении с помощью соответствующих классов.

Framework7 предоставляет множество кнопок тем iOS, которые можно использовать, применяя соответствующие классы.

Тема материала предоставляет множество кнопок для использования в вашем приложении с помощью соответствующих классов.

Framework7 — кнопка действия

Описание

Framework7 предоставляет плавающую кнопку действия для продвигаемого действия. Они отображаются в виде плавающего кружка над пользовательским интерфейсом. У него есть движения, которые содержат морфинг , запуск и перенос точки привязки .

Кнопка с плавающим действием поддерживается только в теме материала.

Кнопка с плавающим действием поддерживается только в теме материала.

В следующей таблице перечислены типы кнопок действий, используемые в Framework7 —

S.No	Типы и описание
1	Расположение кнопок с плавающим действием Это очень просто; вам просто нужно разместить его как дочерний элемент страницы или представления .
2	Morph To Popover Если вы хотите открыть поповер при нажатии кнопки с плавающим действием, тогда вы можете использовать класс с плавающей кнопкой-к-поповеру .
3	Быстрый набор Вы можете вызвать связанные действия после нажатия кнопки с плавающим действием с помощью быстрого набора .

Это очень просто; вам просто нужно разместить его как дочерний элемент страницы или представления .

Если вы хотите открыть поповер при нажатии кнопки с плавающим действием, тогда вы можете использовать класс с плавающей кнопкой-к-поповеру .

Вы можете вызвать связанные действия после нажатия кнопки с плавающим действием с помощью быстрого набора .

Framework7 — формы

Описание

Формы используются для взаимодействия с пользователями и сбора данных от веб-пользователей с использованием текстовых полей, флажков, переключателей и т. Д.

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

S.No	Тип и описание наложения
1	Элементы формы Элементы формы используются для создания привлекательных макетов форм.
2	Флажки и радио Расширение представления списка позволяет создавать флажки и радиовходы в Framework7.
3	Smart Select Интеллектуальный выбор — это простой способ изменения формы выбора на динамические страницы с помощью групп флажков и радиовходов.
4	Отключенные элементы Элементы можно отключить, применив отключенный класс к элементу или добавив отключенные атрибуты для элемента формы.
5	Данные формы В Framework7 очень мало полезных методов, что облегчает работу с формами.
6	Форма хранения С помощью хранилища форм легко сохранять и анализировать данные форм на страницах, загруженных Ajax.
7	Ajax Form Отправить Framework7 позволяет автоматически отправлять данные с помощью Ajax.

Элементы формы используются для создания привлекательных макетов форм.

Расширение представления списка позволяет создавать флажки и радиовходы в Framework7.

Интеллектуальный выбор — это простой способ изменения формы выбора на динамические страницы с помощью групп флажков и радиовходов.

Элементы можно отключить, применив отключенный класс к элементу или добавив отключенные атрибуты для элемента формы.

В Framework7 очень мало полезных методов, что облегчает работу с формами.

С помощью хранилища форм легко сохранять и анализировать данные форм на страницах, загруженных Ajax.

Framework7 позволяет автоматически отправлять данные с помощью Ajax.

Framework7 — вкладки

Описание

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

Расположение вкладок

Следующий код определяет макет для вкладок —

<!-- 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>

Где —

• <div class = «tabs»> — Обязательная оболочка для всех вкладок. Если мы пропустим это, вкладки не будут работать вообще.

• <div class = «tab»> — это отдельная вкладка, которая должна иметь уникальный атрибут id .

• <div class = «tab active»> — это одна активная вкладка, которая использует дополнительный активный класс, чтобы сделать вкладку видимой (активной).

<div class = «tabs»> — Обязательная оболочка для всех вкладок. Если мы пропустим это, вкладки не будут работать вообще.

<div class = «tab»> — это отдельная вкладка, которая должна иметь уникальный атрибут id .

<div class = «tab active»> — это одна активная вкладка, которая использует дополнительный активный класс, чтобы сделать вкладку видимой (активной).

Переключение между вкладками

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

Для этого вам нужно создать ссылки (теги <a>) с классом tab-link и атрибутом href, равным атрибуту id целевой вкладки —

<!-- 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>

Переключить несколько вкладок

Если вы используете ссылку на одну вкладку для переключения между несколькими вкладками, то вы можете использовать классы вместо идентификаторов и атрибута вкладки данных .

<!-- 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>

Атрибут data-tab tab-link содержит CSS-селектор целевой вкладки / tabs.

Мы можем использовать разные способы вкладок, они указаны в следующей таблице:

S.No	Типы вкладок и описание
1	Встроенные вкладки Встроенные вкладки — это наборы, встроенные в ряд, которые позволяют быстро переключаться между ними.
2	Переключить вкладки с Navbar Мы можем разместить вкладки в панели навигации, которые позволяют переключаться между ними.
3	Переключить виды из панели вкладок Одна вкладка может использоваться для переключения между представлениями с собственной навигацией и макетом.
4	Анимированные вкладки Вы можете использовать простой переход (анимация) для переключения вкладок.
5	Перелистывающиеся вкладки Вы можете создавать пролистываемые вкладки с простым переходом, используя класс tabs-swipeable-wrap для вкладок.
6	Вкладки JavaScript События События JavaScript можно использовать, когда вы работаете с кодом JavaScript для вкладок.
7	Показать вкладку с помощью JavaScript Вы можете переключить или показать вкладку, используя методы JavaScript.

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

Мы можем разместить вкладки в панели навигации, которые позволяют переключаться между ними.

Одна вкладка может использоваться для переключения между представлениями с собственной навигацией и макетом.

Вы можете использовать простой переход (анимация) для переключения вкладок.

Вы можете создавать пролистываемые вкладки с простым переходом, используя класс tabs-swipeable-wrap для вкладок.

События JavaScript можно использовать, когда вы работаете с кодом JavaScript для вкладок.

Вы можете переключить или показать вкладку, используя методы JavaScript.

Framework7 — Swiper Slider

Описание

Слайдер Swiper является самым мощным и современным сенсорным слайдером и входит в Framework7 с множеством функций.

Следующий макет HTML показывает слайдер Swiper —

<!-- 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>

Следующие классы используются для слайдер Swiper —

• swiper-container — обязательный элемент для контейнера основного слайдера, используемый для слайдов и нумерации страниц.

• Swiper-wrapper — обязательный элемент для дополнительных слайдов.

• swiper-slide — это отдельный элемент слайда, который может содержать любой HTML- код внутри.

• swiper-pagination — необязателен для маркеров нумерации страниц, которые создаются автоматически.

swiper-container — обязательный элемент для контейнера основного слайдера, используемый для слайдов и нумерации страниц.

Swiper-wrapper — обязательный элемент для дополнительных слайдов.

swiper-slide — это отдельный элемент слайда, который может содержать любой HTML- код внутри.

swiper-pagination — необязателен для маркеров нумерации страниц, которые создаются автоматически.

Вы можете инициализировать swiper с помощью JavaScript, используя связанные с ним методы —

myApp.swiper(swiperContainer,parameters)

ИЛИ ЖЕ

new Swiper(swiperContainer, parameters)

Оба метода используются для инициализации ползунка с опциями.

Приведенные выше методы содержат следующие параметры —

• swiperContainer — это HTMLElement или строка контейнера swiper, и он необходим.

• параметры — это необязательные элементы, содержащие объект с параметрами swiper.

swiperContainer — это HTMLElement или строка контейнера swiper, и он необходим.

параметры — это необязательные элементы, содержащие объект с параметрами swiper.

Например —

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Можно получить доступ к экземпляру swiper, и свойство swiper контейнера слайдера имеет следующий HTML-элемент —

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Вы можете увидеть различные способы и типы swiper в следующей таблице —

S.No	Типы и описание Swiper
1	Стандартный Swiper с нумерацией страниц Это современный сенсорный слайдер, и по умолчанию он перемещается горизонтально.
2	Вертикальный Swiper Этот также работает как swiper по умолчанию, но он проводит по вертикали.
3	С пространством между слайдами Этот swiper используется, чтобы дать пространство между двумя слайдами.
4	Несколько Swipers Этот swiper использует более одного swiper на одной странице.
5	Вложенные Swipers Это сочетание вертикальных и горизонтальных горок.
6	Пользовательские элементы управления Он используется для пользовательских элементов управления, чтобы выбрать или провести любой слайд.
7	Ленивая Загрузка Он может быть использован для мультимедийного файла, который требует времени для загрузки.

Это современный сенсорный слайдер, и по умолчанию он перемещается горизонтально.

Этот также работает как swiper по умолчанию, но он проводит по вертикали.

Этот swiper используется, чтобы дать пространство между двумя слайдами.

Этот swiper использует более одного swiper на одной странице.

Это сочетание вертикальных и горизонтальных горок.

Он используется для пользовательских элементов управления, чтобы выбрать или провести любой слайд.

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

Framework7 — браузер фотографий

Описание

Браузер фотографий аналогичен компоненту фотоальбома iOS для отображения группы изображений, которые можно увеличивать и панорамировать. Для перемещения между изображениями в браузере фотографий используется Swiper Slider .

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

S.No	Типы и описание браузера фотографий
1	Создать экземпляр браузера фотографий Фото браузер может быть создан и инициализирован только с использованием JavaScript.
2	Параметры браузера фотографий Framework7 предоставляет список параметров, которые используются с браузером фотографий.
3	Методы и свойства браузера фотографий Вы получите инициализированную переменную экземпляра для использования методов и свойств браузера фотографий после инициализации браузера фотографий.
4	Фотографии Array При инициализации браузера фотографий необходимо передать массив с фотографиями / видео в параметре photos .
5	Шаблоны браузера фотографий Framework7 предоставляет вам множество шаблонов браузера фотографий, которые вы можете передать при инициализации браузера фотографий.

Фото браузер может быть создан и инициализирован только с использованием JavaScript.

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

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

При инициализации браузера фотографий необходимо передать массив с фотографиями / видео в параметре photos .

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

Framework7 — автозаполнение

Описание

Автозаполнение — это удобный для мобильных устройств и оптимизированный для сенсорных устройств компонент Framework7, который может быть как раскрывающимся, так и автономным. Вы можете создать и инициализировать экземпляр автозаполнения, используя метод JavaScript —

myApp.autocomplete(parameters)

Где параметры — обязательные объекты, используемые для инициализации экземпляра автозаполнения.

Параметры автозаполнения

В следующей таблице перечислены доступные параметры автозаполнения в Framework7 —

S.No	Параметры и описание	Тип	По умолчанию
1	открыть в Он определяет, как открыть автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.	строка	страница
2	источник Он использует автозаполнение экземпляра, поисковый запрос и функцию рендеринга для передачи сопоставленных элементов с массивом.	функция (автозаполнение, запрос, рендер)	—
3	valueProperty Указывает значение элемента ключа объекта соответствующего элемента.	строка	Я бы
4	предел Он отображает ограниченное количество элементов в автозаполнении на запрос.	число	—
5	прелоадер Preloader можно использовать для указания макета автозаполнения, установив его в true.	логический	ложный
6	preloaderColor Это определяет цвет preloader. По умолчанию цвет «черный».	строка	—
7	значение Определяет массив с выбранными значениями по умолчанию.	массив	—
8	TextProperty Он указывает значение элемента ключа объекта сопоставленного элемента, которое можно использовать в качестве заголовка отображаемых параметров.	строка	текст

открыть в

Он определяет, как открыть автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.

источник

Он использует автозаполнение экземпляра, поисковый запрос и функцию рендеринга для передачи сопоставленных элементов с массивом.

valueProperty

Указывает значение элемента ключа объекта соответствующего элемента.

предел

Он отображает ограниченное количество элементов в автозаполнении на запрос.

прелоадер

Preloader можно использовать для указания макета автозаполнения, установив его в true.

preloaderColor

Это определяет цвет preloader. По умолчанию цвет «черный».

значение

Определяет массив с выбранными значениями по умолчанию.

TextProperty

Он указывает значение элемента ключа объекта сопоставленного элемента, которое можно использовать в качестве заголовка отображаемых параметров.

Автономные параметры автозаполнения

В следующей таблице перечислены доступные параметры Автономного автозаполнения в Framework7 —

S.No	Параметры и описание	Тип	По умолчанию
1	открывашка Это параметр строки или элемента HTML, который откроет отдельную страницу автозаполнения.	строка или HTMLElement	—
2	popupCloseText Он используется для закрытия всплывающего окна автозаполнения.	строка	‘Близко’
3	backText Он предоставляет обратную ссылку, когда автозаполнение открывается как страница.	строка	«Назад»
4	Заголовок страницы Указывает заголовок страницы автозаполнения.	строка	—
5	searchbarPlaceholderText Указывает текст заполнителя панели поиска.	строка	‘Поиск’
6	searchbarCancelText Он определяет строку поиска кнопки отмены текста.	строка	‘отменить’
7	notFoundText Он отображает текст, когда не найдено соответствующего элемента.	строка	‘Ничего не найдено’
8	множественный Это позволяет выбрать множественный выбор, установив его в true.	логический	ложный
9	navbarTheme Он определяет цветовую тему для navbar.	строка	—
10	backOnSelect Когда пользователь выберет значение, автозаполнение будет закрыто, установив для него значение true.	логический	ложный
11	formTheme Он определяет цветовую тему для формы.	строка	—

открывашка

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

popupCloseText

Он используется для закрытия всплывающего окна автозаполнения.

backText

Он предоставляет обратную ссылку, когда автозаполнение открывается как страница.

Заголовок страницы

Указывает заголовок страницы автозаполнения.

searchbarPlaceholderText

Указывает текст заполнителя панели поиска.

searchbarCancelText

Он определяет строку поиска кнопки отмены текста.

notFoundText

Он отображает текст, когда не найдено соответствующего элемента.

множественный

Это позволяет выбрать множественный выбор, установив его в true.

navbarTheme

Он определяет цветовую тему для navbar.

backOnSelect

Когда пользователь выберет значение, автозаполнение будет закрыто, установив для него значение true.

formTheme

Он определяет цветовую тему для формы.

Параметры автозаполнения выпадающего списка

В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —

S.No	Параметры и описание	Тип	По умолчанию
1	вход Это строка или элемент HTML, используемый для ввода текста.	строка или HTMLElement	—
2	dropdownPlaceholderText Определяет раскрывающийся текст заполнителя.	строка	—
3	updateInputValueOnSelect Вы можете обновить входное значение на select, установив его в true.	логический	правда
4	expandInput Вы можете расширить ввод текста в представлении списка, чтобы сделать его полноэкранным во время раскрывающегося списка, установив для элемента input значение true.	логический	ложный

вход

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

dropdownPlaceholderText

Определяет раскрывающийся текст заполнителя.

updateInputValueOnSelect

Вы можете обновить входное значение на select, установив его в true.

expandInput

Вы можете расширить ввод текста в представлении списка, чтобы сделать его полноэкранным во время раскрывающегося списка, установив для элемента input значение true.

Функции автозаполнения обратных вызовов

В приведенной ниже таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —

S.No	Параметры и описание	Тип	По умолчанию
1	по изменению Всякий раз, когда значение автозаполнения изменяется, эта функция обратного вызова будет выполняться.	функция (автозаполнение, значение)	—
2	OnOpen Всякий раз, когда автозаполнение открывается, эта функция обратного вызова будет выполняться.	функция (автозаполнение)	—
3	OnClose Всякий раз, когда автозаполнение закрыто, эта функция обратного вызова будет выполняться.	функция (автозаполнение)	—

по изменению

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

OnOpen

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

OnClose

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

Автозаполнение шаблонов

В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —

S.No	Параметры и описание	Тип	По умолчанию
1	navbarTemplate Это автономный шаблон автозаполнения навигационной панели.	строка	—
2	ItemTemplate Это отдельный элемент формы template7.	строка	—
3	dropdownTemplate Это шаблон drop7 шаблона.	строка	—
4	dropdownItemTemplate Это элемент раскрывающегося списка template7.	строка	—
5	dropdownPlaceholderTemplate Это заполнитель раскрывающегося меню template7.	строка	—

navbarTemplate

Это автономный шаблон автозаполнения навигационной панели.

ItemTemplate

Это отдельный элемент формы template7.

dropdownTemplate

Это шаблон drop7 шаблона.

dropdownItemTemplate

Это элемент раскрывающегося списка template7.

dropdownPlaceholderTemplate

Это заполнитель раскрывающегося меню template7.

Шаблоны по умолчанию

Ниже приведены фрагменты кода шаблона по умолчанию для указанных выше параметров шаблонов.

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>

Методы автозаполнения

В следующей таблице указаны методы автозаполнения, доступные в Framework7.

S.No	Методы и описание
1	myAutocomplete.params Определяет параметры инициализации, которые передаются вместе с объектом.
2	myAutocomplete.value Он определяет массив с выбранными значениями.
3	myAutocomplete.opened Он открывает автозаполнение, если установлено значение true.
4	myAutocomplete.dropdown Он указывает экземпляр раскрывающегося списка автозаполнения.
5	myAutocomplete.popup Он указывает экземпляр всплывающего окна автозаполнения.
6	myAutocomplete.page Он указывает экземпляр страницы автозаполнения.
7	myAutocomplete.pageData Он определяет автозаполнение данных страницы.
8	myAutocomplete.searchbar Он определяет экземпляр панели автозаполнения.

myAutocomplete.params

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

myAutocomplete.value

Он определяет массив с выбранными значениями.

myAutocomplete.opened

Он открывает автозаполнение, если установлено значение true.

myAutocomplete.dropdown

Он указывает экземпляр раскрывающегося списка автозаполнения.

myAutocomplete.popup

Он указывает экземпляр всплывающего окна автозаполнения.

myAutocomplete.page

Он указывает экземпляр страницы автозаполнения.

myAutocomplete.pageData

Он определяет автозаполнение данных страницы.

myAutocomplete.searchbar

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

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

В следующей таблице указаны методы автозаполнения, доступные в Framework7.

S.No	Свойства и описание
1	myAutocomplete.open () Он открывает автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.
2	myAutocomplete.close () Закрывает автозаполнение.
3	myAutocomplete.showPreloader () Показывает предварительный загрузчик автозаполнения.
4	myAutocomplete.hidePreloader () Он скрывает автозаполненный предварительный загрузчик.
5	myAutocomplete.destroy () Это разрушает экземпляр автозаполнения preloader и удаляет все события.

myAutocomplete.open ()

Он открывает автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.

myAutocomplete.close ()

Закрывает автозаполнение.

myAutocomplete.showPreloader ()

Показывает предварительный загрузчик автозаполнения.

myAutocomplete.hidePreloader ()

Он скрывает автозаполненный предварительный загрузчик.

myAutocomplete.destroy ()

Это разрушает экземпляр автозаполнения preloader и удаляет все события.

пример

В следующем примере демонстрируется использование параметров автозаполнения, скрывающихся в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла autocomplete.html в корневой папке вашего сервера.

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

• Пример обеспечивает автозаполнение значений в простом раскрывающемся списке, раскрывающемся списке со всеми значениями, раскрывающемся списке с заполнителем, автономном автозаполнении и т. Д.

Сохраните приведенный выше HTML-код в виде файла autocomplete.html в корневой папке вашего сервера.

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

Пример обеспечивает автозаполнение значений в простом раскрывающемся списке, раскрывающемся списке со всеми значениями, раскрывающемся списке с заполнителем, автономном автозаполнении и т. Д.

Framework7 — Picker

Описание

Средство выбора выглядит как собственный инструмент выбора iOS, и это мощный компонент, который позволяет выбирать любые значения из списка, а также используется для создания пользовательских средств выбора наложений. Вы можете использовать Picker как встроенный компонент или как оверлей. Средство выбора наложений будет автоматически преобразовано в Popover на планшетах (iPad).

Используя следующий метод приложения, вы можете создать и инициализировать метод JavaScript —

myApp.picker(parameters)

Где параметры являются обязательными объектами, используются для инициализации экземпляра средства выбора, и это обязательный метод.

Параметры выбора

В следующей таблице указаны доступные параметры в средствах выбора.

S.No	Параметры и описание	Тип	По умолчанию
1	контейнер Строка с селектором CSS или HTMLElement, используемая для генерации HTML-кода для встроенных средств выбора.	строка или HTMLElement	—
2	вход Связанный элемент ввода помещается со строкой с помощью селектора CSS или HTMLElement.	строка или HTMLElement	—
3	scrollToInput Он используется для прокрутки области просмотра (содержимого страницы) ввода всякий раз, когда открывается окно выбора.	логический	правда
4	inputReadOnly Используется для установки атрибута «только для чтения» на указанном входе.	логический	правда
5	convertToPopover Он используется для преобразования модальности выбора в Popover на больших экранах, таких как iPad.	логический	правда
6	onlyOnPopover Вы можете открыть средство выбора в Popover, включив его.	логический	правда
7	CssClass Чтобы выбрать модал, вы можете использовать дополнительное имя класса CSS.	строка	—
8	closeByOutsideClick Вы можете закрыть средство выбора, щелкнув за пределами средства выбора или элемента ввода, включив метод.	логический	ложный
9	панель инструментов Используется для включения модальной панели инструментов выбора.	логический	правда
10	toolbarCloseText Используется для кнопки Готово / Закрыть на панели инструментов.	строка	‘Готово’
11	toolbarTemplate Это шаблон HTML панели инструментов, по умолчанию это строка HTML со следующим шаблоном — <div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>	строка	—

контейнер

Строка с селектором CSS или HTMLElement, используемая для генерации HTML-кода для встроенных средств выбора.

вход

Связанный элемент ввода помещается со строкой с помощью селектора CSS или HTMLElement.

scrollToInput

Он используется для прокрутки области просмотра (содержимого страницы) ввода всякий раз, когда открывается окно выбора.

inputReadOnly

Используется для установки атрибута «только для чтения» на указанном входе.

convertToPopover

Он используется для преобразования модальности выбора в Popover на больших экранах, таких как iPad.

onlyOnPopover

Вы можете открыть средство выбора в Popover, включив его.

CssClass

Чтобы выбрать модал, вы можете использовать дополнительное имя класса CSS.

closeByOutsideClick

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

панель инструментов

Используется для включения модальной панели инструментов выбора.

toolbarCloseText

Используется для кнопки Готово / Закрыть на панели инструментов.

toolbarTemplate

Это шаблон HTML панели инструментов, по умолчанию это строка HTML со следующим шаблоном —

Конкретные параметры выбора

В следующей таблице перечислены доступные конкретные параметры выбора —

S.No	Параметры и описание	Тип	По умолчанию
1	rotateEffect Это позволяет 3D эффект поворота в пике.	логический	ложный
2	momentumRatio Когда вы отпускаете сборщик после быстрого касания и перемещения, он дает больше импульса.	число	7
3	updateValuesOnMomentum Используется для обновления сборщиков и ввода значений во время импульса.	логический	ложный
4	updateValuesOnTouchmove Используется для обновления сборщиков и ввода значений во время сенсорного перемещения.	логический	правда
5	значение Массив имеет свои начальные значения, а также каждый элемент массива представляет значение соответствующего столбца.	массив	—
6	formatValue Функция используется для форматирования входного значения и должна возвращать новое / форматированное строковое значение. Значения и displayValues являются массивом связанных столбцов.	функция (p, значения, displayValues)	—
7	смещ_по_столбцам Каждый элемент массива представляет объект с параметрами столбца.	массив	—

rotateEffect

Это позволяет 3D эффект поворота в пике.

momentumRatio

Когда вы отпускаете сборщик после быстрого касания и перемещения, он дает больше импульса.

updateValuesOnMomentum

Используется для обновления сборщиков и ввода значений во время импульса.

updateValuesOnTouchmove

Используется для обновления сборщиков и ввода значений во время сенсорного перемещения.

значение

Массив имеет свои начальные значения, а также каждый элемент массива представляет значение соответствующего столбца.

formatValue

Функция используется для форматирования входного значения и должна возвращать новое / форматированное строковое значение. Значения и displayValues являются массивом связанных столбцов.

смещ_по_столбцам

Каждый элемент массива представляет объект с параметрами столбца.

Обратные вызовы параметров выбора

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

S.No	Обратные звонки и описание	Тип	По умолчанию
1	по изменению Функция обратного вызова будет выполняться всякий раз, когда изменяется значение средства выбора, а значения и displayValues являются массивами соответствующего столбца.	функция (p, значения, displayValues)	—
2	OnOpen Функция обратного вызова будет выполняться всякий раз, когда открывается окно выбора.	функция (р)	—
3	OnClose Функция обратного вызова будет выполняться всякий раз, когда сборщик закрыт.	функция (р)	—

по изменению

Функция обратного вызова будет выполняться всякий раз, когда изменяется значение средства выбора, а значения и displayValues являются массивами соответствующего столбца.

OnOpen

Функция обратного вызова будет выполняться всякий раз, когда открывается окно выбора.

OnClose

Функция обратного вызова будет выполняться всякий раз, когда сборщик закрыт.

Параметры столбца

В момент настройки Picker нам нужно передать параметр cols . Он представлен в виде массива, где каждый элемент является объектом с параметрами столбца —

S.No	Параметры и описание	Тип	По умолчанию
1	ценности Вы можете указать значения строковых столбцов с помощью массива.	массив	—
2	displayValues Он имеет массив со значениями строковых столбцов и будет отображать значение из параметра values , если он не указан.	массив	—
3	CssClass Имя класса CSS, используемое для установки в столбце HTML-контейнера.	строка	—
4	TextAlign Он используется для установки выравнивания текста значений столбцов и может быть «левым», «центральным» или «правым» .	строка	—
5	ширина Ширина рассчитывается автоматически, по умолчанию. Если вам нужно исправить ширину столбцов в средстве выбора с зависимыми столбцами, которые должны быть в пикселях .	число	—
6	делитель Используется для столбца, который должен быть визуальным разделителем, не имеет значений.	логический	ложный
7	содержание Используется для указания разделителя-столбца (divider: true) с содержимым столбца.	строка	—

ценности

Вы можете указать значения строковых столбцов с помощью массива.

displayValues

Он имеет массив со значениями строковых столбцов и будет отображать значение из параметра values , если он не указан.

CssClass

Имя класса CSS, используемое для установки в столбце HTML-контейнера.

TextAlign

Он используется для установки выравнивания текста значений столбцов и может быть «левым», «центральным» или «правым» .

ширина

Ширина рассчитывается автоматически, по умолчанию. Если вам нужно исправить ширину столбцов в средстве выбора с зависимыми столбцами, которые должны быть в пикселях .

делитель

Используется для столбца, который должен быть визуальным разделителем, не имеет значений.

содержание

Используется для указания разделителя-столбца (divider: true) с содержимым столбца.

Параметр обратного вызова столбца

S.No	Обратные звонки и описание	Тип	По умолчанию
1	по изменению Всякий раз, когда значение столбца изменится в это время, будет выполняться функция обратного вызова. Значение и displayValue представляют текущее значение столбца и displayValue .	функция (p, значение, displayValue)	—

по изменению

Всякий раз, когда значение столбца изменится в это время, будет выполняться функция обратного вызова. Значение и displayValue представляют текущее значение столбца и displayValue .

Picker Properties

Переменная Picker имеет много свойств, которые приведены в следующей таблице:

S.No	Свойства и описание
1	myPicker.params Вы можете инициализировать передаваемые параметры с помощью объекта.
2	myPicker.value Выбранное значение для каждого столбца представлено массивом элемента.
3	myPicker.displayValue Выбранное отображаемое значение для каждого столбца представляется массивом элементов.
4	myPicker.opened Когда сборщик открыт, он устанавливает истинное значение.
5	myPicker.inline Когда сборщик встроен, он устанавливает истинное значение.
6	myPicker.cols Столбцы выбора имеют свои собственные методы и свойства.
7	myPicker.container Экземпляр Dom7 используется для контейнера HTML.

myPicker.params

Вы можете инициализировать передаваемые параметры с помощью объекта.

myPicker.value

Выбранное значение для каждого столбца представлено массивом элемента.

myPicker.displayValue

Выбранное отображаемое значение для каждого столбца представляется массивом элементов.

myPicker.opened

Когда сборщик открыт, он устанавливает истинное значение.

myPicker.inline

Когда сборщик встроен, он устанавливает истинное значение.

myPicker.cols

Столбцы выбора имеют свои собственные методы и свойства.

myPicker.container

Экземпляр Dom7 используется для контейнера HTML.

Методы выбора

Переменная выбора имеет полезные методы, которые приведены в следующей таблице:

S.No	Методы и описание
1	myPicker.setValue (значения, продолжительность) Используйте для установки нового значения выбора. Значения находятся в массиве, где каждый элемент представляет значение для каждого столбца. длительность — это длительность перехода в мс.
2	myPicker.open () Используйте, чтобы открыть Picker.
3	myPicker.close () Используйте, чтобы закрыть Picker.
4	myPicker.destroy () Используйте, чтобы уничтожить экземпляр Picker и удалить все события.

myPicker.setValue (значения, продолжительность)

Используйте для установки нового значения выбора. Значения находятся в массиве, где каждый элемент представляет значение для каждого столбца. длительность — это длительность перехода в мс.

myPicker.open ()

Используйте, чтобы открыть Picker.

myPicker.close ()

Используйте, чтобы закрыть Picker.

myPicker.destroy ()

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

Свойства столбца

Каждый столбец в массиве myPicker.cols также имеет свои полезные свойства, которые приведены в следующей таблице:

//Get first column
var col = myPicker.cols[0];

S.No	Свойства и описание
1	col.container Вы можете создать экземпляр с колонкой HTML контейнера.
2	col.items Вы можете создать экземпляр с элементами колонки HTML-элементами.
3	col.value Используется для выбора текущего значения столбца.
4	col.displayValue Используется для выбора текущего значения столбца дисплея.
5	col.activeIndex Дайте текущий номер индекса, который выбран / активный элемент.

col.container

Вы можете создать экземпляр с колонкой HTML контейнера.

col.items

Вы можете создать экземпляр с элементами колонки HTML-элементами.

col.value

Используется для выбора текущего значения столбца.

col.displayValue

Используется для выбора текущего значения столбца дисплея.

col.activeIndex

Дайте текущий номер индекса, который выбран / активный элемент.

Методы столбца

Полезные методы столбца приведены в следующей таблице —

S.No	Методы и описание
1	col.setValue (значение, продолжительность) Используется для установки нового значения для текущего столбца. Значение должно быть новым значением, а длительность — это длительность перехода, указанная в мс.
2	col.replaceValues ​​(значения, displayValues) Используется для замены значений столбца и displayValues ​​новыми.

col.setValue (значение, продолжительность)

Используется для установки нового значения для текущего столбца. Значение должно быть новым значением, а длительность — это длительность перехода, указанная в мс.

col.replaceValues ​​(значения, displayValues)

Используется для замены значений столбца и displayValues ​​новыми.

Он используется для доступа к экземпляру Picker из его HTML-контейнера всякий раз, когда вы инициализируете Picker как встроенный Picker.

var myPicker = $$('.picker-inline')[0].f7Picker;

Существуют различные типы сборщиков, как указано в следующей таблице:

S.No	Типы вкладок и описание
1	Средство выбора с одним значением Это мощный компонент, который позволяет выбирать любые значения из списка.
2	Два значения и эффект 3D-поворота В палитре вы можете использовать для 3D поворота эффект.
3	Зависимые ценности Значения зависят друг от друга для указанного элемента.
4	Пользовательская панель инструментов Вы можете использовать один или несколько сборщиков на одной странице для настройки.
5	Inline Picker / Date-time Вы можете выбрать количество значений во встроенном средстве выбора. Как дата имеет дату, месяц, год, так и время имеет часы, минуты, секунды.

Это мощный компонент, который позволяет выбирать любые значения из списка.

В палитре вы можете использовать для 3D поворота эффект.

Значения зависят друг от друга для указанного элемента.

Вы можете использовать один или несколько сборщиков на одной странице для настройки.

Вы можете выбрать количество значений во встроенном средстве выбора. Как дата имеет дату, месяц, год, так и время имеет часы, минуты, секунды.

Framework7 — Календарь

Описание

Компонент Calendar позволяет легко обрабатывать даты и может использоваться как встроенный или как наложенный компонент. Наложение календаря будет автоматически преобразовано в всплывающее окно на планшетах.

Календарь может быть создан и инициализирован только с помощью JavaScript. Вам нужно использовать метод соответствующего приложения, как показано ниже —

• myApp.calendar (параметры) — этот метод возвращает инициализированный экземпляр календаря. Он принимает объект в качестве параметров.

myApp.calendar (параметры) — этот метод возвращает инициализированный экземпляр календаря. Он принимает объект в качестве параметров.

В следующей таблице показано использование календаря в Framework7 —

S.No	Использование и описание календаря
1	Параметры календаря Framework7 предоставляет список параметров, которые используются с календарем.
2	Методы и свойства календаря Вы получите инициализированную переменную экземпляра для использования методов и свойств календаря после инициализации календаря.
3	Доступ к экземпляру календаря Доступ к экземпляру календаря можно получить из его контейнера HTML, если вы инициализируете календарь как встроенный.

Framework7 предоставляет список параметров, которые используются с календарем.

Вы получите инициализированную переменную экземпляра для использования методов и свойств календаря после инициализации календаря.

Доступ к экземпляру календаря можно получить из его контейнера HTML, если вы инициализируете календарь как встроенный.

Framework7 — Обновить

Описание

Это специальный компонент, используемый для обновления (перезагрузки) содержимого страницы путем ее извлечения.

Следующий код показывает, как обновить содержимое страницы —

<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>

Следующие классы используются в обновлении —

• page-content — имеет дополнительный класс pull-to-refresh-content и требуется для включения pull-to-refresh.

• pull-to-refresh-layer — это скрытый слой, который используется для обновления, чтобы обновить визуальный элемент, и это просто предварительный загрузчик и стрелка.

• data-ptr-distance = «55» — это дополнительный атрибут, который позволяет вам установить произвольное расстояние запуска «pull to refresh», и его значение по умолчанию равно 44px.

page-content — имеет дополнительный класс pull-to-refresh-content и требуется для включения pull-to-refresh.

pull-to-refresh-layer — это скрытый слой, который используется для обновления, чтобы обновить визуальный элемент, и это просто предварительный загрузчик и стрелка.

data-ptr-distance = «55» — это дополнительный атрибут, который позволяет вам установить произвольное расстояние запуска «pull to refresh», и его значение по умолчанию равно 44px.

Потяните, чтобы обновить события

В «Pull to Refresh» есть некоторые события JavaScript, которые приведены в следующей таблице:

S.No	Описание события	цель
1	pullstart Он будет срабатывать всякий раз, когда вы начинаете тянуть, чтобы обновить контент.	Потяните, чтобы обновить содержимое. <div class = "pull-to-refresh-content">
2	pullmove Это срабатывает, когда вы тянете, чтобы обновить содержимое.	Потяните, чтобы обновить содержимое. <div class="pull-to-refresh-content">
3	pullend Он будет срабатывать всякий раз, когда вы отпускаете команду pull для обновления содержимого.	Потяните, чтобы обновить содержимое. <div class="pull-to-refresh-content">
4	обновление Это событие будет запущено, когда запрос на обновление входит в состояние «обновление» .	Потяните, чтобы обновить содержимое. <div class="pull-to-refresh-content">
5	refreshdone Он будет запущен после обновления и вернется в исходное состояние. Это будет сделано после вызова метода pullToRefreshDone .	Потяните, чтобы обновить содержимое. <div class="pull-to-refresh-content">

pullstart

Он будет срабатывать всякий раз, когда вы начинаете тянуть, чтобы обновить контент.

Потяните, чтобы обновить содержимое.

pullmove

Это срабатывает, когда вы тянете, чтобы обновить содержимое.

Потяните, чтобы обновить содержимое.

pullend

Он будет срабатывать всякий раз, когда вы отпускаете команду pull для обновления содержимого.

Потяните, чтобы обновить содержимое.

обновление

Это событие будет запущено, когда запрос на обновление входит в состояние «обновление» .

Потяните, чтобы обновить содержимое.

refreshdone

Он будет запущен после обновления и вернется в исходное состояние. Это будет сделано после вызова метода pullToRefreshDone .

Потяните, чтобы обновить содержимое.

Существуют методы приложения, которые можно использовать с Pull для обновления.

S.No	Методы и описание приложения
1	myApp.pullToRefreshDone (ptrContent) Он используется для сброса содержимого « pull-to-refresh» .
2	myApp.pullToRefreshTrigger (ptrContent) Он используется для запуска обновления по указанному запросу для обновления содержимого .
3	myApp.destroyPullToRefresh (ptrContent) Он используется для уничтожения / отключения извлечения для обновления при заданном извлечении для обновления содержимого .
4	myApp.initPullToRefresh (ptrContent) Он используется для инициализации / включения функции извлечения для обновления содержимого .

myApp.pullToRefreshDone (ptrContent)

Он используется для сброса содержимого « pull-to-refresh» .

myApp.pullToRefreshTrigger (ptrContent)

Он используется для запуска обновления по указанному запросу для обновления содержимого .

myApp.destroyPullToRefresh (ptrContent)

Он используется для уничтожения / отключения извлечения для обновления при заданном извлечении для обновления содержимого .

myApp.initPullToRefresh (ptrContent)

Он используется для инициализации / включения функции извлечения для обновления содержимого .

Где ptrContent используется для HTMLElement или строки для извлечения-обновления содержимого для сброса / запуска или отключения / включения.

пример

В следующем примере демонстрируется использование компонента refresh, который инициирует обновление содержимого страницы.

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл pull_to_refresh.html в корневой папке вашего сервера.

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

• Когда пользователь отключается, страница обновляется с содержанием.

Сохраните приведенный выше HTML-код как файл pull_to_refresh.html в корневой папке вашего сервера.

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

Когда пользователь отключается, страница обновляется с содержанием.

Framework7 — бесконечный свиток

Описание

Бесконечная прокрутка позволяет загружать дополнительный контент и выполняет необходимые действия, когда страница находится близко к нижней части.

Следующий макет HTML показывает бесконечную прокрутку —

<div class = "page">
   <div class = "page-content infinite-scroll" data-distance = "100">
      ...
   </div>
</div>

Вышеприведенный макет содержит следующие классы —

• page-content infinite-scroll — используется для контейнера бесконечной прокрутки.

• data-distance — этот атрибут позволяет вам настроить расстояние от нижней части страницы (в пикселях) для запуска события бесконечной прокрутки, и его значение по умолчанию составляет 50 пикселей.

page-content infinite-scroll — используется для контейнера бесконечной прокрутки.

data-distance — этот атрибут позволяет вам настроить расстояние от нижней части страницы (в пикселях) для запуска события бесконечной прокрутки, и его значение по умолчанию составляет 50 пикселей.

Если вы хотите использовать бесконечную прокрутку в верхней части страницы, вам нужно добавить дополнительный класс «infinite-scroll-top» в «page-content» —

<div class = "page">
   <div class = "page-content infinite-scroll infinite-scroll-top">
      ...
   </div>
</div>

События бесконечной прокрутки

бесконечный — используется для запуска, когда прокрутка страницы достигает указанного расстояния до дна. Это будет целью div class = «page-content infinite-scroll» .

Существует два метода приложения, которые можно использовать с контейнером бесконечной прокрутки:

Чтобы добавить прослушиватель событий бесконечной прокрутки в указанный контейнер HTML, используйте следующий метод —

myApp.attachInfiniteScroll(container)

Вы можете удалить прослушиватель событий бесконечной прокрутки из указанного контейнера HTML, используя следующий метод —

myApp.detachInfiniteScroll(container)

Где параметры — обязательные параметры, используемые как HTMLElement или строка для контейнера бесконечной прокрутки.

пример

В следующем примере демонстрируется бесконечная прокрутка, которая загружает дополнительный контент, когда прокрутка страницы близка к нижней части.

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла infinite_scroll.html в корневой папке вашего сервера.

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

• Пример позволяет загружать дополнительный контент, когда прокрутка вашей страницы достигает указанного расстояния до дна.

Сохраните приведенный выше HTML-код в виде файла infinite_scroll.html в корневой папке вашего сервера.

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

Пример позволяет загружать дополнительный контент, когда прокрутка вашей страницы достигает указанного расстояния до дна.

Framework7 — Сообщения

Описание

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

Макет сообщений

Framework7 имеет следующую структуру размещения сообщений —

<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>

Макет содержит следующие классы в разных областях —

Макет страницы сообщений

В следующей таблице приведены классы макетов страниц сообщений с описанием.

S.No	Классы и описание
1	Сообщения-контент Это обязательный дополнительный класс, добавленный в «page-content» и используемый для оболочки сообщений.
2	Сообщения Это обязательный элемент для сообщений пузырей.
3	Сообщения, дата Он использует контейнер с отметкой даты для отображения даты и времени отправленного или полученного сообщения.
4	сообщение Это одно сообщение для отображения.

Сообщения-контент

Это обязательный дополнительный класс, добавленный в «page-content» и используемый для оболочки сообщений.

Сообщения

Это обязательный элемент для сообщений пузырей.

Сообщения, дата

Он использует контейнер с отметкой даты для отображения даты и времени отправленного или полученного сообщения.

сообщение

Это одно сообщение для отображения.

Одно сообщение Внутренние части

В следующей таблице приведены классы внутренних частей простых сообщений с описанием.

S.No	Классы и описание
1	Сообщение имя Предоставляет имя отправителя.
2	текст сообщения Определите текст с типом пузыря.
3	сообщение-аватар Указывает отправителя аватара.
4	сообщение метки Он определяет текстовую метку под пузырем.

Сообщение имя

Предоставляет имя отправителя.

текст сообщения

Определите текст с типом пузыря.

сообщение-аватар

Указывает отправителя аватара.

сообщение метки

Он определяет текстовую метку под пузырем.

Дополнительные классы для Single Message Container

В следующей таблице приведены дополнительные классы для описания контейнера одного сообщения.

S.No	Классы и описание
1	сообщение отправлено Он указывает, что сообщение было отправлено пользователем и отображается с зеленым фоновым цветом с правой стороны.
2	сообщение доставлено Он используется для отображения одного сообщения, указывающего, что сообщение было получено пользователем и остается слева с серым фоновым цветом.
3	сообщение-ПИК Это дополнительный класс для отображения изображения с одним сообщением.
4	сообщение-с аватаром Это дополнительный класс для отображения одного сообщения (полученного или отправленного) с аватаром.
5	сообщение-с хвостом Вы можете добавить пузырьковый хвост для одного сообщения (полученного или отправленного).

сообщение отправлено

Он указывает, что сообщение было отправлено пользователем и отображается с зеленым фоновым цветом с правой стороны.

сообщение доставлено

Он используется для отображения одного сообщения, указывающего, что сообщение было получено пользователем и остается слева с серым фоновым цветом.

сообщение-ПИК

Это дополнительный класс для отображения изображения с одним сообщением.

сообщение-с аватаром

Это дополнительный класс для отображения одного сообщения (полученного или отправленного) с аватаром.

сообщение-с хвостом

Вы можете добавить пузырьковый хвост для одного сообщения (полученного или отправленного).

Дополнительные доступные классы для одного сообщения

В следующей таблице показаны доступные классы для одного сообщения с описанием.

S.No	Классы и описание
1	скрыть имя-сообщение Это дополнительный класс для сокрытия имени сообщения для одного сообщения (полученного или отправленного).
2	сообщение-прятки аватар Это дополнительный класс для сокрытия аватара сообщения для одного сообщения (полученного или отправленного).
3	сообщение скрывать метки Это дополнительный класс для скрытия метки сообщения для одного сообщения (полученного или отправленного).
4	сообщение, последний Вы можете использовать этот класс, чтобы указать последнее полученное или отправленное сообщение в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного).
5	сообщение-первая Вы можете использовать этот класс для указания первого полученного или первого отправленного сообщения в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного).

скрыть имя-сообщение

Это дополнительный класс для сокрытия имени сообщения для одного сообщения (полученного или отправленного).

сообщение-прятки аватар

Это дополнительный класс для сокрытия аватара сообщения для одного сообщения (полученного или отправленного).

сообщение скрывать метки

Это дополнительный класс для скрытия метки сообщения для одного сообщения (полученного или отправленного).

сообщение, последний

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

сообщение-первая

Вы можете использовать этот класс для указания первого полученного или первого отправленного сообщения в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного).

Инициализация сообщений с помощью JavaScript

Вы можете инициализировать сообщения с помощью JavaScript, используя следующий метод —

myApp.messages(messagesContainer, parameters)

Метод принимает два варианта —

• messagesContainer — это обязательный HTML-элемент или строка, включающая HTML-элемент контейнера сообщений.

• параметры — это указывает объект с параметрами сообщений.

messagesContainer — это обязательный HTML-элемент или строка, включающая HTML-элемент контейнера сообщений.

параметры — это указывает объект с параметрами сообщений.

Параметры сообщений

В следующей таблице приведены параметры сообщений с описанием.

S.No	Параметр и описание	Тип	По умолчанию
1	autoLayout Он добавляет дополнительные обязательные классы к каждому сообщению, включив его.	логический	правда
2	newMessagesFirst Вы можете отобразить сообщение сверху вместо отображения снизу, включив его.	логический	ложный
3	Сообщения Он отображает массив сообщений, в котором каждое сообщение должно быть представлено как объект с параметрами сообщения.	массив	—
4	messageTemplate Он отображает шаблон одного сообщения.	строка	—

autoLayout

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

newMessagesFirst

Вы можете отобразить сообщение сверху вместо отображения снизу, включив его.

Сообщения

Он отображает массив сообщений, в котором каждое сообщение должно быть представлено как объект с параметрами сообщения.

messageTemplate

Он отображает шаблон одного сообщения.

Свойства сообщения

В следующей таблице приведены свойства сообщений с описанием.

S.No	Описание недвижимости
1	myMessages.params Вы можете инициализировать передаваемые параметры с помощью объекта.
2	myMessages.container Определяет элемент DOM7 с контейнером HTML панели сообщений.

myMessages.params

Вы можете инициализировать передаваемые параметры с помощью объекта.

myMessages.container

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

Методы сообщений

В следующей таблице приведены методы сообщений с описанием.

Ниже приведен список способов сообщения с описанием.

S.No	Метод и описание
1	myMessages.addMessage (messageParameters, метод, animate); Сообщение может быть добавлено в начало или конец с помощью параметра метода. Имеет следующие параметры — messageParameters — предоставляет параметры сообщения для добавления. Метод — это строковый тип, который добавляет сообщение в начало или конец контейнера сообщений. animate — это логический тип, который добавляет сообщение без какой-либо анимации перехода или прокрутки, устанавливая для него значение false. По умолчанию это будет правдой.
2	myMessages.appendMessage (messageParameters, animate); Он добавляет сообщение в конец контейнера сообщений.
3	myMessages.prependMessage (messageParameters, animate); Добавляет сообщение в начало контейнера сообщений.
4	myMessages.addMessages (сообщения, метод, анимация); Вы можете добавить несколько сообщений одновременно. У него есть следующий параметр — messages — предоставляет массив сообщений для добавления, который должен быть представлен как объект с параметрами сообщения.
5	myMessages.removeMessage (сообщение); Используется для удаления сообщения. У него есть следующий параметр — сообщение — это обязательный HTML-элемент или строка, которая удаляет элемент сообщения.
6	myMessages.removeMessages (сообщения); Вы можете удалить несколько сообщений. У него есть следующий параметр — messages — это обязательный массив с элементами HTML или строкой, который удаляет сообщения.
7	myMessages.scrollMessages (); Вы можете прокручивать сообщения сверху вниз и наоборот, в зависимости от первого параметра нового сообщения.
8	myMessages.layout (); Авто макет может быть применен к сообщениям.
9	myMessages.clean (); Он используется для очистки сообщений.
10	myMessages.destroy (); Используется для уничтожения сообщений.

myMessages.addMessage (messageParameters, метод, animate);

Сообщение может быть добавлено в начало или конец с помощью параметра метода.

Имеет следующие параметры —

messageParameters — предоставляет параметры сообщения для добавления.

Метод — это строковый тип, который добавляет сообщение в начало или конец контейнера сообщений.

animate — это логический тип, который добавляет сообщение без какой-либо анимации перехода или прокрутки, устанавливая для него значение false. По умолчанию это будет правдой.

myMessages.appendMessage (messageParameters, animate);

Он добавляет сообщение в конец контейнера сообщений.

myMessages.prependMessage (messageParameters, animate);

Добавляет сообщение в начало контейнера сообщений.

myMessages.addMessages (сообщения, метод, анимация);

Вы можете добавить несколько сообщений одновременно.

У него есть следующий параметр —

messages — предоставляет массив сообщений для добавления, который должен быть представлен как объект с параметрами сообщения.

myMessages.removeMessage (сообщение);

Используется для удаления сообщения.

У него есть следующий параметр —

сообщение — это обязательный HTML-элемент или строка, которая удаляет элемент сообщения.

myMessages.removeMessages (сообщения);

Вы можете удалить несколько сообщений.

У него есть следующий параметр —

messages — это обязательный массив с элементами HTML или строкой, который удаляет сообщения.

myMessages.scrollMessages ();

Вы можете прокручивать сообщения сверху вниз и наоборот, в зависимости от первого параметра нового сообщения.

myMessages.layout ();

Авто макет может быть применен к сообщениям.

myMessages.clean ();

Он используется для очистки сообщений.

myMessages.destroy ();

Используется для уничтожения сообщений.

Параметры одного сообщения

В следующей таблице приведены параметры для одного сообщения с описанием.

S.No	Параметр и описание	Тип	По умолчанию
1	текст Он определяет текст сообщения, который может быть строкой HTML.	строка	—
2	название Указывает имя отправителя.	строка	—
3	аватар Указывает строку URL аватара отправителя.	строка	—
4	время Он определяет строку времени сообщения, например, «9:45 AM», «18: 35».	строка	—
5	тип Он предоставляет тип сообщения, может ли оно быть отправлено или получено.	строка	послал
6	этикетка Он определяет метку сообщения.	строка	—
7	день Это дает дневную строку сообщения как «воскресенье», «понедельник», «вчера» и т. Д.	строка	—

текст

Он определяет текст сообщения, который может быть строкой HTML.

название

аватар

Указывает строку URL аватара отправителя.

время

Он определяет строку времени сообщения, например, «9:45 AM», «18: 35».

тип

Он предоставляет тип сообщения, может ли оно быть отправлено или получено.

этикетка

Он определяет метку сообщения.

день

Это дает дневную строку сообщения как «воскресенье», «понедельник», «вчера» и т. Д.

Инициализация сообщений с помощью HTML

Вы можете инициализировать сообщения с помощью HTML без JavaScript, используя дополнительный класс messages-init для сообщений, и использовать атрибуты data для передачи необходимых параметров, как показано во фрагменте кода, приведенном ниже —

...
   <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>
...

пример

В следующем примере демонстрируется использование сообщений в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла messages.html в корневой папке вашего сервера.

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

• Когда вы вводите сообщение в окно сообщения и нажимаете кнопку «Отправить», оно указывает, что ваше сообщение было отправлено, и справа отображается зеленый фон.

• Сообщение, которое вы получите, появится слева на сером фоне вместе с именем отправителя.

Сохраните приведенный выше HTML-код в виде файла messages.html в корневой папке вашего сервера.

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

Когда вы вводите сообщение в окно сообщения и нажимаете кнопку «Отправить», оно указывает, что ваше сообщение было отправлено, и справа отображается зеленый фон.

Сообщение, которое вы получите, появится слева на сером фоне вместе с именем отправителя.

Framework7 — панель сообщений

Описание

Framework7 предоставляет специальную панель инструментов с изменяемыми размерами для работы с системой обмена сообщениями в приложении.

Следующий код показывает макет панели сообщений —

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>   

В панели сообщений внутренняя часть «страницы» очень важна и находится справа от «messages-content» —

<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>

Вы можете использовать следующий метод для инициализации панели сообщений с помощью JavaScript —

myApp.messagesbar(messagesbarContainer, parameters)

У метода есть два варианта —

• messagesbarContainer — это обязательный HTML-элемент или строка, включающая HTML-элемент контейнера панели сообщений.

• параметры — это указывает объект с параметрами панели сообщений.

messagesbarContainer — это обязательный HTML-элемент или строка, включающая HTML-элемент контейнера панели сообщений.

параметры — это указывает объект с параметрами панели сообщений.

Например —

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
}); 

Параметр панели сообщений

maxHeight — используется для установки максимальной высоты текстовой области и будет изменяться в зависимости от объема ее текста. Тип параметра — число, а значение по умолчанию — ноль .

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

В следующей таблице показаны свойства панели сообщений —

S.No	Свойства и описание
1	myMessagebar.params Вы можете указать объект с переданными параметрами инициализации.
2	myMessagebar.container Вы можете указать элемент dom7 с HTML-элементом контейнера сообщений.
3	myMessagebar.textarea Вы можете указать элемент dom7 с HTML-элементом textarea панели сообщений.

myMessagebar.params

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

myMessagebar.container

Вы можете указать элемент dom7 с HTML-элементом контейнера сообщений.

myMessagebar.textarea

Вы можете указать элемент dom7 с HTML-элементом textarea панели сообщений.

Методы панели сообщений

В следующей таблице показаны методы панели сообщений —

S.No	Методы и описание
1	myMessagebar.value (новое_значение); Он устанавливает значение / текстовое поле для текстовой области сообщения и возвращает значение текстовой зоны для информационной панели, если newValue не указано.
2	myMessagebar.clear (); Он очищает текстовую область и обновляет / сбрасывает размер.
3	myMessagebar.destroy (); Это уничтожить экземпляр панели сообщений.

myMessagebar.value (новое_значение);

Он устанавливает значение / текстовое поле для текстовой области сообщения и возвращает значение текстовой зоны для информационной панели, если newValue не указано.

myMessagebar.clear ();

Он очищает текстовую область и обновляет / сбрасывает размер.

myMessagebar.destroy ();

Это уничтожить экземпляр панели сообщений.

Инициализировать панель сообщений с HTML

Вы можете инициализировать панель сообщений, используя HTML без методов и свойств JavaScript, добавив класс messagebar-init к .messagebar, и вы можете передать необходимые параметры, используя атрибуты данных .

Следующий код определяет инициализацию панели сообщений с 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>  

Доступ к экземпляру панели сообщений

Можно получить доступ к экземпляру панели сообщений, если вы инициализируете его с помощью HTML; это достигается использованием свойства панели сообщений f7 его элемента контейнера.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world'); 

Вы можете увидеть пример панели сообщений, которая объяснена в этой ссылке

Framework7 — Уведомления

Описание

Уведомления используются для отображения необходимых сообщений, которые выглядят как Push (или локальные) уведомления iOS.

Следующая таблица демонстрирует использование уведомлений в деталях —

S.No	Использование и описание уведомлений
1	JavaScript API уведомлений Уведомления также могут быть добавлены или закрыты с помощью JavaScript с помощью соответствующих методов приложения.
2	Макет уведомлений Уведомления Framework7 будут добавлены с использованием JavaScript.
3	Пример iOS Framework7 позволяет использовать различные типы уведомлений в макете iOS.
4	Пример материала Уведомления Framework7 также можно использовать в макете материала.

Уведомления также могут быть добавлены или закрыты с помощью JavaScript с помощью соответствующих методов приложения.

Уведомления Framework7 будут добавлены с использованием JavaScript.

Framework7 позволяет использовать различные типы уведомлений в макете iOS.

Уведомления Framework7 также можно использовать в макете материала.

Framework7 — Lazy Load

Описание

Ленивая загрузка задерживает процесс загрузки вашего изображения на данной странице. Ленивая загрузка улучшает производительность прокрутки, ускоряет загрузку страниц и экономит трафик.

Ленивые элементы загрузки и изображения должны быть внутри прокручиваемого элемента <div class = «page-content»> для правильной работы.

Ленивые элементы загрузки и изображения должны быть внутри прокручиваемого элемента <div class = «page-content»> для правильной работы.

Следующая таблица демонстрирует использование ленивой нагрузки —

S.No	Ленивое использование нагрузки и описание
1	использование Ленивая нагрузка может быть применена к изображениям, фоновым изображениям и с эффектом постепенного увеличения.
2	Начальная загрузка ленивых вручную После инициализации страницы, если вы добавляете изображения отложенной загрузки вручную, отложенная загрузка не будет работать, и вам нужно использовать методы для ее инициализации.

Ленивая нагрузка может быть применена к изображениям, фоновым изображениям и с эффектом постепенного увеличения.

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

Можно запустить загрузку изображения вручную, используя ленивое событие для ленивого изображения / элемента, как показано ниже —

$$('img.lazy').trigger('lazy');

$$('div.lazy').trigger('lazy');

пример

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

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл framework7_lazy_load.html в корневой папке вашего сервера.

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

• В примере указывается ленивая загрузка изображений, где изображения будут загружаться на страницу при их прокрутке вниз.

Сохраните приведенный выше HTML-код как файл framework7_lazy_load.html в корневой папке вашего сервера.

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

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

Framework7 — Цветовые темы

Описание

Framework7 предоставляет различные цветовые темы для ваших приложений.

Цветовая тема предоставляет различные типы цветов темы, используемые для плавной работы с приложениями, как указано в таблице ниже —

S.No	Тип темы и описание
1	iOS Theme Colors Для приложения вы можете использовать 10 различных цветовых тем iOS по умолчанию.
2	Материал Тема Цвета Framework7 предоставляет 22 различных цветовых темы материала по умолчанию для приложения.

Для приложения вы можете использовать 10 различных цветовых тем iOS по умолчанию.

Framework7 предоставляет 22 различных цветовых темы материала по умолчанию для приложения.

Применение цветовых тем

Framework7 позволяет применять цветовые темы к различным элементам, таким как страница, список-блок, панель навигации, ряд кнопок и т. Д., Используя класс theme- [color] для родительского элемента.

пример

...
</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>

Темы макетов

Вы можете использовать тему макета по умолчанию для вашего приложения, используя две темы: белую и темную . Темы можно применить с помощью класса layout- [theme] к родительскому элементу.

пример

   ...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Вспомогательные классы

Framework7 предоставляет дополнительные вспомогательные классы, которые могут использоваться вне или без тем, как указано ниже —

• color- [color] — может использоваться для изменения цвета текста блока или цвета кнопки, ссылки, значка и т. д.

• bg- [color] — устанавливает предопределенный цвет фона для блока или элемента.

• border- [color] — устанавливает предопределенный цвет границы для блока или элемента.

color- [color] — может использоваться для изменения цвета текста блока или цвета кнопки, ссылки, значка и т. д.

bg- [color] — устанавливает предопределенный цвет фона для блока или элемента.

border- [color] — устанавливает предопределенный цвет границы для блока или элемента.

Framework7 — Hairlines

Описание

Hairline — это класс, который добавляет границу в 1 пиксель вокруг изображений с помощью класса border. С выпуском 1.x hairlines пересмотрела работу с псевдоэлементами : after и : before вместо использования границ CSS.

Hairlines содержит следующие правила —

• : after — этот псевдоэлемент используется для нижних и правых волос.

• : before — этот псевдоэлемент используется для верхнего и левого волоса.

: after — этот псевдоэлемент используется для нижних и правых волос.

: before — этот псевдоэлемент используется для верхнего и левого волоса.

В следующем фрагменте кода показано использование элемента after .

.navbar:after {
   background-color: red;
}

Следующий фрагмент кода удаляет нижнюю панель инструментов

.navbar:after {
   display:none;
}

.toolbar:before {
   display:none;
}

класс «без границ»

Линия волос будет удалена с помощью класса без границ, и она поддерживается на панели навигации, панели инструментов, карте и ее элементах.

Следующий код используется для удаления волосяного покрова из панели навигации —

<div class = "navbar no-border">
   ...
</div>

Framework7 — Обзор шаблонов

Описание

Template7 — это легкий JavaScript-движок для мобильных устройств, который представляет Ajax и динамические страницы в виде шаблонов Template7 с заданным контекстом и не требует никаких дополнительных сценариев. Template7 ассоциируется с Framework7 в качестве легковесного механизма шаблонов по умолчанию, который работает быстрее для приложений.

Спектакль

Процесс компиляции строки в функцию JS является самым медленным сегментом шаблона7. Следовательно, вам не нужно компилировать шаблон несколько раз, достаточно только одного раза.

//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 — это облегченный шаблонизатор, используемый в качестве автономной библиотеки без Framework7. Файлы Template7 могут быть установлены двумя способами:

• Вы можете скачать из репозитория Template7 github .

Или же

• Вы можете установить его с помощью следующей команды через Bower —

Вы можете скачать из репозитория Template7 github .

Или же

Вы можете установить его с помощью следующей команды через Bower —

bower install template7

Framework7 — Автокомпиляция

Описание

В Template7 вы можете автоматически компилировать свои шаблоны, указав специальные атрибуты в теге <script>.

Следующий код показывает макет автокомпиляции —

<script type = "text/template7" id = "myTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script> 

Вы можете использовать следующие атрибуты для инициализации автоматической компиляции —

• type = «text / template7» — Он используется для указания Template7 на автоматическую компиляцию и является обязательным типом сценария.

• id = «myTemplate» — шаблон доступен через идентификатор и является обязательным идентификатором шаблона.

type = «text / template7» — Он используется для указания Template7 на автоматическую компиляцию и является обязательным типом сценария.

id = «myTemplate» — шаблон доступен через идентификатор и является обязательным идентификатором шаблона.

Для автоматической компиляции необходимо включить инициализацию приложения, передав следующий параметр —

var myApp = new Framework7 ({
   //It is used to compile templates on app init in Framework7
   precompileTemplates: true,
});

Template7.templates / myApp.templates

К автоматически скомпилированным шаблонам можно обращаться как к свойствам Template7.templates после инициализации приложения. Он также известен как myApp.templates, где myApp является инициализированным экземпляром приложения.

Вы можете использовать следующие шаблоны в нашем файле index.html —

<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> 

Вы также можете получить доступ к шаблонам в JavaScript после инициализации приложения —

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
});

Framework7 — Шаблон7 Страниц

Описание

Template7 — это первый шаблонный движок JavaScript для мобильных устройств с синтаксисом handlebars.js. Это сверхлегкий и невероятно быстрый шаблонизатор по умолчанию в Framework7.

Во-первых, нам нужно передать следующий параметр при инициализации приложения, который отображает все Ajax и динамические страницы как шаблон Template7 —

var myApp = new Framework7 ({
   template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});

S.No	Template7 Pages Использование и описание
1	Шаблоны / Страницы данных Вы можете передать необходимые данные / контекст для конкретных страниц, указав все данные страниц в параметре template7Data , отправляемом при инициализации приложения.
2	Передать пользовательский контекст Framework7 позволяет передавать пользовательский контекст на любую динамическую страницу или любой загруженный Ajax.
3	Загрузка шаблонов напрямую Вы можете визуализировать и загружать шаблоны на лету как динамические страницы.
4	URL-запрос Если вы используете Template7 для рендеринга страниц Ajax, его контекст всегда будет расширен специальным свойством url_query .

Вы можете передать необходимые данные / контекст для конкретных страниц, указав все данные страниц в параметре template7Data , отправляемом при инициализации приложения.

Framework7 позволяет передавать пользовательский контекст на любую динамическую страницу или любой загруженный Ajax.

Вы можете визуализировать и загружать шаблоны на лету как динамические страницы.

Если вы используете Template7 для рендеринга страниц Ajax, его контекст всегда будет расширен специальным свойством url_query .

пример

В следующем примере представлены ссылки, которые отображают информацию о пользователе, такую ​​как сведения о пользователе, лайки пользователей и т. Д. При нажатии на эти ссылки.

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>

мой-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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код в виде файла index.html в корневой папке вашего сервера.

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

• В примере представлены ссылки, которые отображают информацию о пользователе, такую ​​как сведения о пользователе, которые нравятся пользователю при нажатии на эти ссылки.

Сохраните приведенный выше HTML-код в виде файла index.html в корневой папке вашего сервера.

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

В примере представлены ссылки, которые отображают информацию о пользователе, такую ​​как сведения о пользователе, которые нравятся пользователю при нажатии на эти ссылки.

Framework7 — активное состояние

Описание

При нажатии на ссылки и кнопки они подсвечиваются. Это делается активным состоянием в Framework7.

• Он ведет себя как собственное приложение, а не как веб-приложение.
• Он имеет встроенную библиотеку быстрых кликов, и он должен быть включен.
• Класс активного состояния такой же, как и CSS : активный селектор.
• Активное состояние включается добавлением класса watch-active-state в элемент <html> .

Следующий код используется для активного состояния в стиле CSS —

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

В следующем коде показана резервная совместимость, когда активное состояние или быстрые щелчки отключены.

/* 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;
}

Framework7 — Нажмите удерживать событие

Описание

Событие удержания касания используется для запуска (включения) после продолжительного и завершенного события касания, поэтому оно называется событием удержания касания . Tab Hold — это встроенная библиотека быстрых кликов .

Следующие параметры используются для отключения или включения и настраиваются по умолчанию —

S.No	Параметр и описание	Тип	По умолчанию
1	tapHold Чтобы включить события удержания касания, когда для него установлено значение true.	логический	ложный
2	tapHoldDelay Он определяет продолжительность удерживания касания до запуска события удержания метки на целевом элементе.	число	750
3	tapHoldPreventClicks Событие удержания касания не будет запущено после нажатия на событие.	логический	правда

tapHold

Чтобы включить события удержания касания, когда для него установлено значение true.

tapHoldDelay

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

tapHoldPreventClicks

Событие удержания касания не будет запущено после нажатия на событие.

Следующий код используется для включения событий удержания касания —

var myApp = new Framework7 ({
   tapHold: true //enable tap hold events
});
 
var $$ = Dom7;
 
$$('.some-link').on('taphold', function () {
   myApp.alert('Tap hold fired!');
});

Framework7 — Touch Ripple

Описание

Touch Ripple — это эффект, который поддерживается только в теме материала Framework7. По умолчанию он включен в теме материала, и вы можете отключить его с помощью параметра materialRipple: false .

Элементы пульсации

Вы можете включить элементы ряби в соответствии с некоторыми селекторами CSS, такими как —

• пульсация
• ссылка
• a.item-ссылка
• .button
• .tab-ссылка
• .label-радио
• .label-checkbox и т. д.

Они указаны в параметре materialRippleElements . Вам нужно включить сенсорную рябь, добавить селектор элемента в параметр materialRippleElements, чтобы использовать эффект ряби, или просто использовать класс пульсации .

Волна цвета пульсации

Цвет пульсации можно изменить в элементе, добавив к нему класс ripple- [color] .

Например —

<a href = "#" class = "button ripple-orange">Ripple Button</a>

или вы можете определить цвет волны пульсации с помощью CSS, как показано ниже —

.button .ripple-wave {
   background-color: #FFFF00;
}

Отключить элементы пульсации

Вы можете отключить пульсацию для некоторых указанных элементов, добавив к этим элементам класс no-ripple . Например —