试用avalon2.0

一直从事后端开发，对于前端的html+css+js，不熟不熟的。前面写了一个比较复杂的操作界面，我只能说，误工费时。花了一周研究avalonjs2,大神的确就是大神，解决了我很多的问题，

请参考http://www.cnblogs.com/rubylouvre

记录初试结果

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>我的SPA是没有#hash变化的</title>

     <meta charset="utf-8" />

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

     <link rel="stylesheet" href="weui/weui.min.css" />

     <link rel="stylesheet" href="weui/weui2.css" />

     <link rel="stylesheet" href="weui/czh.css" />

     <meta name="format-detection" content="telephone=no" />

     <link rel="stylesheet" href="ratchet/dist/css/ratchet.min.css" />

     <link type="text/css" rel="stylesheet" href="css/fontstyle.css" />

     <link type="text/css" rel="stylesheet" href="css/yjscanpage1.css" />

     <link href="layer.m/need/layer.css" type="text/css" rel="stylesheet" />

     <script src="../wx/layer.m/layer.m.min.js"></script>

     <script src="avalon/avalon.modern.js"></script>

     <style>

         .ms-controller {

             display: none;

         }

     </style>

     <script>

         avalon.component('ms-pager',{

             template: '<div><a href="#/ms-header">ms-header</a><input type="text" ms-duplex-number="@num"/><button ms-on-click="@onPlus">+++</button></div>',

             defaults:{

                 num:1,

                 onPlus:function(){

                     this.num++;

                 }

             }

         });

         avalon.component('ms-button', {

             template: '<div ms-visible="@toggle"><button type="button" ms-click="@toggle = !@toggle"><span><slot name="buttonText"></slot></span></button></div>',

             defaults: {

                 buttonText: "button"

             },

             soleSlot: 'buttonText',

             toggle:true

         });

         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>';

         avalon.component('ms-header',{

             template:tpl,

             defaults:{

                 title:"这是标题",

                 random:0,

                 onChangeTitle:function(){

                     this.title = '改变了title' + (new Date - 0);

                 },

                 onRandom:function(){

                     this.random = Math.floor(Math.random()*100)

                 }

             }

         });

         var vm = avalon.define({

             $id:'test',

             tpl: '<div><a href="#/ms-header">ms-header</a></div>',

             button: {//注意这里不能以 $开头

                 buttonText: "按钮内容"

             },

             dialogtpls:[],

             opendialog: function (hash) {

                 vm.dialogtpls.push('<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>');//dialog样式

                 //var s = layer.open({

                 //    content: vm.$element.querySelector(".showdialg div").innerHTML,

                 //    style: 'background-color:#09C1FF; color:#fff; border:none;height:20px;'//,

                 //    //time: 2

                 //});

             },

             showpage: function (hash) {

                 vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';

             },

             closedialog: function () {

                 vm.dialogtpls.pop();// = '';

             }

         })

         window.addEventListener('hashchange', function (e) {

             var hash = e.newURL.split('#/')[1];

             if (hash.indexOf("dialog") >= 0) {

             }

             else {

                 vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';

             }

         });

     </script>

 </head>

 <body ms-controller="test" style="position:relative">

     <ul>

         <li><a ms-click="@showpage('ms-header')">ms-header</a></li>

         <li><a ms-click="@showpage('ms-pager')">ms-pager</a></li>

         <li><a ms-click="@opendialog('ms-pager')">ms-dialog</a></li>

         <li><a ms-click="@opendialog('ms-header')">ms-header</a></li>

         <li><a ms-click="@closedialog('ms-pager')">ms-dialog</a></li>

     </ul>

     <div style="background-color:#f0f0f0;" ms-html="@tpl">

     </div>

     <div class="showdialg">

         <div ms-for="el in @dialogtpls" ms-html="el"></div>

     </div>

 </body>

 </html>

我这里使用的spa跟常规不一样，没有url#xxxx这种方式，

所想要的效果，就是业务配u1,u2,u3,设计调用方式之后，要用modal显示的，就modal显示，可以叠放，

或者是一般的替换u显示。这里的dialogtpls数组用于显示modal的，没有加modal样式和代码。

试用avalon2.0的更多相关文章

iOS开发之AFNetworking 3.0.4使用
昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...
Hbase1.0 客户端api
最近在试用Hbase1.0的客户端API,发觉变化还是挺大(以前版本也不熟).到处都是deprecated. 现在应该是这样子: Configuration conf = HBaseConfigur ...
iOS开发之AFNetworking 3.0.4使用-OC
GET请求 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; [manager GET:URL parameters: ...
avalon2对比avalon1 新增的功能汇总
avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-sca ...
uniGUI出新版本了，0.97.0.1081
uniGUI出新版本了,0.97.0.1081,试用版0.97.0.1075,支持Delphi2006~XE7.下载地址是: http://www.unigui.com/downloads 已在XE6 ...
avalon2学习教程08插入移除操作
本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...
centos8平台:举例讲解redis6的ACL功能(redis6.0.1)
一,为什么redis6要增加acl功能模块? 什么是acl? 访问控制列表(ACL)是一种基于包过滤的访问控制技术, 它可以根据设定的条件对接口上的数据包进行过滤,允许其通过或丢弃 redis6增加了 ...
knockoutjs扩展与使用
原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...
avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

随机推荐

数据结构浙大MOOC 笔记二线性结构
线性表及其表现第二章的内容是关于三种最基本的数据结构结合<DDSA>第三章表.栈和队列做一个总结首先简单说明一下各个数据结构的特点: 数组:连续存储,遍历快且方便,长度固定,缺点是 ...
一对一还是一对多？ MVP设计前提
设计MVP之前,先要确定好以下模块之间是一对多还是一对一的关系: View ---> Presenter --> Model --> Interface(URL) 就是一个View只 ...
【HEOI2012】采花 BZOJ2743
Description 萧芸斓是Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一 ...
iOS Architectures 浅谈
iOS项目打包,或者只是在项目里面调用第三方静态库抑或是自己新建一个静态库,就要无可避免的和Architectures打交道.Architectures在Targets面板的Build Setting ...
MySQL 排名统计
select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...
[iOS] 为文本加上横线方法
_oldPriceLabel.text = "; _oldPriceLabel.textColor = [UIColor lightGrayColor]; NSMutableAttribut ...
MyEclipse做一个注册页面，需要注意的地方。
expect
#!/usr/bin/expect -fset ipaddr "192.168.5.4"set passwd "123qwe"set timeout 30 sp ...
CentOS7 cacti 安装
首先centos7 web环境的安装这里就不说了.安装cacti,首先得web环境配置好其次添加两个用户,一个是cacti用于操作mysql的 cactimysql 一个是cacti操作Linux ...
javase-->多线程--线程池
java的线程池理解在面向对象编程中,对象创建和销毁是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收. ...

试用avalon2.0

试用avalon2.0的更多相关文章

随机推荐

热门专题