|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<!DOCTYPE html><html> <head> <!-- meta标签设置--> <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"> <!-- app标题 --> <title>hangge</title> <!-- 使用iOS CSS主题样式--> <link rel="stylesheet" href="css/framework7.ios.min.css"> <!-- iOS related颜色样式 --> <link rel="stylesheet" href="css/framework7.ios.colors.min.css"> <!-- 自定义样式--> <link rel="stylesheet" href="css/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> <!-- 左侧面板，显示隐藏时带有效果（reveal effect）--> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p>这里放置左测面板内容。</p> </div> </div> <!-- 所有的Views视图 --> <div class="views"> <!-- 主视图（需要有"view-main"样式） --> <div class="view view-main"> <!-- 顶部导航栏 --> <div class="navbar"> <div class="navbar-inner"> <!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） --> <div class="center sliding">hangge.com</div> <div class="right"> <!-- 导航栏右侧只有一个图标（"icon-only"样式） “open-panel”样式表示点击时打开左侧面板 --> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> </div> </div> </div> <!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar， 所以这里添加额外样式（navbar-through和toolbar-through）--> <div class="pages navbar-through toolbar-through"> <!-- 首页, "data-page" 里设置页面名字 --> <div data-page="index" class="page"> <!-- 支持滚动的页面内容 --> <div class="page-content"> <p>这里是首页内容。</p> <!-- 导航到另一个页面 --> <a href="about.html">跳转到“关于”页面</a> </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框架的js--> <script type="text/javascript" src="js/framework7.min.js"></script> <!-- 你的应用的js --> <script type="text/javascript" src="js/my-app.js"></script> </body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!-- 这个页面由于会通过Ajax加载，所以我们不需要实现完整的布局，只需添加.navbar和.page即可--><!-- 顶部导航栏 --><div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"> <i class="icon icon-back"></i> <span>返回</span> </a> </div> <div class="center sliding">关于</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"> <p>欢迎访问 www.hangge.com</p> <p>航歌-做最好的开发者知识平台。分享各种移动应用，桌面应用，web应用等编程开发经验。 随时更新最新的技术文章，值得您每天都来看看。</p> </div> </div> </div></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
// 初始化 appvar myApp = new Framework7();// 为便于使用，自定义DOM库名字为$$var $$ = Dom7;// 添加视图var mainView = myApp.addView(‘.view-main‘, { // 让这个视图支持动态导航栏 dynamicNavbar: true});// 下面代码是给“关于”页面使用的（关于页面加载完毕后触发）// 方式1：通过页面回调 (推荐):myApp.onPageInit(‘about‘, function (page) { myApp.alert(‘"关于"页面加载完毕1!‘);})// 方式2：通过pageInit事件处理所有页面$$(document).on(‘pageInit‘, function (e) { // 获取页面数据 var page = e.detail.page; //判断是否是“关于”页面 if (page.name === ‘about‘) { myApp.alert(‘"关于"页面加载完毕2!‘); }})// 方式2：通过pageInit事件处理所有页面(过滤出 data-page 属性为about的页面)$$(document).on(‘pageInit‘, ‘.page[data-page="about"]‘, function (e) { myApp.alert(‘"关于"页面加载完毕3!‘);}) |
Framework7 - 入门教程（安装、配置、创建一个H5应用）
原文：https://www.cnblogs.com/Free-Thinker/p/10948169.html