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, 如果首页 ...
随机推荐
- unity中全屏背景图缩放
using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...
- C++中的复制构造函数
与C++中的构造函数相同,复制构造函数在对象生成过程中同样进行插入对应的Vtable虚表,但在成员变量赋值时,除具有复制构造函数的成员对象外,编译器合成复制构造函数其余均采用”Bitwise copy ...
- P,NP,NPC,NPC-HARD
P: 能在多项式时间内解决的问题 NP: 不能在多项式时间内解决或不确定能不能在多项式时间内解决,但能在多项式时间验证的问题 NPC: NP完全问题,所有NP问题在多项式时间内都能约化(Reducib ...
- TP代码
<?php// 本类由系统自动生成,仅供测试用途class IndexAction extends Action { public function index(){ $th ...
- LeetCode 【46. Permutations】
Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...
- win7 下 arp 绑定mac和Ip
我们都知道直接执行arp -s 命令即可绑定IP和MAC地址,但是在Win7下会遇到不能运行arp -s 进行静态mac绑定的情况,提示“ARP 项添加失败: 拒绝访问.”(英文版提示:The ARP ...
- OpenGL概述
简介 状态机 glBegin()与glEnd() glFlush()与glFinish() OpenGL简介 OpenGL是图形硬件的一种软件接口.它被设计为硬件独立的接口,可用于多种不同硬件平台.O ...
- python编码-2
字典 >>> aa={} >>> aa['wo']=[1,2,3,4] >>> aa['ni']=[5,6,7,8] >>> a ...
- android数据存储之Sqlite（二）
SQLite学习笔记 前言:上一章我们介绍了sqlite的一些基本知识以及在dos命令下对sqlite进行的增删改查的操作,这一章我们将在android项目中实际来操作sqlite. 1. SQLit ...
- 微信公众平台开发教程（十一）微信"企业号“上线
什么是企业号? 企业号是微信为企业客户提供的移动应用入口 关注更安全 只有企业通讯录的成员才能关注企业号,分级管理员.保密消息等各种特性确保企业内部信息的安全. 应用可配置 企业可自行在企业号中可配置 ...