Framework7--Test
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> </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> <!-- 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(); }); $$(‘.show-toolbar‘).on(‘click‘, function() { mainView.showToolbar(); }); $$(‘.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); }); }); }); $$(‘.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); }, error : function() { console.log(‘lll‘); } }); </script> </body> </html>
ps : 服务端用的是nodejs。懒得贴代码。所以，上面的代码，只能看看～
以上是关于Framework7--Test的主要内容，如果未能解决你的问题，请参考以下文章