Example usage for com.google.gwt.query.client.css CSS COLOR

Introduction

In this page you can find the example usage for com.google.gwt.query.client.css CSS COLOR.

Prototype

ColorProperty COLOR

To view the source code for com.google.gwt.query.client.css CSS COLOR.

Click Source Link

Document

The color property describes the foreground color of an element's text content.

Usage

From source file:gwtquery.samples.client.effects.ColorEffectsSample.java

License:Apache License

public void onModuleLoad() {

    $("#shoot").click(new Function() {

        public void f() {
            $("body").animate("backgroundColor: 'red'", 400).delay(1000).animate("backgroundColor: 'white'",
                    2000);/*from   w w  w . j  av a  2  s .  co m*/
        }

    });

    $("#startAnim2").click(new Function() {

        public void f() {
            $(".bar").animate("backgroundColor: 'yellow'", 1000).delay(200)
                    .animate("borderColor: '#ff0000'", 1000).delay(200)
                    .animate("color:'rgb(255, 255, 255)'", 1000);
        }

    });

    $("#resetAnim2").click(new Function() {

        public void f() {
            $(".bar").css(CSS.BACKGROUND_COLOR.with(null), CSS.BORDER_COLOR.with(null), CSS.COLOR.with(null));
        }

    });
}

---

From source file:gwtquery.samples.client.GwtQueryEffectsModule.java

License:Apache License

public void onModuleLoad() {
    $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)).hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(),
            lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done());

    $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() {
        public boolean f(Event e) {
            $("div.outer > div").as(Effects.Effects).animate($$("left: '+=100'"), 400, Easing.LINEAR)
                    .animate($$("top: '+=100'"), 400, Easing.LINEAR)
                    .animate($$("left: '-=100'"), 400, Easing.LINEAR)
                    .animate($$("top: '-=100'"), 400, Easing.LINEAR);
            return true;
        }/*from   w  w w  .jav a  2s  .  c  o m*/
    });
    $(".note").click(lazy().fadeOut().done());
    $(".note").append(" Hello");

    final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);
    final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects);

    $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() {
        public void f(Element e) {
            $("#b0").as(Effects.Effects)
                    .animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'");
        }
    }, new Function() {
        public void f(Element e) {
            $("#b0").as(Effects.Effects)
                    .animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'");
        }
    });

    $("#b1").toggle(new Function() {
        public void f(Element e) {
            $(".a").toggle();
        }
    }, new Function() {
        public void f(Element e) {
            a.fadeOut();
        }
    }, new Function() {
        public void f(Element e) {
            a.fadeIn();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideUp();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideDown();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideLeft();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideRight();
        }
    }, new Function() {
        public void f(Element e) {
            a.animate("left: '+=300', width: 'hide'");
        }
    }, new Function() {
        public void f(Element e) {
            a.animate("left: '-=300', width: 'show'");
        }
    });

    $("#b2").toggle(new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipUp();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipDown();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipDisappear();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipAppear();
        }
    });

}

---

From source file:gwtquery.samples.client.GwtQuerySampleModule.java

License:Apache License

public void onModuleLoad() {
    // Use compiled selectors
    Sample s = GWT.create(Sample.class);

    // Just a simple usage of dom manipulation, events, and lazy usage
    s.allNotes().text("Hello Google I/O").css(CSS.CURSOR.with(Cursor.POINTER))
            .toggle(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), lazy().css(CSS.COLOR.with(null)).done());
    // Cascade effects
    $("<div id='id' style='font-size: 150%;'>Cascade Efects</div>").appendTo(document).hide().fadeIn(5000)
            .fadeOut(3000);// ww  w  .j a  va2s.  c  om

    // Widgets
    $(".btn").as(Widgets).button(new WidgetInitializer<Button>() {
        public void initialize(Button button, Element e) {
            final String tag = e.getTagName();
            button.addClickHandler(new ClickHandler() {
                public void onClick(ClickEvent event) {
                    Window.alert("You click on a GWT Button created from a " + tag);
                }
            });
        }
    });
    $(".inputText").as(Widgets).textBox();
    $(".inputPsw").as(Widgets).passwordBox();
    $(".textArea").as(Widgets).textArea();
    $(".label").as(Widgets).label(new WidgetInitializer<Label>() {
        public void initialize(Label label, Element e) {
            label.setText("I'm a gwt label, created from a " + e.getTagName());
        }
    });
}

---