试用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,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

随机推荐

iOS10 权限崩溃问题
iOS10 权限崩溃问题原文: http://blog.csdn.net/runleelrg/article/details/51673025 今天手机升级了 iOS10 Beta,然后用正在开发 ...
（转）C#根据当前时间获取周，月，季度，年度等时间段的起止时间
DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays( - Convert.ToInt32(dt.DayOfWeek.T ...
LINQ 函数的实战演练测试
1.首先定义一个图书类.专门存放图书的属性信息. 代码如下: //Book.cs using System; namespace LinqTest { public class Book { pu ...
php下载远程文件方法~
直接上代码: getFile("http://easyread.ph.126.net/N8gDl6ayo5wLgKbgT21NZQ==/7917056565549478184.jpg&quo ...
APP支付报错ALI40247处理方案!
简直日狗!这里要吐槽支付宝: 1.支付宝文档太复杂,分类虽然详细,但是我找不到app支付对应服务端的demo 2.提供下载的sdk都是全整合的用下来都是一条龙服务,还有一些客户端(app)的请求也 ...
Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
redis lua
需求是在缓存最近一周内用户所有消息列表,考虑用Redis 存储:为每个存储一个独立Sorted Set,value 为消息体,Score 为MessageId,用以实现增量消息同步. 问题就来了:So ...
R语言进阶
一.初学入门:<R in Action><The Art of_R Programming>入门者可首选两本,前者从统计角度入手,分高中低三部分由浅入深的讲解了如何用R来实现统 ...
C#接口的作用(经典)
C#接口是一个让很多初学C#者容易迷糊的东西,用起来好像很简单,定义接口,里面包含方法,但没有方法具体实现的代码,然后在继承该接口的类里面要实现接口的所有方法的代码,但没有真正认识到接口的作用的时候就 ...
完整mybatis应用
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...

试用avalon2.0

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

随机推荐

热门专题