Framework7--Test
<!doctype html>
<html>
<head>
<title>{{title}}</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/framework7.ios.min.css">
<!-- Path to Framework7 iOS related color styles -->
<link rel="stylesheet" href="stylesheets/framework7.ios.colors.min.css"> <link rel="stylesheet" href="stylesheets/framework71.ios.colors.min.css">
<!--<script data-main="/javascripts/requirejs/main" src="/javascripts/require.js"></script>-->
<script src="/javascripts/requirejs/template7.min.js"></script>
<!--<script src="/javascripts/requirejs/template7.min.js"></script>-->
<!--<script src="/javascripts/jquery/jquery.js"></script>-->
<script src="/javascripts/framework7.js"></script>
</head>
<body>
<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> <div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link open-about" >
<i class="icon icon-back-blue"></i>
<span>Left</span>
</a>
</div> <div class="center sliding">Awesome App</div>
<div class="right sliding">
<a href="/users" class="link">
<i class="icon icon-back-blue"></i>
<span>Right</span>
</a>
</div>
</div>
</div> <div class="pages navbar-through toolbar-through">
<div data-page="test" class="page">
<div class="page-content">
<p><a href="#" class="button hide-toolbar">hide Toolbar</a></p>
<p><a href="#" class="button show-toolbar">show Toolbar</a></p>
<p><a href="#" class="button confirm-ok">Confirm Toolbar</a></p>
<p><a href="#" class="button prompt">prompt Toolbar</a></p>
<p><a href="#" class="button open-preloader theme-orange">preloader Toolbar</a></p>
<p><a href="#" class="button open-indicator">indicator Toolbar</a></p>
<p><a href="#" class="button test-bar">test Toolbar</a></p> <p class="ccc"> title : {{title}}</p><hr/>
<p id="template">Hello, my name is {{firstName}} {{lastName}}</p><hr/> <p>Here are the list of people i know:</p>
<ul class="bbb">
{{#each people}}
<li>{{@index}} {{firstName}} {{js "this.lastName = 0 ? 'ss' : 's'"}} {{#if @index}} 9{{/if}}</li>
{{/each}}
</ul><hr/>
<a href="/users">ggg</a><hr/> <div class="click">点击这里</div> <!--<div class="bg"></div>-->
<!--<div class="content">这里是正文内容</div>-->
</div>
</div>
</div> <div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab2" class="tab-link">
<i class="icon demo-icon-2">
<span class="badge bg-red">5</span>
</i>
<span class="tabbar-label"></span>
</a>
</div>
</div>
</div>
</div> <div class="popover popover-links"> <div class="popover-angle"></div>
<div class="popover-inner">
<div class="list-block">
<ul>
<li><a href="#" class="list-button item-link">Link 1</a></li>
<li><a href="#" class="list-button item-link">Link 2</a></li>
<li><a href="#" class="list-button item-link">Link 3</a></li>
<li><a href="#" class="list-button item-link">Link 4</a></li>
</ul>
</div>
</div>
</div> <div class="modal-overlay"></div> <img class="show-share-btn" style="display: none" src="/images/i-f7-material.png"> <!-- script -->
<script> var myApp = new Framework7({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
// preprocess : function(content, url, next) {
// console.log(url);
// }
});
var $$ = Framework7.$; var mainView = myApp.addView('.view-main', {
dynamicNavbar : true
}); $$(document).on('pageInit', function(e) {
var page = e.detail.page;
if(page.name === 'about') {
myApp.alert('用');
}
}); // ccc
var template = $$('.ccc').html();
var compiledTemplate = Template7.compile(template);
var title = 'ccc';
var html = compiledTemplate({title : title});
$$('.ccc').html(html); var template4 = $$('title').html();
var compiledTemplate4 = Template7.compile(template4);
var title4 = '第一个Template7例子';
var html4 = compiledTemplate4({title : title4});
$$('title').html(html4); //firstName lastName
var template2 = $$('#template').html();
var compiledTemplate2 = Template7.compile(template2);
var content = {
firstName : '六',
lastName : '六'
};
var html2 = compiledTemplate2(content);
$$('#template').html(html2); //each
var template3 = $$('.bbb').html();
var compliedTemplate3 = Template7.compile(template3);
var people = [
{
firstName : '鲤鱼',
lastName : '鲳鱼'
},
{
firstName : '泰山',
lastName : ['aaa', 'bbb']
}
];
var html3 = compliedTemplate3({people : people});
$$('.bbb').html(html3); $$('.hide-toolbar').on('click', function() {
mainView.hideToolbar();
mainView.hideNavbar();
$$('.show-share-btn').show();
console.log('aaa');
}); $$('.show-toolbar').on('click', function() {
mainView.showToolbar();
mainView.showNavbar();
}); $$('.confirm-ok').on('click', function() {
myApp.confirm('Are you sure ? ', function() {
myApp.alert('Yes !');
});
}); $$('.prompt').on('click', function() {
myApp.prompt('what"s your name ? ', function(value) {
myApp.confirm('Are you sure : ' + value + ' is your name ?' , function () {
myApp.alert('Your name is : ' + value);
});
});
}); $$('.show-share-btn').on('click', function() {
$$('.show-share-btn').hide();
});
$$('.open-preloader').on('click', function() {
myApp.showPreloader('不要急');
setTimeout(function() {
myApp.hidePreloader();
}, 2000);
}); $$('.open-indicator').on('click', function() {
myApp.showIndicator();
setTimeout(function() {
myApp.hideIndicator();
}, 2000);
}); $$('.open-about').on('click', function() {
var clickedLink = this;
myApp.popover('.popover-links', clickedLink);
}); $$('.test-bar').on('click', function() {
// $$('body').hide();
myApp.alert('sssss');
$$('.test-bar').data('ccc', {
name : 'mhp'
});
console.log('xxx');
});
var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];
$$.each(fruits, function(index, value) {
console.log(index, value);
}); var person = {
firstName: 'John',
lastName: 'Doe',
age: 25
};
$$.each(person, function(key, value) {
console.log(key, value);
}) var str = 'http://google.com/?id=5&foo=bar';
console.log($$.parseUrlQuery(str));
console.log($$.isArray(fruits)); $$.ajax({
url : '/test',
dataType : 'json',
data : {
test : 'ssss'
},
method : 'POST',
timeout : 100,
success : function(data) {
console.log(data); $$('body').prepend(newMask); },
error : function() {
console.log('lll');
}
}); $$('.click').on('click', function() {
// modal-overlay modal-overlay-visible
//modal-overlay-visible
$$('.modal-overlay').addClass('modal-overlay-visible');
var testdiv = '<div class="modal modal-in show-haha" style="display: block">ssss</div>\
<div class="modal modal-in show-haha aaaccc" style="display: block;top : 30%;right : 0">ssss</div>'; $$('body').append(testHtml);
setTimeout(function() {
$$('.show-haha').remove();
$$('.modal-overlay').removeClass('modal-overlay-visible');
}, 2000);
}); var testHtml ='<div class="modal modal-in show-haha">' +
'<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>' +
'</div>'; </script> <style>
.show-haha {
top : 10%;
left : 20%;
width : 90%;
background: #ccc;
}
.show-share-btn {
position : fixed;
top : 0;
left : 0;
dispay : none !important;
width: 100%;
height: 100%;
z-index : 20000;
}
</style>
</body>
</html> <!--<div class="modal modal-in show-haha" style="display: block">ssss</div>-->
<!--<div class="modal modal-in show-haha" style="display: block;right : 0">ssss</div>--> ps : 服务端用的是nodejs。懒得贴代码。所以，上面的代码，只能看看～
Framework7--Test的更多相关文章
- Entity Framework7 有哪些不同？之具体功能
Entity Framework7 有哪些不同?之具体功能 前面我们介绍了关于EF7的新特性.开发计划和入门介绍.今天,我们来看看EF7的具体新功能及用法.本文中的环境,为EF7入门里介绍的环境. 1 ...
- Entity Framework7 入门之全功能.NET版本下使用EF7（含源码）另附数据迁移常见错误处理
Entity Framework7 入门之全功能.NET(Console, WinForms, WPF等)使用EF7 昨天,我们介绍了EF的新特性和开发计划,如果你还不了解,请移步 Entity Fr ...
- Entity Framework7 有哪些不同？现在开发到什么程度了？
Entity Framework7之开篇 一.Entity Framework7 简介 Entity Framework7简称EF7,是微软正在开发的最新的在.NET应用中首选的数据访问技术.它是轻量 ...
- 国内常用的三种框架：ionic/mui/framework7对比
国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040
- Framework7 – 赞！功能齐全的 iOS7 App 前端框架
Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...
- phonegap + Framework7 之 ios 推送跳转测试
先说说项目情况:使用phonegap创建的ios项目,然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个构建仿原生ios和android应用的框架 ...
- （二）cordova+framework7入门——笑笑APP
[前言] framework7确实做的很赞,但是一直各种原因没有做什么app, 这个感觉就像大厨遇到百年难见的好材料,不炒个菜憋的慌, 机缘巧合周一周二两个晚上做了一个简单app,先看下效果: ios ...
- framework7学习笔记
最近因项目需要学习framework7,简称F7.对于自己遇到的问题和学习到的东西做个简单记录. 问题:刚开始获取json,页面上一直不显示,不得其法,原来是json文件需要在弹出层打开之后在来加载, ...
- Framework7功能齐全的 iOS7 App 前端框架
Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...
- Framework7首页隐藏navbar其他页面显示navbar
Framework7首页隐藏navbar其他页面显示navbar 帮别人解决问题,自己也记录一下, 首页.navbar加.navbar-hidden, 首页.page加.no-navbar, 如果首页 ...
随机推荐
- A - Humble Numbers
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Pract ...
- 关于路径的使用，assi下载和
直接给一个路径下载图片,这函数直接使用assi -(void)downloadWithURL:(NSString*)RequestUrl SavePath:(NSString*)savepath wi ...
- C++学习笔记22：设备
设备类型 设备文件的性质 设备文件不是普通的磁盘文件 读写设备的数据需要与相应的设备驱动器通信 设备文件的类型 字符设备:读写串行数据字节流,如串口.终端等 块设备:随机读写固定尺寸数据块,如磁盘设备 ...
- linux，python 常用的处理log的命令
一般的log文件都是需要过滤 ps:管道符| 管道符前面的输出值 grep 过滤查找 将是error的log过滤显示 grep '221.2.100.138' web.access.log gr ...
- 导航代码position：relative
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 1. webservice在输入命令的时候wsimport的时候会出现如下错误： wsimport不是内部或者外部命令。 2. javac不是内部或者外部命令 3 java 就可以显示配置成功。
问题: webservice在输入命令的时候wsimport的时候会出现如下错误: wsimport不是内部或者外部命令. javac不是内部或者外部命令 3 java 就可以显示配置成功. 网上搜了 ...
- hiho一下121周 后缀数组二·重复旋律2
后缀数组二·重复旋律2 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...
- 在线程中用 OracleBulkCopy 导至 CPU 百分百
抓取到的数据, 要批量写数据到 ORACLE , 一开始是用的EF, 处理速度很慢. 主要表现在验证数据上(db.GetValidationErrors), 每分钟才能写 1000条不到. 换成 En ...
- 调Windows 7的图片浏览器查看图片
public static void viewPicFromWindows(string pPicPath) { if (pPicPath!="" && Syste ...
- UILabel的使用
UILabel是iOS用于显示文本的控件. 基本属性如下代码所示: UILabel *lbl = [[UILabel alloc] init] ; //设置显示区域 lbl.frame = CGRec ...