Базовые шаблоны framework7 для iOS и Android версий.
Скачать framework7 можно тут
Простой шаблон для iOS версии выглядит так:
<!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>Заголовок приловения</title> <!-- Подключение стилей iOS темы framework7 --> <link rel="stylesheet" href="lib/framework7.ios.min.css"> <link rel="stylesheet" href="lib/framework7.ios.colors.min.css"> <!-- Подключение собственных стилей --> <link rel="stylesheet" href="lib/my-app.css"> </head> <body> <!-- Вид --> <div class="views"> <!-- Главный вид --> <div class="view view-main"> <!-- Верхняя навигация --> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">Название приложения</div> </div> </div> <!-- Контейнер для контента на странице. Добавлены классы т.к. используются зафиксированные navbar и toolbar --> <div class="pages navbar-through toolbar-through"> <!-- Содержимое страницы, в "data-page" задается название страницы --> <div data-page="index" class="page"> <!-- Контент страницы --> <div class="page-content"> <p>Тут расположен контент страницы</p> </div> </div> </div> <!-- Нижний блок --> <div class="toolbar"> <div class="toolbar-inner"> <a href="#" class="link">Ссылка 1</a> <a href="#" class="link">Ссылка 2</a> </div> </div> </div> </div> <!-- Путь до Framework7 Library JS --> <script type="text/javascript" src="lib/framework7.min.js"></script> <!-- Путь до собственного скрипта --> <script type="text/javascript" src="lib/my-app.js"></script> </body> </html>
Для Android версии нужно подключить другой файл стилей и js framework7
Шаблон страницы с использование framework7 для Android будет таким:
<!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"> <!-- Тема для statusbar --> <meta name="theme-color" content="#2196f3"> <!-- Заголовок приложения --> <title>Заголовок приловения</title> <!-- Подключение стилей Android темы framework7 --> <link rel="stylesheet" href="lib/framework7.material.min.css"> <link rel="stylesheet" href="lib/framework7.material.colors.min.css"> <!-- Подключение собственных стилей --> <link rel="stylesheet" href="lib/my-app.css"> </head> <body> <!-- Вид --> <div class="views"> <!-- Главный вид --> <div class="view view-main"> <!-- Контейнер для контента на странице. Добавлены классы т.к. используются зафиксированные navbar и toolbar --> <div class="pages navbar-fixed toolbar-fixed"> <!-- Содержимое страницы, в "data-page" задается название страницы --> <div data-page="index" class="page"> <!-- ерхний блок в теме Android должен быть внутри страницы--> <div class="navbar"> <div class="navbar-inner"> <div class="center">Название приложения</div> </div> </div> <!-- Нижний блок в теме Android должен быть внутри страницы--> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <!-- Toolbar links --> <a href="#" class="link">Ссылка 1</a> <a href="#" class="link">Ссылка 2</a> </div> </div> <!-- Контент страницы --> <div class="page-content" data-page="toolbar-bottom" > <p>Тут расположен контент страницы</p> </div> </div> </div> </div> </div> <!-- Путь до Framework7 Library JS --> <script type="text/javascript" src="lib/framework7.min.js"></script> <!-- Путь до собственного скрипта --> <script type="text/javascript" src="lib/my-app.js"></script> </body> </html>
Осталось проинициализировать приложение. и шаблон будет готов. Для этого в файл my-app.js нужно добавить следующий код:
var myApp = new Framework7(); var $$ = Dom7; // Добавляем вид var mainView = myApp.addView('.view-main', { // Because we want to use dynamic navbar, we need to enable it for this view: dynamicNavbar: true });
Посмотреть это в живую можно по ссылке для Android и для iOS
Комментарии