标签：
一直从事后端开发，对于前端的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样式和代码。
标签：
原文地址：http://www.cnblogs.com/forhell/p/5515202.html
