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, 如果首页 ...
随机推荐
- net_device 结构体分析
/* * The DEVICE structure. * Actually, this whole structure is a big mistake. It mixes I/O * data wi ...
- A Brief Introduction to Markovs Chains
本文译自A Brief Introduction to Markovs Chains 译者按: 前面一篇文章讲的是蒙特卡洛积分,也就是通过生成符合特定分布的随机变量来近似计算积分值,例如: \(E = ...
- Node.js高级编程读书笔记 - 4 构建Web应用程序
Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...
- 【NOIP2005】过河
感觉这题好玄--最后看了chty的代码才过,我现在这样必须看题解才能A题怎么办嘛qaq 原题: 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上 ...
- javascript的document.execCommand(转)
document.execCommand()方法处理html数据时常用语法格式如下: 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其 中:sComm ...
- Fortran学习心得
编译调试: 服务器上所用的编译器可以编译.F90的文件,同时,经过测试已经知道有两款编译器:gfortran和ifort. 另外,查看编译器的bash命令是:gfortran -v. 编程算法思想与C ...
- My Code Snippet
加载菜单(js) function mkmenu(menus,name,id,parentid,url) { $.each(menus,function(i){ menus[i].children=n ...
- windows端加密程序，lua代码，ZeroBrane调试
发一个自己改的zerobrane版本(启动中文,快捷键改成和一样:F5启动调试,F9断点,F10逐过程,F11逐语句,F12跳出函数) 在zerobrane 1.0(2015.3.13)发布的基础上改 ...
- Android分享中，如何过滤指定的应用，并且对不同的分享方式发送不同的内容？
网上找到的一篇关于: 针对不同的应用,使用不同的方式的文章.原文地址 String contentDetails = ""; String contentBrief = " ...
- 正则匹配<{$vcode}>变量
$title="<{t}>您的验证码是:<{/t}><{$vcode}>,<{t}>请在注册页输入验证码并完成注册:验证码<{$vcod ...