• 试用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样式和代码。

  • 相关阅读:
    JavaScript面向对象之闭包的理解
    JavaScript面向对象之函数构造器的理解
    记录jq控制select 选中状态
    JavaScript面向对象之创建类和方法
    获取对象属相 点运算符 和方括号 运算符
    parseFloat 和 Number isNaN 转换
    Js数据类型和运算符
    break , continue 和 标签 跳出循环
    javaScript--循环语句
    三元运算符
  • 原文地址:https://www.cnblogs.com/forhell/p/5515202.html
Copyright © 2020-2023  润新知