在这个基本APP中我们使用iOS主题。
我们首选需要创建一个 index.html 文件。
这是一个 iOS 单页应用，有一个 view, left panel 和 动态穿透布局的navbar 和 toolbar:
<!DOCTYPE html> <html> <head> <!-- Required meta tags--> <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"> <!-- Your app title --> <title>My App</title> <!-- Path to Framework7 iOS CSS theme styles--> <link rel="stylesheet" href="path/to/framework7.ios.min.css"> <!-- Path to Framework7 iOS related color styles --> <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="path/to/my-app.css"> </head> <body> <!-- Status bar overlay for full screen mode (PhoneGap) --> <div class="statusbar-overlay"></div> <!-- Panels overlay--> <div class="panel-overlay"></div> <!-- Left panel with reveal effect--> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p>Left panel content goes here</p> </div> </div> <!-- Views --> <div class="views"> <!-- Your main view, should have "view-main" class --> <div class="view view-main"> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <!-- We need cool sliding animation on title element, so we have additional "sliding" class --> <div class="center sliding">Awesome App</div> <div class="right"> <!-- Right link contains only icon - additional "icon-only" class Additional "open-panel" class tells app to open panel when we click on this link --> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a> </div> </div> </div> <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes--> <div class="pages navbar-through toolbar-through"> <!-- Page, "data-page" contains page name --> <div data-page="index" class="page"> <!-- Scrollable page content --> <div class="page-content"> <p>Page content goes here</p> <!-- Link to another page --> <a href="about.html">About app</a> </div> </div> </div> <!-- Bottom Toolbar--> <div class="toolbar"> <div class="toolbar-inner"> <!-- Toolbar links --> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> </div> </div> <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>
我们写好布局，引用了 Framework7 的JS和CSS之后，我们需要初始化 APP 和 View.
在我们的 my-app.js 文件中这样写：
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});我们添加一个 "about app"页面，放在 about.html 文件中
<!-- We don't need full layout in this file because this page will be parsed with Ajax. It is just enough to put here .navbar and .page--> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"> <i class="icon icon-back-blue"></i> <span>Back</span> </a> </div> <div class="center sliding">About</div> <div class="right"> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a> </div> </div> </div> <div class="pages"> <div data-page="about" class="page"> <div class="page-content"> <div class="content-block"> <p>Here is About page!</p> <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p> </div> </div> </div> </div>
假设我们需要在 about 页面中执行JS代码。因为 about.html 页面是通过JS加载的，我们不能通过在 about.html 中添加 <script> 标签的方式来添加JS代码，因为script标签会直接被忽略。所说，Framework7 提供了简单的回调函数，我们可以在 my-app.js中使用：
// Initialize app and store it to myApp variable for futher access to its methods
var myApp = new Framework7();
// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});
// Now we need to run the code that will be executed only for About page.
// For this case we need to add event listener for "pageInit" event
// Option 1. Using one 'pageInit' event handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
if (page.name === 'about') {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
}
})
// Option 2. Using live 'pageInit' event handlers for each page
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
})<link rel="stylesheet" href="framework7.ios.min.css"> <link rel="stylesheet" href="framework7.ios.colors.min.css"> <script type="text/javascript" src="framework7.min.js"></script>
<!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>My App</title>
<link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/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">
<div class="page-content">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center">Static Navbar</div>
<div class="right"></div>
</div>
</div>
<div class="content-block">
<p><a href="/api/framework7/bars-static-about.html">About page</a></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. Integer sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. Sed posuere a orci id imperdiet.</p>
</div>
<div class="toolbar">
<div class="toolbar-inner"><a href="#" class="link">Hello</a><a href="#" class="link">World</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ku.shouce.ren/libs/fk7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view');
</script>
</body>
</html