在浏览器中我们可以这样使用framework7,完整代码如下：
<!DOCTYPE html>
<html lang="en">
<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>
<!-- Path to Framework7 Library CSS-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.ios.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.ios.colors.min.css">
</head>
<body class="bg-grey">
<!-- Status bar overlay for fullscreen mode-->
<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="">
</div>
<div class="list-block">
<ul>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu1</div>
</div>
</div>
</a>
</li>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu2</div>
</div>
</div>
</a>
</li>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu3</div>
</div>
</div>
</a>
</li>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu4</div>
</div>
</div>
</a>
</li>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu5</div>
</div>
</div>
</a>
</li>
<li>
<a href="exhibitions.html" class="item-link close-panel bg-transparent">
<div class="item-content">
<div class="item-media"><i class="icon app_icon app_icon__menu"></i></div>
<div class="item-inner">
<div class="item-title color-yellow">menu6</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Right panel with cover effect-->
<div class="panel panel-right panel-cover">
<div class="content-block">
<p>Right panel content goes here</p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<div class="navbar bg-black color-yellow">
<div class="navbar-inner">
<div class="center sliding">.Test App.</div>
</div>
</div>
<!-- Pages, because we need 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" data-template="index">
<!-- Scrollable page content-->
<div class="page-content bg-grey paddingBottom0">
<div class="content-block margin0">
<a href="#" data-template="about" data-context-name="about" class="item-link item-content">
<div class="item-inner">
<div class="item-title">About Me</div>
</div>
</a>
<a href="#" data-template="notMe" data-context-name="about" class="item-link item-content">
<div class="item-inner">
<div class="item-title">This is not me</div>
</div>
</a>
</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">
<p>Hello, my name is {{name}}. I am {{age}} years old and i am working as {{position}} at {{company}}.</p>
<p>I have a lot of interests: {{#if interests}}{{join interests delimeter=", "}}{{/if}}</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/template7" id="notMe">
<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">Not 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">
<p>This is not me but this is me but for test purpose only i have mentioned like this is not me. If you believe that this is not me then you will be fooled. :P</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script >
// Let's register Template7 helper so we can pass json string in links
Template7.registerHelper('json_stringify', function (context) {
return JSON.stringify(context);
});
var myName = "Travis Wagner";
// Initialize your app
var myApp = new Framework7({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled pages rendering using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
// Another plain data object, used in "about" link in data-contextName object
about: {
name: myName,
age: 32,
position: 'CEO',
company: 'Google',
interests: ['swimming', 'music', 'JavaScript', 'iMac', 'iOS apps', 'sport'] } } });
// Export selectors engine
var $$ = Dom7;
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true });
// Callbacks to run specific code for specific pages, for example for About page:
myApp.onPageInit('about', function (page) {
// run createContentPage func after link was clicked
$$('.create-page').on('click', function () {
createContentPage();
});
});
$(document).ready(function () {
function isiPhone() {
return (
navigator.platform.indexOf('iPhone') != -1 ||
navigator.platform.indexOf('iPod') != -1 ||
navigator.platform.indexOf('iPad') != -1 ||
navigator.platform.indexOf('MacIntel') != -1 ||
navigator.platform.indexOf('Mac OS X') != -1);
}
if (isiPhone()) {
$('body').addClass('apple');
$("#introMessage").text("You are using an Apple device, so the theme is iOS.");
} else {
$('body').addClass('not-apple');
$("#appleStyle").replaceWith('<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.material.min.css">');
$("#appleColors").replaceWith('<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.material.colors.min.css">');
$("#introMessage").text("You are using a PC or Android device, so the theme is Material Design.");
}
});
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
为啥所有的照片分辨率提升工具都会修改照片上的图案细节？
js如何在浏览器中将webm视频的声音分离为单独音频？
微信小程序如何播放第三方域名url的mp4视频？
ai多模态大模型能实时识别视频中的手语为文字吗？
如何远程调试别人的chrome浏览器获取调试信息？
为啥js打开新网页window.open设置窗口宽高无效？
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音？
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载？
python如何直接获取抖音短视频的音频文件url？
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流？
