Giter Club home page Giter Club logo

Comments (8)

RubyLouvre avatar RubyLouvre commented on August 15, 2024

这在于构造一些栏栅布局时，非常有名，像960grids ，它的类名就包含一些数字，这个我们在创建它时，数字部分要动态添加

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js"></script>
        <style>
            .width500{
                width:500px;
            }
            .height200{
                height: 200px
            }
            .bgRed{
                background:red;
            }
            .ui-corner-bottom{
                width:500px;
                height:20px;
                background: blue;
            }
            .ui-corner-all{
                width:500px;
                height:20px;
                background: pink;
            }
            .aaa{
                background: black;
            }
            .bbb{
                color:white;
            }
            .ccc{
                width:500px;
                height:40px;
            }
        </style>
        <script type="text/javascript">
            var a = avalon.define("aaa", function(vm) {
                vm.toggle = true
                vm.w = 500
                vm.h = 200
                vm.bottom = true
            })
        </script>
    </head>
    <body ms-controller="aaa">

        <div ms-class-1="{{ bottom ?  'ui-corner-bottom' :  'ui-corner-all'}}"></div>
        <div ms-class-2="aaa bbb ccc">xxx</div>
        <div ms-class-1="bgRed width{{w}} height{{h}}: toggle"></div>
    </body>
</html>

from avalon.

RubyLouvre avatar RubyLouvre commented on August 15, 2024

ms-class-1="aaa", ms-class="aaa",ms-class="aaa:toggle"为新风格
ms-class-xxx="toggle"为要废弃的旧风格

from avalon.

RubyLouvre avatar RubyLouvre commented on August 15, 2024 
<div ms-class="{{ bottom ? 'ui-corner-bottom' :  'ui-corner-all'}}">AAA</div>

from avalon.

daqing15 avatar daqing15 commented on August 15, 2024

ms-class-1="aaa", ms-class="aaa",ms-class="aaa:toggle"为新风格

ms-class-1可以不加 1之类的阿拉伯数字，什么风格呢？

from avalon.

RubyLouvre avatar RubyLouvre commented on August 15, 2024

或者这样 ms-class--="aaa",
因为一个元素节点不能出现两个同名的属性，如果你要分开添加多个类，第一个ms-class="aaa",第2个为ms-class="bbb"，那么第2个会覆盖第1个，因此你要在后面加点东西，如ms-class-="bbb",或者ms-class--="bbb",

多少个"-"也没所谓，因为我是使用split("-")实现切割的

from avalon.

riophae avatar riophae commented on August 15, 2024

ms-class="a:value1" ms-class---="b:value2" 这种语法实在是太奇葩了. 就不可以是 ms-class="a: value1, b: value2" 这种吗?

from avalon.

RubyLouvre avatar RubyLouvre commented on August 15, 2024

逗号在表达式出现的机率太大了，不好做切割符；分号低一点，但在正则中出现的机率比较多；大家觉得用cookie那种“, ”做分割如何？一个逗号加一个空白

from avalon.

riophae avatar riophae commented on August 15, 2024

强制要求加空格的话.. 好像也不大好啊. 最好是灵活一点的.
虽然我习惯于在逗号后面加空格.

from avalon.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.