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 не зависит от какой-либо сторонней библиотеки даже для манипуляций с DOM. Вместо этого у него есть собственный DOM7.
Framework7 также можно использовать с фреймворками Angular и React .
Вы можете приступить к созданию приложений, когда будете знать HTML, CSS и некоторые базовые знания JavaScript.
Он поддерживает более быструю разработку через Bower .
Разрабатывать приложения для iOS и Android легко, не изучая его.
Недостатки
Framework7 поддерживает только такие платформы, как iOS и Android.
Поддержка фреймворка Framework7 онлайн-сообществом меньше по сравнению с iOS и Andriod.
В этой главе мы обсудим, как установить и настроить Framework7.
Вы можете скачать Framework7 двумя способами:
Скачать из репозитория Framework7 Github
Вы можете установить Framework7, используя Bower, как показано ниже -
bower install framework7После успешной установки Framework7 вам необходимо выполнить следующие шаги, чтобы использовать Framework7 в своем приложении:
Step 1 - Вам необходимо установить gulp-cli для создания разрабатываемых и дистрибутивных версий Framework7 с помощью следующей команды.
npm install gulp-cliКли означает утилиту командной строки для Глоток.
Step 2 - Gulp необходимо установить глобально с помощью следующей команды.
npm install --global gulpStep 3- Затем установите диспетчер пакетов NodeJS, который устанавливает программы узлов, которые упрощают определение и связывание зависимостей. Следующая команда используется для установки npm.
npm installStep 4 - Разрабатываемая версия Framework7 может быть создана с помощью следующей команды.
npm buildStep 5- После создания разрабатываемой версии Framework7 начните сборку приложения из папки dist / с помощью следующей команды.
npm distStep 6 - Сохраните папку с вашим приложением на сервере и выполните следующую команду для навигации между страницами вашего приложения.
gulp serverЗагрузите библиотеку Framework7 с CDN
CDN или сеть доставки контента - это сеть серверов, предназначенная для обслуживания файлов пользователями. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию Framework7 с того же CDN, ее не нужно будет повторно загружать. В HTML-документ можно включить следующие файлы CDN.
Следующие CDN используются в iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Он используется для включения библиотеки CSS Framework7 iOS в ваше приложение.
<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>Он используется для включения библиотеки Framework7 JS в ваше приложение.
<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) для выполнения всех наших примеров.
пример
В следующем примере демонстрируется использование простого приложения в 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, и результат отобразится, как показано ниже.
Когда вы щелкаете по панели навигации, отображается окно предупреждения с настроенным сообщением.
Описание
Framework7 предоставляет различные типы макетов для вашего приложения. Он поддерживает три типа макетов Navbar / Toolbar -
| S.No | Типы макетов и описание |
|---|---|
| 1 | Статический макет Статический макет чаще всего используется по типу макета и включает в себя панель навигации и панель инструментов, которые могут быть прокручиваемым содержимым страницы, и каждая страница содержит свою собственную панель навигации и панель инструментов. |
| 2 | Фиксированный макет Фиксированный макет включает в себя собственную панель навигации и панель инструментов, которые могут быть видны на экране и не могут быть прокручены на странице. |
| 3 | Через макет В этом макете панель навигации и панель инструментов фиксируются для всех страниц в одном представлении. |
| 4 | Смешанный макет Вы можете смешивать различные типы макетов в одном представлении. |
Нет панели навигации / панели инструментов
Если вы не хотите использовать панели навигации и панели инструментов, а затем не включают в себя соответствующие классы ( Navbar фиксированной , Navbar-через , панель фиксированной , панель-Through ) на страницу / страниц / зрения.
Описание
В этой главе давайте изучим навигационную панель . Обычно он размещается вверху экрана, содержащего заголовок страницы и элементы навигации.
Панель навигации состоит из трех частей, каждая из которых может содержать любой HTML-контент, но рекомендуется использовать их следующим образом:
Left- Он предназначен для размещения значков обратной ссылки или одиночной текстовой ссылки.
Center - Используется для отображения заголовка страницы или ссылок на вкладки.
Right- Эта часть похожа на левую .
В следующей таблице подробно показано использование навигационной панели.
| S.No | Типы и описание навигационной панели |
|---|---|
| 1 | Базовая панель навигации Базовую панель навигации можно создать с помощью классов navbar , navbar-inner , left , center и right . |
| 2 | Навбар со ссылками Чтобы использовать ссылки в левой и правой части панели навигации, просто добавьте тег <a> со ссылкой на класс . |
| 3 | Множественные ссылки Чтобы использовать несколько ссылок, просто добавьте еще несколько <a class = "link"> к выбранной вами части. |
| 4 | Ссылки с текстом и значками Ссылки могут быть снабжены значками и текстами, добавив классы для значков и заключив текст ссылки в элемент <span> . |
| 5 | Ссылки только с иконками NavBar ссылка может быть предоставлена только иконками, добавив значок только класс ссылку. |
| 6 | Связанное приложение и методы просмотра При инициализации представления framework7 позволяет использовать методы, доступные для панели навигации. |
| 7 | Скрыть панель навигации автоматически Панель навигации может быть скрыта / отображена автоматически для некоторых страниц, загруженных Ajax, где панель навигации не требуется. |
Описание
Панель инструментов обеспечивает легкий доступ к другим страницам с помощью элементов навигации в нижней части экрана.
Вы можете использовать панель инструментов двумя способами, как указано в таблице:
| S.No | Типы панелей инструментов и описание |
|---|---|
| 1 | Скрыть панель инструментов Вы можете скрыть панель инструментов автоматически при загрузке страниц с помощью no-toolbar к загруженной странице. |
| 2 | Нижняя панель инструментов Поместите панель инструментов внизу страницы, используя toolbar-bottom класс. |
Методы панели инструментов
Следующие доступные методы можно использовать с панелями инструментов -
| S.No | Методы и описание панели инструментов |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Скрывает указанную панель инструментов. |
| 2 | myApp.showToolbar(toolbar) Показывает указанную панель инструментов. |
| 3 | view.hideToolbar() Он скрывает указанную панель инструментов в представлении. |
| 4 | 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, и результат отобразится, как показано ниже.
Описание
Framework 7 позволяет искать элементы с помощью класса панели поиска .
Параметры панели поиска
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | searchList Он выполняет поиск в селекторе CSS или HTML-элементе списка. |
строка или элемент HTML | - |
| 2 | searchIn Вы можете искать элементы представления списка селекторов CSS, а также искать элементы, передавая классы .item-title , .item-text . |
строка | '.item-title' |
| 3 | found Он выполняет поиск в селекторе CSS или элементе HTML, используя «найденный» элемент. Кроме того, он использует элемент .searchbar-found, если элемент не указан. |
строка или элемент HTML | - |
| 4 | notfound Он выполняет поиск в селекторе CSS или HTML-элементе, используя «не найденный» элемент. Кроме того, он использует элемент .searchbar-not-found, если элемент не указан. |
строка или элемент HTML | - |
| 5 | overlay Он выполняет поиск в селекторе CSS или элементе HTML с помощью элемента «наложение панели поиска» и использует элемент .searchbar-overlay , если элемент не указан. |
строка или элемент HTML | - |
| 6 | ignore Вы можете игнорировать селектор CSS для элементов, используя панель поиска. |
строка | '.searchbar-ignore' |
| 7 | customSearch Когда он включен, панель поиска не будет выполнять поиск ни в одном из блоков списков, указанных в searchList, и вам будет разрешено использовать настраиваемые функции поиска. |
логический | ложный |
| 8 | removeDiacritics При поиске элемента удалите диакритические знаки, включив этот параметр. |
логический | ложный |
| 9 | hideDividers Этот параметр скроет разделители элементов и заголовок группы, если элементов нет. |
логический | правда |
| 10 | hideGroups Этот параметр скроет группы, если в группах просмотра списка нет элементов. |
логический | правда |
Обратные вызовы панели поиска
| S.No | Обратные вызовы и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | onSearch Этот метод будет запускать функцию обратного вызова при выполнении поиска. |
функция (ы) | - |
| 2 | onEnable Этот метод запускает функцию обратного вызова, когда панель поиска становится активной. |
функция (ы) | - |
| 3 | onDisable Этот метод запускает функцию обратного вызова, когда панель поиска становится неактивной. |
функция (ы) | - |
| 4 | onClear Этот метод вызовет функцию обратного вызова, когда вы нажмете на «очистить» элемент. |
функция (ы) | - |
Свойства панели поиска
| S.No | Свойства и описание |
|---|---|
| 1 | mySearchbar.params Представляет инициализированные параметры, переданные с объектом. |
| 2 | mySearchbar.query Ищет текущий запрос. |
| 3 | mySearchbar.searchList Определяет блок списка поиска. |
| 4 | mySearchbar.container Определяет контейнер панели поиска с элементом HTML. |
| 5 | mySearchbar.input Определяет ввод панели поиска с элементом HTML. |
| 6 | mySearchbar.active Он определяет, включена или отключена панель поиска. |
Методы панели поиска
| S.No | Методы и описание |
|---|---|
| 1 | mySearchbar.search(query); Этот метод выполняет поиск переданного запроса. |
| 2 | mySearchbar.enable(); Это включает панель поиска. |
| 3 | mySearchbar.disable(); Отключает панель поиска. |
| 4 | mySearchbar.clear(); Вы можете очистить запрос и результаты поиска. |
| 5 | mySearchbar.destroy(); Он уничтожает экземпляр панели поиска. |
События JavaScript панели поиска
| S.No | Описание события | Цель |
|---|---|---|
| 1 | search Вы можете активировать это событие при поиске элементов. |
<div class = "list-block"> |
| 2 | clearSearch Это событие запускается, когда пользователь щелкает элемент clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Когда панель поиска становится доступной, это событие запускается. |
<div class = "list-block"> |
| 4 | disableSearch Когда панель поиска отключается и пользователь нажимает кнопку отмены или элемент «наложение панели поиска», это событие запускается. |
<div class = "list-block"> |
пример
В следующем примере демонстрируется использование панели поиска при прокрутке в Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Вывод
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните указанный выше HTML-код search_bar.html файл в корневой папке вашего сервера.
Откройте этот HTML-файл как http: //localhost/search_bar.html, и результат отобразится, как показано ниже.
Если элемент, содержащийся в списке, вводится в строку поиска, он отображает этот конкретный элемент из списка.
Если вводится элемент, отличный от элементов, содержащихся в списке, он не отображает ни одного найденного элемента.
Описание
IOS 7+ позволяет создавать полноэкранные приложения, которые могут создать проблему, если строка состояния перекрывает ваше приложение. Framework7 решает эту проблему, определяя, находится ли ваше приложение в полноэкранном режиме или нет. Если ваше приложение находится в полноэкранном режиме, Framework7 автоматически добавит класс with-statusbar-overlay в <html> (или удалит, если приложение не находится в полноэкранном режиме), и вам нужно добавить класс наложения строки состояния в <body> как показано в следующем коде -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...По умолчанию <div> всегда будет скрыт и закреплен в верхней части экрана. Он будет виден только тогда, когда приложение находится в полноэкранном режиме и класс with-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, и результат отобразится, как показано ниже.
В примере показано использование statusbar-overlay, который позволяет создавать полноэкранные приложения, когда строка состояния перекрывает приложение.
Описание
На боковой панели перемещается в левую или правую сторону экрана для отображения содержимого. Framework7 позволяет вам включать до 2 панелей (правую и левую) в ваше приложение. Вам нужно добавить панели в начале <body>, а затем выбрать эффект открытия, применив следующие перечисленные классы:
panel-reveal - Это приведет к перемещению всего содержимого приложения.
panel-cover - Это заставит панель накладываться на содержимое приложения.
Например, следующий код показывает, как использовать вышеуказанные классы -
<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 -
<!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, и результат отобразится, как показано ниже.
Код добавляет дополнительное форматирование и требуемый интервал для текстового содержимого.
Описание
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 | Col-Auto | планшет-авто | Равная ширина |
пример
В следующем примере представлен макет сетки для размещения вашего контента по мере необходимости в 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, результат будет отображаться, как показано ниже.
Этот код предоставляет различные типы сеток для размещения содержимого в соответствии с потребностями пользователя.
Описание
Framework7 предоставляет различные типы оверлеев для бесперебойной работы с приложениями. В следующей таблице перечислены некоторые оверлеи Framework7 -
| S.No | Тип и описание наложения |
|---|---|
| 1 | Модальный Модальное окно - это небольшое окно, в котором отображается контент из разных источников, не покидая родительского окна. |
| 2 | Выскакивать Всплывающее окно - это всплывающее окно, в котором отображается содержимое, когда пользователь щелкает элемент. |
| 3 | Трещать Для управления представлением временного контента можно использовать компонент popover. |
| 4 | Лист действий Лист действий используется, чтобы предоставить пользователю набор возможностей для решения данной задачи. |
| 5 | Экран входа в систему Оверлейный экран входа в систему используется для отображения формата экрана входа в систему, который может использоваться на странице или во всплывающем окне или как автономный оверлей. |
| 6 | Средство выбора модальное Модальный режим выбора используется для выбора некоторого настраиваемого содержимого, аналогичного средству выбора календаря. |
Описание
Предварительный загрузчик в Framework7 сделан с помощью масштабируемой векторной графики (SVG) и анимирован с помощью CSS, что позволяет легко изменять размер. Preloader доступен в двух цветах -
- по умолчанию светлый фон
- еще один темный фон
Вы можете использовать класс preloader в своем 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>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.
Описание
Индикаторы выполнения могут использоваться для отображения пользователям загрузки ресурсов или выполнения задачи. Вы можете указать индикатор выполнения, используя класс индикатора выполнения . Когда пользователь не знает, как долго будет выполняться процесс загрузки запроса, вы можете использовать класс progressbar-infinite .
Индикатор выполнения JavaScript API
Индикатор выполнения можно использовать вместе с API JavaScript для указания свойств отображения , скрытия и выполнения с помощью следующих методов:
| S.No | Методы | Описание и параметры |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Он устанавливает индикатор выполнения задачи.
|
| 2 | myApp.hideProgressbar (contain er) | Он скрывает индикатор выполнения.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Он отображает индикатор выполнения.
|
пример
В следующем примере отображаются анимированные детерминированные и неопределенные индикаторы выполнения для индикации активности в 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, и результат отобразится, как показано ниже.
В примере отображается индикатор выполнения, который указывает, сколько времени потребуется операции для завершения процесса, и отображает различные типы индикаторов выполнения, указывающие на активность.
Описание
Представления списков - это мощные компоненты пользовательского интерфейса, которые представляют данные в виде прокручиваемого списка из нескольких строк. Framework7 предоставляет различные типы списков для работы с вашим приложением. В следующей таблице перечислены некоторые из представлений списка Framework7 -
| S.No | Типы и описание |
|---|---|
| 1 | Посмотреть список Представления списков - это мощные компоненты пользовательского интерфейса, которые представляют данные в виде прокручиваемого списка, содержащего несколько строк. |
| 2 | Список контактов Список контактов - это вид списка, который можно использовать для отображения списка контактов людей. |
| 3 | Просмотр списка мультимедиа Представление списка мультимедиа используется для отображения сложных структур данных, таких как продукты, услуги, информация о пользователях. |
| 4 | Swipeout Swipeout позволяет выявить скрытые действия меню, проводя над элементами списка. |
| 5 | Сортируемый список Сортированный список - это тип представления списка, который сортирует элементы представления списка. |
| 6 | Виртуальный список Виртуальный список - это вид списка, который включает списки из большого количества элементов данных без снижения их производительности. |
Описание
Аккордеон - это графический элемент управления, отображаемый в виде составного списка элементов. Каждый аккордеон можно развернуть или растянуть, чтобы отобразить содержимое, связанное с этим аккордеоном.
Разборный макет
Когда вы используете один отдельный складной элемент, вам нужно опустить элемент - оболочку списка-гармошки .
Ниже приводится структура разборного макета -
<!-- 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 | accordion-list Это необязательный класс, который содержит список групп аккордеонных элементов. |
| 2 | accordion-item Это обязательный класс для отдельного элемента аккордеона. |
| 3 | accordion-item-toggle Это обязательный класс, используемый для расширения содержимого элемента аккордеона. |
| 4 | accordion-item-content Это обязательный класс, используемый для скрытого содержимого элемента аккордеона. |
| 5 | accordion-item-expanded Это единый расширенный элемент аккордеона. |
Accordion JavaScript API
Методы JavaScript API используются для программного открытия и закрытия аккордеона.
Он содержит следующие методы JavaScript API -
myApp.accordionOpen(item) - Используется для открытия аккордеона.
myApp.accordionClose(item) - Используется для закрытия аккордеона.
myApp.accordionToggle(item) - Используется для переключения аккордеона.
Все методы содержат параметр с именем item, который является HTML или строковым элементом элемента-гармошки.
Аккордеонные события
Аккордеон содержит четыре события, перечисленных в следующей таблице -
| S.No | Событие | Цель и описание |
|---|---|---|
| 1 | открытый | Accordion item Когда вы открываете анимацию, это событие запускается. |
| 2 | открыт | Accordion item Когда открытие анимации завершено, это событие запускается. |
| 3 | Закрыть | Accordion item Когда вы закрываете анимацию, это событие запускается. |
| 4 | закрыто | Accordion item Когда закрытие анимации завершено, это событие запускается. |
Просмотр списка аккордеонов
В представлении списка аккордеона вы можете использовать элемент ссылки на элемент вместо переключения аккордеона .
<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, и результат отобразится, как показано ниже.
В примере представлен складной макет, который можно развернуть для отображения содержимого, связанного с аккордеоном.
Описание
Карточки содержат упорядоченную информацию, относящуюся к одной теме, например фотографии, ссылки и текст. В следующей таблице показаны типы карт Framework7 -
| S.No | Типы и описание |
|---|---|
| 1 | HTML-макет карты Базовый HTML-макет карточки использует классы карточек для размещения своих элементов. |
| 2 | Просмотр списка с карточками Вы можете использовать карты как элементы представления списка, добавив класс карт-списка в <div class = "list-block"> . |
Описание
Чип - это небольшой блок сущности, который может содержать фотографию, небольшую строку заголовка и краткую информацию.
HTML макет чипов
В следующем коде показан базовый 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 содержит множество классов, перечисленных ниже -
chips - Это контейнер для стружки.
chip-media- Это медиа-элемент чипа, который может содержать изображения, аватар или иконку. Это необязательно.
card-label - Это текстовая метка чипа.
card-delete - Это дополнительная ссылка на значок удаления чипа.
пример
В следующем примере представлены такие объекты, как альбомы, элементы карты и т. Д., А также фотография и краткая информация.
<!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, и результат отобразится, как показано ниже.
Пример представляет сложные объекты в небольших блоках, таких как альбомы, элементы карточек, размещенное изображение, которое содержит фотографию, строку заголовка и краткую информацию.
Описание
Framework7 предоставляет группу готовых к использованию кнопок, просто добавляя соответствующие классы к ссылкам или кнопкам ввода.
| S.No | Типы и описание |
|---|---|
| 1 | Кнопки темы iOS Framework7 предоставляет множество кнопок темы iOS, которые можно использовать, применяя соответствующие классы. |
| 2 | Кнопки темы материалов Тема материала предоставляет множество кнопок для использования в вашем приложении с помощью соответствующих классов. |
Описание
Framework7 предоставляет плавающую кнопку действия для продвигаемого действия. Они отображаются в виде плавающего значка в кружке над интерфейсом пользователя. Он имеет поведение движения, которое включает морфинг , запуск и передачу точки привязки .
Плавающая кнопка действия поддерживается только в теме «Материал».
В следующей таблице перечислены типы кнопок действий, используемые в Framework7.
| S.No | Типы и описание |
|---|---|
| 1 | Расположение кнопок с плавающим действием Это очень просто; вам просто нужно поместить его как дочерний элемент страницы или представления . |
| 2 | Превращаться в поповер Если вы хотите открывать всплывающее окно при нажатии кнопки с плавающим действием, вы можете использовать класс с плавающей кнопкой . |
| 3 | Быстрый набор Вы можете вызвать связанные действия, нажав кнопку с плавающим действием, используя быстрый набор . |
Описание
Формы используются для взаимодействия с пользователями и сбора данных от веб-пользователей с помощью текстовых полей, флажков, переключателей и т. Д.
Framework7 предоставляет различные типы элементов формы для бесперебойной работы с приложениями, как указано в таблице ниже -
| S.No | Тип и описание наложения |
|---|---|
| 1 | Элементы формы Элементы формы используются для создания красивых макетов форм. |
| 2 | Флажки и радио Расширение представления списка позволяет создавать флажки и радио-входы в Framework7. |
| 3 | Умный выбор Интеллектуальный выбор - это простой способ изменить выбор формы на динамические страницы с помощью групп флажков и переключателей. |
| 4 | Отключенные элементы Элементы можно отключить, применив отключенный класс к элементу или добавив отключенные атрибуты для элемента формы. |
| 5 | Данные формы В Framework7 очень мало полезных методов, что упрощает работу с формами. |
| 6 | Хранение форм С хранилищем форм легко сохранять и анализировать данные форм автоматически на страницах, загруженных Ajax. |
| 7 | Отправка формы Ajax Framework7 позволяет автоматически отправлять данные с помощью Ajax. |
Описание
Вкладки - это наборы логически сгруппированного содержимого, которые позволяют быстро переключаться между ними и экономят место, как гармошки.
Макет вкладок
Следующий код определяет макет для вкладок -
<!-- 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"> - Это одна вкладка, на которой должно быть unique 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>-Вкладка Данные атрибут вкладка-ссылка содержит селектор CSS целевых вкладок / вкладок.
Мы можем использовать разные способы вкладок, они указаны в следующей таблице -
| S.No | Типы и описание вкладок |
|---|---|
| 1 | Встроенные вкладки Встроенные вкладки - это наборы, сгруппированные во встроенные, которые позволяют быстро переключаться между ними. |
| 2 | Переключение вкладок с панели навигации Мы можем размещать вкладки на панели навигации, которые позволяют переключаться между ними. |
| 3 | Переключение представлений с панели вкладок Одна вкладка может использоваться для переключения между видами с собственной навигацией и макетом. |
| 4 | Анимированные вкладки Вы можете использовать простой переход (анимацию) для переключения вкладок. |
| 5 | Перелистываемые вкладки Вы можете создавать прокручиваемые вкладки с простым переходом, используя класс tabs-swipeable-wrap для вкладок. |
| 6 | Вкладки События JavaScript События JavaScript можно использовать, когда вы работаете с кодом JavaScript для вкладок. |
| 7 | Показать вкладку с помощью JavaScript Вы можете переключать или показывать вкладку с помощью методов JavaScript. |
Описание
Ползунок 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 с помощью JavaScript, используя связанные с ним методы -
myApp.swiper(swiperContainer,parameters)ИЛИ ЖЕ
new Swiper(swiperContainer, parameters)Оба метода используются для инициализации ползунка с параметрами.
Вышеуказанные методы содержат следующие параметры -
swiperContainer- Это HTMLElement или нить свайпера, и это обязательно.
parameters - Это необязательные элементы, содержащие объект с параметрами 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();Вы можете увидеть различные способы и типы свайпера в следующей таблице -
| S.No | Типы и описание Swiper |
|---|---|
| 1 | Swiper по умолчанию с разбивкой на страницы Это современный сенсорный слайдер, по умолчанию свайпер перемещается по горизонтали. |
| 2 | Вертикальный Swiper Этот также работает как свайпер по умолчанию, но смахивает вертикально. |
| 3 | С промежутком между слайдами Этот свайпер используется, чтобы освободить пространство между двумя слайдами. |
| 4 | Несколько свайперов Этот свайпер использует более одного свайпера на одной странице. |
| 5 | Вложенные свайперы Это сочетание вертикальных и горизонтальных горок. |
| 6 | Пользовательские элементы управления Он используется для настраиваемых элементов управления, чтобы выбрать любой слайд или провести пальцем по нему. |
| 7 | Ленивая загрузка Его можно использовать для мультимедийных файлов, загрузка которых требует времени. |
Описание
Браузер фотографий похож на компонент браузера фотографий iOS для отображения группы изображений, которые можно масштабировать и панорамировать. Для перехода между изображениями в фото-браузере используется Swiper Slider .
В следующей таблице показаны типы браузеров фотографий, используемые в framework7 -
| S.No | Типы и описание фото-браузеров |
|---|---|
| 1 | Создать экземпляр браузера фотографий Браузер фотографий можно создать и инициализировать только с помощью JavaScript. |
| 2 | Параметры браузера фотографий Framework7 предоставляет список параметров, которые используются в браузере фотографий. |
| 3 | Методы и свойства браузера фотографий Вы получите инициализированную переменную экземпляра для использования методов и свойств браузера фотографий после инициализации браузера фотографий. |
| 4 | Фотографии Массив При инициализации фото-браузера нужно передать массив с фотографиями / видео в параметре фотографий . |
| 5 | Шаблоны браузера фотографий Framework7 предоставляет вам множество шаблонов фото-браузера, которые вы можете передать при инициализации фото-браузера. |
Описание
Автозаполнение - это удобный для мобильных устройств и оптимизированный для сенсорного управления компонент Framework7, который может быть как раскрывающимся, так и автономным. Вы можете создать и инициализировать экземпляр Autocomplete с помощью метода JavaScript -
myApp.autocomplete(parameters)Где параметры - это обязательные объекты, используемые для инициализации экземпляра автозаполнения.
Параметры автозаполнения
В следующей таблице перечислены доступные параметры автозаполнения в Framework7 -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | openIn Он определяет, как открыть автозаполнение, которое можно использовать как раскрывающийся список, всплывающее окно или страницу. |
строка | страница |
| 2 | source Он использует экземпляр автозаполнения, поисковый запрос и функцию рендеринга для передачи сопоставленных элементов с массивом. |
функция (автозаполнение, запрос, рендеринг) | - |
| 3 | valueProperty Он определяет значение элемента для ключа соответствующего объекта элемента. |
строка | Я бы |
| 4 | limit Он отображает ограниченное количество элементов автозаполнения для каждого запроса. |
количество | - |
| 5 | preloader Предварительный загрузчик можно использовать для указания макета автозаполнения, задав для него значение true. |
логический | ложный |
| 6 | preloaderColor Он определяет цвет прелоадера. По умолчанию цвет - «черный». |
строка | - |
| 7 | value Определяет массив с выбранными по умолчанию значениями. |
массив | - |
| 8 | textProperty Он определяет значение элемента для ключа соответствующего объекта элемента, который можно использовать в качестве заголовка отображаемых параметров. |
строка | текст |
Автономные параметры автозаполнения
В следующей таблице перечислены доступные параметры автономного автозаполнения в Framework7.
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | opener Это строковый параметр или параметр элемента HTML, который откроет отдельную страницу автозаполнения. |
строка или HTMLElement | - |
| 2 | popupCloseText Он используется для закрытия всплывающего окна автозаполнения. |
строка | 'Закрыть' |
| 3 | backText Он предоставляет обратную ссылку, когда автозаполнение открывается как страница. |
строка | 'Назад' |
| 4 | pageTitle Он определяет заголовок страницы автозаполнения. |
строка | - |
| 5 | searchbarPlaceholderText Он определяет текст заполнителя панели поиска. |
строка | 'Поиск' |
| 6 | searchbarCancelText Он определяет текст кнопки отмены панели поиска. |
строка | 'отменить' |
| 7 | notFoundText Он отображает текст, когда соответствующий элемент не найден. |
строка | 'Ничего не найдено' |
| 8 | multiple Он позволяет выбрать множественный выбор, установив для него значение true. |
логический | ложный |
| 9 | navbarTheme Он определяет цветовую тему для навигационной панели. |
строка | - |
| 10 | backOnSelect Когда пользователь выбирает значение, автозаполнение будет закрыто, установив для него значение true. |
логический | ложный |
| 11 | formTheme Он определяет цветовую тему для формы. |
строка | - |
Параметры автозаполнения раскрывающегося списка
В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | input Это строка или элемент HTML, используемый для ввода текста. |
строка или HTMLElement | - |
| 2 | dropdownPlaceholderText Он определяет текст-заполнитель раскрывающегося списка. |
строка | - |
| 3 | updateInputValueOnSelect Вы можете обновить входное значение при выборе, установив для него значение true. |
логический | правда |
| 4 | expandInput Вы можете расширить ввод текста в виде списка , чтобы сделать полный экран широкого во выпадающих видимом, установив пункт-вход это истина. |
логический | ложный |
Функции обратного вызова автозаполнения
В приведенной ниже таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | onChange Всякий раз, когда значение автозаполнения изменяется, эта функция обратного вызова будет выполняться. |
функция (автозаполнение, значение) | - |
| 2 | onOpen Эта функция обратного вызова будет выполняться всякий раз, когда открывается автозаполнение. |
функция (автозаполнение) | - |
| 3 | onClose Всякий раз, когда автозаполнение закрывается, эта функция обратного вызова будет выполняться. |
функция (автозаполнение) | - |
Автозаполнение шаблонов
В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | navbarTemplate Это автономный шаблон автозаполнения навигационной панели. |
строка | - |
| 2 | itemTemplate Это отдельный элемент формы template7. |
строка | - |
| 3 | dropdownTemplate Это шаблон раскрывающегося списка template7. |
строка | - |
| 4 | dropdownItemTemplate Это элемент раскрывающегося списка template7. |
строка | - |
| 5 | 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 Он определяет экземпляр панели поиска автозаполнения. |
Автозаполнение свойств
В следующей таблице указаны методы автозаполнения, доступные в Framework7 -
| S.No | Свойства и описание |
|---|---|
| 1 | myAutocomplete.open() Он открывает автозаполнение, которое можно использовать как раскрывающийся список, всплывающее окно или страницу. |
| 2 | myAutocomplete.close() Он закрывает автозаполнение. |
| 3 | myAutocomplete.showPreloader() Он показывает предварительный загрузчик автозаполнения. |
| 4 | myAutocomplete.hidePreloader() Он скрывает предварительный загрузчик автозаполнения. |
| 5 | myAutocomplete.destroy() Он разрушает экземпляр предварительного загрузчика автозаполнения и удаляет все события. |
пример
В следующем примере демонстрируется использование скрытых в 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, и результат отобразится, как показано ниже.
Пример обеспечивает автозаполнение значений в простом раскрывающемся списке, раскрывающемся списке со всеми значениями, раскрывающемся списке с заполнителем, автономном автозаполнении и т. Д.
Описание
Средство выбора выглядит как встроенное средство выбора iOS, и это мощный компонент, который позволяет вам выбирать любые значения из списка, а также используется для создания настраиваемых средств выбора наложения. Вы можете использовать Picker как встроенный компонент или как наложение. Средство выбора наложения будет автоматически преобразовано в Popover на планшетах (iPad).
Используя следующий метод приложения, вы можете создать и инициализировать метод JavaScript:
myApp.picker(parameters)Где параметры - это обязательные объекты, используемые для инициализации экземпляра средства выбора, и это обязательный метод.
Параметры средства выбора
В следующей таблице указаны доступные параметры в сборщиках -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | container Строка с селектором CSS или HTMLElement, используемая для создания HTML-кода средства выбора для встроенных средств выбора. |
строка или HTMLElement | - |
| 2 | input Связанный элемент ввода помещается в строку с помощью селектора CSS или HTMLElement. |
строка или HTMLElement | - |
| 3 | scrollToInput Он используется для прокрутки области просмотра (содержимого страницы) ввода всякий раз, когда открывается средство выбора. |
логический | правда |
| 4 | inputReadOnly Используется для установки атрибута "только для чтения" на указанном входе. |
логический | правда |
| 5 | convertToPopover Он используется для преобразования модального окна выбора в Popover на больших экранах, таких как iPad. |
логический | правда |
| 6 | onlyOnPopover Вы можете открыть сборщик в Popover, включив его. |
логический | правда |
| 7 | cssClass Для выбора модального окна вы можете использовать дополнительное имя класса CSS. |
строка | - |
| 8 | closeByOutsideClick Вы можете закрыть средство выбора, щелкнув за пределами средства выбора или элемента ввода, включив метод. |
логический | ложный |
| 9 | toolbar Он используется для включения модальной панели инструментов средства выбора. |
логический | правда |
| 10 | toolbarCloseText Используется для кнопки «Готово / Закрыть» на панели инструментов. |
строка | 'Готово' |
| 11 | toolbarTemplate Это HTML-шаблон панели инструментов, по умолчанию это HTML-строка со следующим шаблоном - |
строка | - |
Конкретные параметры средства выбора
В следующей таблице перечислены доступные конкретные параметры средства выбора -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | rotateEffect Он включает эффект 3D-вращения в палитре. |
логический | ложный |
| 2 | momentumRatio Когда вы отпускаете пикер после быстрого касания и движения, он дает больше импульса. |
количество | 7 |
| 3 | updateValuesOnMomentum Используется для обновления средств выбора и ввода значений во время импульса. |
логический | ложный |
| 4 | updateValuesOnTouchmove Используется для обновления средств выбора и вводимых значений во время сенсорного перемещения. |
логический | правда |
| 5 | value Массив имеет свои начальные значения, а также каждый элемент массива представляет значение связанного столбца. |
массив | - |
| 6 | formatValue Функция используется для форматирования входного значения и должна возвращать новое / отформатированное строковое значение. Эти значения и displayValues являются массив соответствующего столбца. |
функция (p, значения, displayValues) | - |
| 7 | cols Каждый элемент массива представляет собой объект с параметрами столбца. |
массив | - |
Обратные вызовы параметров средства выбора
В следующей таблице показаны списки функций обратного вызова, доступных в средствах выбора -
| S.No | Обратные вызовы и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | onChange Функция обратного вызова будет выполняться всякий раз, когда значение средства выбора изменяется, а значения и displayValues являются массивами связанного столбца. |
функция (p, значения, displayValues) | - |
| 2 | onOpen Функция обратного вызова будет выполняться всякий раз, когда открывается средство выбора. |
функция (p) | - |
| 3 | onClose Функция обратного вызова будет выполняться всякий раз, когда средство выбора закрывается. |
функция (p) | - |
Параметры столбца
В момент настройки Picker нам нужно передать параметр cols . Он представлен как массив, где каждый элемент является объектом с параметрами столбца -
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | values Вы можете указать значения строковых столбцов с помощью массива. |
массив | - |
| 2 | displayValues Он имеет массив со значениями строковых столбцов, и он будет отображать значение из параметра значений , когда он не указан. |
массив | - |
| 3 | cssClass Имя класса CSS, используемое для установки в контейнере HTML столбца. |
строка | - |
| 4 | textAlign Он используется для установки выравнивания текста значений столбца и может быть «влево», «по центру» или «вправо» . |
строка | - |
| 5 | width По умолчанию ширина рассчитывается автоматически. Если вам нужно исправить ширину столбцов в сборщике с зависимыми столбцами, которые должны быть в пикселях . |
количество | - |
| 6 | divider Он используется для столбца, который должен быть визуальным разделителем, он не имеет значений. |
логический | ложный |
| 7 | content Используется для указанного столбца- разделителя (divider: true) с содержимым столбца. |
строка | - |
Параметр обратных вызовов столбца
| S.No | Обратные вызовы и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | onChange Всякий раз, когда значение столбца изменится, в это время будет выполняться функция обратного вызова. Значение и displayValue представляют текущий столбец значение и displayValue . |
функция (p, значение, displayValue) | - |
Свойства средства выбора
Переменная Picker имеет множество свойств, которые приведены в следующей таблице -
| S.No | Свойства и описание |
|---|---|
| 1 | myPicker.params Вы можете инициализировать переданные параметры с помощью объекта. |
| 2 | myPicker.value Выбранное значение для каждого столбца представлено массивом элементов. |
| 3 | myPicker.displayValue Выбранное отображаемое значение для каждого столбца представлено массивом элементов. |
| 4 | myPicker.opened Когда средство выбора открыто, оно принимает истинное значение. |
| 5 | myPicker.inline Когда средство выбора встроено, оно принимает значение true . |
| 6 | myPicker.cols Столбцы средства выбора имеют свои собственные методы и свойства. |
| 7 | myPicker.container Экземпляр Dom7 используется для контейнера HTML. |
Методы выбора
У переменной выбора есть полезные методы, которые приведены в следующей таблице -
| S.No | Методы и описание |
|---|---|
| 1 | myPicker.setValue(values, duration) Используйте для установки нового значения средства выбора. Значения находятся в массиве, где каждый элемент представляет значение для каждого столбца. duration - продолжительность перехода в мс. |
| 2 | myPicker.open() Используйте, чтобы открыть Picker. |
| 3 | myPicker.close() Используйте, чтобы закрыть Picker. |
| 4 | 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 Дайте текущий порядковый номер, который выбран / активен. |
Колоночные методы
Полезные методы столбца приведены в следующей таблице -
| S.No | Методы и описание |
|---|---|
| 1 | col.setValue(value, duration) Используется для установки нового значения для текущего столбца. Значение должно быть новое значение и продолжительность является длительность перехода в мс. |
| 2 | col.replaceValues(values, displayValues) Используется для замены значений столбца и displayValues новыми. |
Он используется для доступа к экземпляру Picker из его HTML-контейнера всякий раз, когда вы инициализируете Picker как встроенный Picker.
var myPicker = $$('.picker-inline')[0].f7Picker;Существуют различные типы сборщиков, как указано в следующей таблице -
| S.No | Типы и описание вкладок |
|---|---|
| 1 | Средство выбора с одним значением Это мощный компонент, позволяющий выбирать любые значения из списка. |
| 2 | Два значения и эффект трехмерного поворота В палитре вы можете использовать эффект 3D-вращения. |
| 3 | Зависимые значения Значения для указанного элемента зависят друг от друга. |
| 4 | Настраиваемая панель инструментов Вы можете использовать один или несколько сборщиков на одной странице для настройки. |
| 5 | Встроенный сборщик / Дата и время Вы можете выбрать количество значений во встроенном средстве выбора. Например, у даты есть дата, месяц, год, а у времени есть часы, минуты, секунды. |
Описание
Компонент Calendar позволяет легко обрабатывать даты и может использоваться как встроенный или как накладываемый компонент. Накладываемый календарь будет автоматически преобразован в всплывающее окно на планшетах.
Календарь можно создать и инициализировать только с помощью JavaScript. Вам необходимо использовать метод связанного приложения, как показано ниже -
myApp.calendar(parameters)- Этот метод возвращает инициализированный экземпляр календаря. Он принимает объект в качестве параметров.
В следующей таблице показано использование календаря в Framework7 -
| S.No | Использование и описание календаря |
|---|---|
| 1 | Параметры календаря Framework7 предоставляет список параметров, которые используются с календарем. |
| 2 | Методы и свойства календаря После инициализации календаря вы получите инициализированную переменную экземпляра для использования методов и свойств календаря. |
| 3 | Доступ к экземпляру календаря Можно получить доступ к экземпляру календаря из его HTML-контейнера, если вы инициализируете календарь как встроенный. |
Описание
Это специальный компонент, используемый для обновления (перезагрузки) содержимого страницы путем его извлечения.
Следующий код показывает, как обновить содержимое страницы -
<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" - Это дополнительный атрибут, который позволяет вам установить пользовательское расстояние триггера «тянуть для обновления», его значение по умолчанию - 44 пикселя.
Потяните, чтобы обновить события
В «Потяните для обновления» есть некоторые события JavaScript, которые приведены в следующей таблице -
| S.No | Описание события | Цель |
|---|---|---|
| 1 | pullstart Он будет запускаться всякий раз, когда вы начнете тянуть, чтобы обновить контент. |
Потяните, чтобы обновить содержимое. |
| 2 | pullmove Он срабатывает, когда вы тянете, чтобы обновить контент. |
Потяните, чтобы обновить содержимое. |
| 3 | pullend Он будет запускаться всякий раз, когда вы отпустите кнопку для обновления содержимого. |
Потяните, чтобы обновить содержимое. |
| 4 | refresh Это событие будет инициировано, когда запрос на обновление перейдет в состояние «обновление» . |
Потяните, чтобы обновить содержимое. |
| 5 | refreshdone Он будет запущен после обновления и вернется в исходное состояние. Это будет сделано после вызова метода pullToRefreshDone . |
Потяните, чтобы обновить содержимое. |
Есть методы приложения, которые можно использовать с Pull to Refresh.
| S.No | Методы и описание приложения |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Он используется для сброса содержимого по запросу для обновления . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Он используется для запуска обновления по указанному запросу для обновления содержимого . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Он используется для уничтожения / отключения извлечения для обновления по указанному запросу для обновления содержимого . |
| 4 | myApp.initPullToRefresh(ptrContent) Он используется для инициализации / включения извлечения для обновления содержимого . |
Где ptrContent используется для 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>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 показывает бесконечную прокрутку -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>Вышеупомянутый макет содержит следующие классы -
page-content infinite-scroll - Используется для контейнера с бесконечной прокруткой.
data-distance - Этот атрибут позволяет вам настроить расстояние от нижней части страницы (в пикселях) для запуска события бесконечной прокрутки, его значение по умолчанию - 50пикс.
Если вы хотите использовать бесконечную прокрутку вверху страницы, вам нужно добавить дополнительный класс «бесконечная прокрутка вверх» в «содержимое страницы» -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Бесконечные события прокрутки
infinite- Он используется для запуска, когда прокрутка страницы достигает указанного расстояния до конца. Он будет нацелен на 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, и результат отобразится, как показано ниже.
Пример позволяет загружать дополнительный контент, когда прокрутка страницы достигает указанного расстояния до конца.
Описание
Сообщения являются компонентом 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 | messages-content Это обязательный дополнительный класс, добавляемый к "page-content" и используемый для оболочки сообщений. |
| 2 | messages Это обязательный элемент для пузырей сообщений. |
| 3 | messages-date Он использует контейнер штампа даты для отображения даты и времени отправленного или полученного сообщения. |
| 4 | message Это одно сообщение для отображения. |
Внутренние части одного сообщения
В следующей таблице показаны классы внутренних частей простых сообщений с описанием.
| S.No | Классы и описание |
|---|---|
| 1 | message-name Он предоставляет имя отправителя. |
| 2 | message-text Обозначьте текст пузырьковым типом. |
| 3 | message-avatar В нем указывается аватар отправителя. |
| 4 | message-label Он определяет текстовую метку под пузырем. |
Дополнительные классы для Single Message Container
В следующей таблице показаны дополнительные классы для описания контейнера одного сообщения.
| S.No | Классы и описание |
|---|---|
| 1 | message-sent Он указывает, что сообщение было отправлено пользователем, и отображается с зеленым цветом фона справа. |
| 2 | message-received Он используется для отображения одиночного сообщения, указывающего, что сообщение было получено пользователем, и остается слева с серым цветом фона. |
| 3 | message-pic Это дополнительный класс для вывода изображения с одним сообщением. |
| 4 | message-with-avatar Это дополнительный класс для отображения одного сообщения (полученного или отправленного) с аватаром. |
| 5 | message-with-tail Вы можете добавить пузырек для отдельного сообщения (полученного или отправленного). |
Дополнительные доступные классы для одного сообщения
В следующей таблице показаны доступные классы для одного сообщения с описанием.
| S.No | Классы и описание |
|---|---|
| 1 | message-hide-name Это дополнительный класс для сокрытия имени сообщения для отдельного сообщения (полученного или отправленного). |
| 2 | message-hide-avatar Это дополнительный класс для скрытия аватара сообщения для отдельного сообщения (полученного или отправленного). |
| 3 | message-hide-label Это дополнительный класс для скрытия метки сообщения для отдельного сообщения (полученного или отправленного). |
| 4 | message-last Вы можете использовать этот класс, чтобы указать последнее полученное или отправленное сообщение в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного). |
| 5 | message-first Вы можете использовать этот класс, чтобы указать первое полученное или первое отправленное сообщение в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного). |
Инициализация сообщений с помощью JavaScript
Вы можете инициализировать сообщения с помощью JavaScript, используя следующий метод -
myApp.messages(messagesContainer, parameters)Метод принимает два варианта:
messagesContainer - Это обязательный элемент HTML или строка, которая включает элемент HTML контейнера сообщений.
parameters - Определяет объект с параметрами сообщений.
Параметры сообщений
В следующей таблице приведены параметры сообщений с описанием.
| S.No | Параметр и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | autoLayout Он добавляет дополнительные необходимые классы к каждому сообщению, включив его. |
логический | правда |
| 2 | newMessagesFirst Вы можете отображать сообщение вверху, а не внизу, включив его. |
логический | ложный |
| 3 | messages Он отображает массив сообщений, в котором каждое сообщение должно быть представлено как объект с параметрами сообщения. |
массив | - |
| 4 | messageTemplate Он отображает шаблон отдельного сообщения. |
строка | - |
Свойства сообщений
В следующей таблице показаны свойства сообщений с описанием.
| S.No | Описание недвижимости |
|---|---|
| 1 | myMessages.params Вы можете инициализировать переданные параметры с помощью объекта. |
| 2 | myMessages.container Определяет элемент DOM7 с HTML-контейнером панели сообщений. |
Методы сообщений
В следующей таблице показаны методы сообщений с описанием.
| S.No | Метод и описание |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Сообщение можно добавить в начало или в конец с помощью параметра метода. Он имеет следующие параметры -
|
| 2 | myMessages.appendMessage(messageParameters, animate); Он добавляет сообщение в конец контейнера сообщений. |
| 3 | myMessages.prependMessage(messageParameters, animate); Он добавляет сообщение в начало контейнера сообщений. |
| 4 | myMessages.addMessages(messages, method, animate); Вы можете добавить несколько сообщений одновременно. У него есть следующий параметр -
|
| 5 | myMessages.removeMessage(message); Он используется для удаления сообщения. У него есть следующий параметр -
|
| 6 | myMessages.removeMessages(messages); Вы можете удалить несколько сообщений. У него есть следующий параметр -
|
| 7 | myMessages.scrollMessages(); Вы можете прокручивать сообщения сверху вниз и наоборот в зависимости от первого параметра нового сообщения. |
| 8 | myMessages.layout(); К сообщениям можно применить автоматический макет. |
| 9 | myMessages.clean(); Он используется для очистки сообщений. |
| 10 | myMessages.destroy(); Он используется для уничтожения сообщений. |
Параметры одного сообщения
В следующей таблице показаны параметры для одного сообщения с описанием.
| S.No | Параметр и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | text Он определяет текст сообщения, который может быть строкой HTML. |
строка | - |
| 2 | name В нем указывается имя отправителя. |
строка | - |
| 3 | avatar Он определяет строку URL аватара отправителя. |
строка | - |
| 4 | time Он определяет строку времени сообщения, например «9:45 AM», «18: 35». |
строка | - |
| 5 | type Он предоставляет тип сообщения, может ли оно быть отправлено или получено. |
строка | послал |
| 6 | label Он определяет метку сообщения. |
строка | - |
| 7 | day Он дает строку дня сообщения, такую как «воскресенье», «понедельник», «вчера» и т. Д. |
строка | - |
Инициализация сообщений с помощью 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, и результат отобразится, как показано ниже.
Когда вы вводите сообщение в окно сообщения и нажимаете кнопку «Отправить», оно указывает, что ваше сообщение было отправлено, и отображается с зеленым цветом фона справа.
Сообщение, которое вы получите, появится слева на сером фоне вместе с именем отправителя.
Описание
Framework7 предоставляет специальную панель инструментов с изменяемым размером для работы с системой обмена сообщениями в приложении.
Следующий код показывает макет панели сообщений -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>В панели сообщений внутренняя часть «страницы» очень важна и находится справа от «содержимого-сообщений» -
<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 контейнера панели сообщений.
parameters - Указывает объект с параметрами панели сообщений.
Например -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Параметр панели сообщений
maxHeight- Он используется для установки максимальной высоты текстового поля и будет изменяться в размере в зависимости от количества текста. Тип параметра - число, а значение по умолчанию - null .
Свойства панели сообщений
В следующей таблице показаны свойства панели сообщений -
| S.No | Свойства и описание |
|---|---|
| 1 | myMessagebar.params Вы можете указать объект с переданными параметрами инициализации. |
| 2 | myMessagebar.container Вы можете указать элемент dom7 с элементом HTML контейнера панели сообщений. |
| 3 | myMessagebar.textarea Вы можете указать элемент dom7 с помощью элемента HTML textarea панели сообщений. |
Методы панели сообщений
В следующей таблице показаны методы панели сообщений -
| S.No | Методы и описание |
|---|---|
| 1 | myMessagebar.value(newValue); Он устанавливает значение / текст текстовой области панели сообщений и возвращает значение текстовой области панели сообщений, если newValue не указано. |
| 2 | myMessagebar.clear(); Он очищает текстовое поле и обновляет / сбрасывает размер. |
| 3 | myMessagebar.destroy(); Он уничтожает экземпляр панели сообщений. |
Инициализировать панель сообщений с помощью HTML
Вы можете инициализировать messagebar с использованием HTML без методов и свойств JavaScript пути добавления messagebar-INIT класса к .messagebar и вы можете передать необходимые параметры с помощью DATA- атрибутов.
Следующий код определяет инициализацию панели сообщений с помощью 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');Вы можете увидеть пример панели сообщений, которая объясняется по этой ссылке.
Описание
Уведомления используются для отображения необходимых сообщений, которые выглядят как push-уведомления (или локальные) iOS.
В следующей таблице подробно показано использование уведомлений -
| S.No | Использование уведомлений и описание |
|---|---|
| 1 | Уведомления JavaScript API Уведомления также можно добавить или закрыть с помощью JavaScript с помощью связанных методов приложения. |
| 2 | Макет уведомлений Уведомления Framework7 будут добавлены с использованием JavaScript. |
| 3 | Пример iOS Framework7 позволяет использовать различные типы уведомлений в макете iOS. |
| 4 | Пример материала Уведомления Framework7 также можно использовать в макете материала. |
Описание
Ленивая загрузка задерживает процесс загрузки изображения на данной странице. Ленивая загрузка улучшает производительность прокрутки, ускоряет загрузку страницы и экономит трафик.
Для правильной работы элементы и изображения с отложенной загрузкой должны находиться внутри прокручиваемого <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, и результат отобразится, как показано ниже.
В примере указывается отложенная загрузка изображений, при которой изображения будут загружаться на страницу при их прокрутке вниз.
Описание
Framework7 предоставляет различные цветовые темы для ваших приложений.
Цветовая тема предоставляет различные типы цветов темы, используемые для бесперебойной работы с приложениями, как указано в таблице ниже -
| S.No | Тип и описание темы |
|---|---|
| 1 | Цвета тем iOS Для приложения можно использовать 10 различных цветовых тем iOS по умолчанию. |
| 2 | Цвета темы материала 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] - Устанавливает предопределенный цвет границы на блоке или элементе.
Описание
Линия роста волос - это класс, который добавляет границу в 1 пиксель вокруг изображений с помощью класса границы. С выпуском 1.x, hairlines пересмотрели работу с псевдоэлементами : after и : before вместо использования границ CSS.
Прически содержит следующие правила -
:after- Этот псевдоэлемент используется для нижних и правых линий волос.
:before- Этот псевдоэлемент используется для верхней и левой линий волос.
В следующем фрагменте кода показано использование элемента : after .
.navbar:after {
background-color: red;
}Следующий фрагмент кода удаляет нижнюю панель инструментов для волос -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}«безграничный» класс
Линия роста волос будет удалена с помощью класса без границ, и она поддерживается на панели навигации, панели инструментов, карточке и ее элементах.
Следующий код используется для удаления линии роста волос с панели навигации -
<div class = "navbar no-border">
...
</div>Описание
Template7 - это легкий движок JavaScript, ориентированный на мобильные устройства, который представляет Ajax и динамические страницы как шаблоны Template7 с указанным контекстом и не требует дополнительных скриптов. Template7 связан с Framework7 как легкий механизм шаблонов по умолчанию, который работает быстрее для приложений.
Спектакль
Процесс компиляции строки в функцию JS - самый медленный сегмент template7. Следовательно, вам не нужно компилировать шаблон несколько раз, достаточно одного раза.
//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 -
Или же
bower install template7Описание
В 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" - Шаблон доступен через идентификатор, и это обязательный идентификатор шаблона.
Для автоматической компиляции вам необходимо включить инициализацию приложения, передав следующий параметр -
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
});Описание
Template7 является подвижным первым шаблонным движком JavaScript с handlebars.js как синтаксис. Это сверхлегкий и невероятно быстрый механизм шаблонов по умолчанию в Framework7.
Во-первых, нам нужно передать следующий параметр при инициализации приложения, который отображает все Ajax и динамические страницы как шаблон Template7:
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Шаблон 7 страниц Использование и описание |
|---|---|
| 1 | Шаблоны / данные страниц Вы можете передать необходимые данные / контекст для определенных страниц, указав все данные страниц в параметре template7Data , отправляемом при инициализации приложения. |
| 2 | Передать настраиваемый контекст Framework7 позволяет передавать настраиваемый контекст любой динамической странице или любому загруженному Ajax. |
| 3 | Загрузить шаблоны напрямую Вы можете визуализировать и загружать шаблоны на лету как динамические страницы. |
| 4 | URL-запрос Если вы используете 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>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});любит.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, и результат отобразится, как показано ниже.
В примере представлены ссылки, которые отображают информацию о пользователе, такую как сведения о пользователе, лайки пользователя, когда вы нажимаете на эти ссылки.
Описание
Когда вы нажимаете ссылки и кнопки, они выделяются. Это делается активным состоянием в Framework7.
- Он ведет себя как собственное приложение, а не как веб-приложение.
- В нем есть встроенная библиотека быстрых кликов, и ее нужно включить.
- Класс активного состояния такой же, как и селектор CSS : active .
- Активное состояние включается добавлением класса 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;
}Описание
Событие удержания касания используется для запуска (включения) после длительного и завершения события касания, поэтому оно только называется событием удержания касания . Tab Удерживать является встроеннымFast Clicks библиотека.
Следующие параметры используются для отключения или включения и настраиваются по умолчанию:
| S.No | Параметр и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 | tapHold Чтобы включить события удержания касания, если для него установлено значение true. |
логический | ложный |
| 2 | tapHoldDelay Он определяет продолжительность удержания касания перед запуском события удержания касания на целевом элементе. |
количество | 750 |
| 3 | tapHoldPreventClicks Событие удержания касания не будет запущено после щелчка по событию. |
логический | правда |
Следующий код используется для включения событий удержания касания -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Описание
Touch Ripple - это эффект, который поддерживается только в теме материала Framework7. По умолчанию он включен в теме материалов, и вы можете отключить его с помощью параметра materialRipple: false .
Элементы пульсации
Вы можете включить элементы пульсации, чтобы они соответствовали некоторым селекторам CSS, таким как -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox и т. д.
Они указываются в параметре materialRippleElements . Вам нужно включить пульсацию касания , добавить селектор элемента в параметр materialRippleElements, чтобы использовать эффект пульсации, или просто использовать класс пульсации .
Цвет волны пульсации
Цвет ряби на элементе можно изменить, добавив к элементу класс ripple- [color] .
Например -
<a href = "#" class = "button ripple-orange">Ripple Button</a>или вы можете определить цвет волны пульсации с помощью CSS, как показано ниже -
.button .ripple-wave {
background-color: #FFFF00;
}Отключить элементы пульсации
Вы можете отключить рябь для некоторых указанных элементов, добавив к этим элементам класс no-ripple . Например -
<a href = "#" class = "button no-ripple">Ripple Button</a>