试用avalon2.0
Posted 另一个梦境
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了试用avalon2.0相关的知识，希望对你有一定的参考价值。
一直从事后端开发，对于前端的html+css+js，不熟不熟的。前面写了一个比较复杂的操作界面，我只能说，误工费时。花了一周研究avalonjs2,大神的确就是大神，解决了我很多的问题，
请参考http://www.cnblogs.com/rubylouvre
记录初试结果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>我的SPA是没有#hash变化的</title> 6 <meta charset="utf-8" /> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> 8 <link rel="stylesheet" href="weui/weui.min.css" /> 9 <link rel="stylesheet" href="weui/weui2.css" /> 10 <link rel="stylesheet" href="weui/czh.css" /> 11 <meta name="format-detection" content="telephone=no" /> 12 <link rel="stylesheet" href="ratchet/dist/css/ratchet.min.css" /> 13 <link type="text/css" rel="stylesheet" href="css/fontstyle.css" /> 14 <link type="text/css" rel="stylesheet" href="css/yjscanpage1.css" /> 15 <link href="layer.m/need/layer.css" type="text/css" rel="stylesheet" /> 16 <script src="../wx/layer.m/layer.m.min.js"></script> 17 <script src="avalon/avalon.modern.js"></script> 18 <style> 19 .ms-controller { 20 display: none; 21 } 22 </style> 23 <script> 24 avalon.component(\'ms-pager\',{ 25 template: \'<div><a href="#/ms-header">ms-header</a><input type="text" ms-duplex-number="@num"/><button ms-on-click="@onPlus">+++</button></div>\', 26 defaults:{ 27 num:1, 28 onPlus:function(){ 29 this.num++; 30 } 31 } 32 }); 33 34 avalon.component(\'ms-button\', { 35 template: \'<div ms-visible="@toggle"><button type="button" ms-click="@toggle = !@toggle"><span><slot name="buttonText"></slot></span></button></div>\', 36 defaults: { 37 buttonText: "button" 38 }, 39 soleSlot: \'buttonText\', 40 toggle:true 41 }); 42 43 var tpl = \'<div><a href="#/ms-pager">ms-pager</a><h4>{{@title}}</h4><h5>{{@random}}</h5><button ms-on-click="@onChangeTitle">点击改变title</button><button ms-on-click="@onRandom">获取随机数</button></div>\'; 44 avalon.component(\'ms-header\',{ 45 template:tpl, 46 defaults:{ 47 title:"这是标题", 48 random:0, 49 onChangeTitle:function(){ 50 this.title = \'改变了title\' + (new Date - 0); 75 }, 76 onRandom:function(){ 77 this.random = Math.floor(Math.random()*100) 78 } 79 } 80 }); 81 82 var vm = avalon.define({ 83 $id:\'test\', 84 tpl: \'<div><a href="#/ms-header">ms-header</a></div>\', 85 button: {//注意这里不能以 $开头 86 buttonText: "按钮内容" 87 }, 88 dialogtpls:[], 89 opendialog: function (hash) { 90 vm.dialogtpls.push(\'<div><\' + hash + \' ms-widget=\\"{$id:"\' + hash + \'",cached: true}\\"></\' + hash + \'></div>\');//dialog样式 91 //var s = layer.open({ 92 // content: vm.$element.querySelector(".showdialg div").innerHTML, 93 // style: \'background-color:#09C1FF; color:#fff; border:none;height:20px;\'//, 94 // //time: 2 95 //}); 96 97 }, 98 showpage: function (hash) { 99 vm.tpl = \'<div><\' + hash + \' ms-widget=\\"{$id:"\' + hash + \'",cached: true}\\"></\' + hash + \'></div>\'; 100 }, 101 closedialog: function () { 102 vm.dialogtpls.pop();// = \'\'; 103 } 104 }) 105 window.addEventListener(\'hashchange\', function (e) { 106 var hash = e.newURL.split(\'#/\')[1]; 107 if (hash.indexOf("dialog") >= 0) { 108 } 109 else { 110 vm.tpl = \'<div><\' + hash + \' ms-widget=\\"{$id:"\' + hash + \'",cached: true}\\"></\' + hash + \'></div>\'; 111 } 112 }); 113 </script> 114 </head> 115 <body ms-controller="test" style="position:relative"> 116 <ul> 117 <li><a ms-click="@showpage(\'ms-header\')">ms-header</a></li> 118 <li><a ms-click="@showpage(\'ms-pager\')">ms-pager</a></li> 119 <li><a ms-click="@opendialog(\'ms-pager\')">ms-dialog</a></li> 120 <li><a ms-click="@opendialog(\'ms-header\')">ms-header</a></li> 121 <li><a ms-click="@closedialog(\'ms-pager\')">ms-dialog</a></li> 122 </ul> 123 <div style="background-color:#f0f0f0;" ms-html="@tpl"> 124 125 </div> 126 <div class="showdialg"> 127 <div ms-for="el in @dialogtpls" ms-html="el"></div> 128 </div> 129 </body> 130 </html>
我这里使用的spa跟常规不一样，没有url#xxxx这种方式，
所想要的效果，就是业务配u1,u2,u3,设计调用方式之后，要用modal显示的，就modal显示，可以叠放，
或者是一般的替换u显示。这里的dialogtpls数组用于显示modal的，没有加modal样式和代码。
以上是关于试用avalon2.0的主要内容，如果未能解决你的问题，请参考以下文章