zoukankan      html  css  js  c++  java
  • CSS绑定

    css绑定会对元素的CSS类进行操作。在某些情况下这将非常有用,例如:当数值是负的时将其高亮显示。

    (注:如果如果不想直接更改CSS类,而是只要改其中一个样式,则需要使用style绑定)

    示例:使用静态的CSS类

    <div data-bind="css: { profitWarning: currentProfit() < 0 }">
       Profit Information
    </div>
     
    <script type="text/javascript">
        var viewModel = {
            currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
        };
        viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
    </script>

     当currentProfit的值小于0时就会将profitWarning的类绑定上,当大于0时就会移除这个类。

    示例:使用动态的类

    <div data-bind="css: profitStatus">
       Profit Information
    </div>
     
    <script type="text/javascript">
        var viewModel = {
            currentProfit: ko.observable(150000)
        };
     
        // Evalutes to a positive value, so initially we apply the "profitPositive" class
        viewModel.profitStatus = ko.pureComputed(function() {
            return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
        }, viewModel);
     
        // Causes the "profitPositive" class to be removed and "profitWarning" class to be added
        viewModel.currentProfit(-50);
    </script>

    当currentProfit小于0时就会将profitWarning类赋上,否则将会使用profitPositive类。

    参数

        如果使用静态的CSS类名,这时可以传递一个JavaScript对象,它的名称就是CSS的类名,它的值(true, false)用来判断使用哪一个类。

    也可以一次设置多个CSS类。例如,如果view model有一个isServer的属性,

    <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

    也可以用引号括起来多个类名,使用同一个条件设置CSS类:

    <div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">

    非bool的值会转换为造价的bool值,如,0和null是false, 21、非null是true.

    如果绑定的参数是一个observable的值,那么当值改变时,CSS类也会更改。反之,只会在初始化时绑定一次。

    如果要使用动态的CSS类,可以传递CSS类名的字符串。如果参数指向一个observable的值,绑定会将原来的添加的类移除然后按observable的值重新绑定。

    我们可以使用任意的JavaScript表达式或者函数来绑定CSS类。

    注:绑定类名不是合法的JavaScript变量的CSS类

    可以这样写:

    <div data-bind="css: { 'my-class': someValue }">...</div>

    使用引号把类名括起来就可以了。

  • 相关阅读:
    eclipse如何设置高亮代码的背景色,比如选中某个单词,高亮所有的
    javascript弹层
    click只能点击一次
    eclipse创建文件夹河包
    maven工程如何引用css和js文件
    maven-parent的pom.xml配置
    pom.xml设置maven的编码方式
    springmvc搭建环境时报No mapping found for HTTP request with URI [/exam3/welcome] in DispatcherServlet with name 'spring2'
    sso的实现
    C#中,重新排列panel中的按钮
  • 原文地址:https://www.cnblogs.com/wileywong/p/4209108.html
Copyright © 2011-2022 走看看