Wie Stil Anker in GWT?

Wie kann ich hinzufügen Stil für Anker mit GWT UIBinder? Ich habe folgenden code in UiBinder-Vorlage XML:

<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor>

Ich weiß, dass .gwt-Anker { } verwendet wird, für das styling dieses widget, aber noch keine Idee, wie man Stil hover-Effekte. In CSS würde es so gehen: 

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Muss ich dafür BlurEvent und FocusEvent-Handler auf Anker? Wenn das so ist ...das ist boilerplate code.

  • Vergessen Sie nicht die Anchor href Attribut mit zumindest so etwas wie 'javascript:;' haben es behandelt, als ein link von den Browsern.
  • Eigentlich, wenn ich mich Recht erinnere, GWT übernimmt das für Sie (es sei denn, Sie, natürlich, der explizit den href - Attribut, über das Tor oder auf andere Weise).
InformationsquelleAutor azec-pdx | 2011-02-16
  1. 8

    Verwenden die gleichen CSS-pseudo-Klassen mit dem gwt-Anchor Klasse:

    .gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

    Können Sie auch a.gwt-Anchor aber es ist nicht unbedingt notwendig.

    InformationsquelleAutor Jason Terk
  2. 3

    Wenn Sie mit uibinder mit dem gwt HyperLink, es kann getan werden, wie diese:

    <ui:style>
.mystyle a:link {
color:#3F3F3F; 
text-decoration:none;
}   
</ui:style>

<g:FlowPanel>
    <g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>
    InformationsquelleAutor Steve QL
  3. 0

    Funktioniert das (mit UIBinder-Stil, Namen) ?

    <ui:style>
  .a:link { color: #FF0000; }
  .a:visited { color: #00FF00; }
  .a:hover { color: #FF00FF; }
  .a:active { color: #000FF; }
</ui:style>
<g:HTMLPanel>
  <g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor>
</g:HTMLPanel>
    InformationsquelleAutor Jason Hall
  4. 0

    Definieren Sie Ihre style wie dieser:

    <ui:style>
  .menuItem a:link {color: white;}
  .menuItem a:visited {color: white;}
  .menuItem a:hover {color: white;}
  .menuItem a:active {color: white;}
</ui:style>

    Und verwenden Sie es wie diese:

    <g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>
    InformationsquelleAutor tj-recess
Schreibe einen Kommentar