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, 如果首页 ...
随机推荐
- windows dir改成ls
习惯了linux下的ls命令,windows的dir用的很不习惯,又不想装cygwin, bash,就想把dir重命名为ls,发现dos下有个命令doskey可以完成该功能.在命令提示符下敲: > ...
- Linux命令--系统中常用的查看命令
摘自 http://my.oschina.net/syyzhan/blog/277536 1.查看日志文件 使用命令:cat 或者 tail -f(默认查看文件尾部10行) 相关日志文件: /var/ ...
- ajax上传图片到服务器
通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...
- 分支语句 if的嵌套 循环语句
0930 今天学习内容做以下总结: 语句的分类:顺序语句,分支语句(选择,条件),循环语句 分支语句 格式1:if(表达式(要么是true 要么是false)){} 格式2:if(){}slse{} ...
- 数论 UVA 11076
这道题目的意思简单易懂说的是给你n个数(可能有重复相同的数字),列出他们所有排列的情况,再逐位相加,求出和,例如:给你1,2,3,则排列的情况为<123>, <132>, &l ...
- thinkphp 内置标签volist 控制换行
thinkphp 内置标签volist 控制换行 volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行 ...
- DataItem,gridview,repeater数据控件数据绑定
Container.DataItem几种方式. 在绑定数据时经常会用到这个句程序:<%# DataBinder.Eval(Container.DataItem,"xxxx") ...
- 【java】spring-data-jpa 集成hibernate实现多条件分页查询
初次接触spring-data-jpa,实现多条件分页查询. 基础环境 Spring Boot+spring-data-jpa+hibernate+mysql 1.接口 要继承这个接口,这个接口提供了 ...
- php微信接口实例
<?php /** * wechat php test */ //define your token //定义TOKEN秘钥 define("TOKEN", "we ...
- google protocol buffer 使用说明
一:编译源码 下载地址:http://code.google.com/p/protobuf/downloads/list 下载后,根据编译说明进行编译. windows 平台,直接打开msvc中的工程 ...