GWT Hyperlink Focus действует как активный на CSS

0

Ну, я работал с некоторым кодом GWT...

Я пытаюсь применить некоторый стиль к моему шаблону, но когда я применяю CSS к гиперссылке на нем, я обнаружил, что метод: focus работает как: активный, я имею в виду, что он длится, пока я нажимаю на гиперссылку, но если я удвою нажмите на ту же самую Гиперссылку, которую она волшебно работает !, Я пробовал с помощью виджета Anchor, но если я это сделаю, я должен переписать много кода и не могу использовать Историю с ней

Я сделал гипотезу о том, что происходит, не уверен, что неправильно или правильно, я считаю, что, поскольку GWT использует AJAX, он просто обновляет страницу

.Template-link
{
    COLOR: #ab1e2c;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}
.Template-link a:focus
{
    COLOR: green !important;
}

Итак, вы хоть представляете, что происходит здесь?

заранее спасибо

Больше кода (из общедоступного шаблона)

package com.test.web.ui;

import com.foboa.fbwt.user.client.Page;
import com.foboa.fbwt.user.client.Template;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.inject.Inject;
import com.google.inject.Singleton;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Anchor;

import com.test.web.client.Item;
import com.test.web.client.css.TestCssBundle;
import com.test.web.client.constants.TestConstants;
import com.test.web.client.images.IconBundle;

@Singleton
public class PublicTemplate extends Template {

private final DockPanel main = new DockPanel();

private final IconBundle iconBundle;

private final TestConstants constants;

private final TestCssBundle cssBundle;

@Inject
private PublicTemplate(IconBundle iconBundle, TestConstants constants,
           TestCssBundle cssBundle) {
this.iconBundle = iconBundle;
this.constants = constants;
    this.cssBundle = cssBundle;
}

@Override
public final void loadPage() {
Page page = getPage();
main.add(page, DockPanel.CENTER);
main.setCellHorizontalAlignment(page,
                HasHorizontalAlignment.ALIGN_CENTER);
}

@Override
public final void loadTemplate(){
main.setWidth("100%");
setWidget(main);
loadHeader();
loadFooter();
}

private void loadFooter(){
//create footer panel
HorizontalPanel footerPanel = new HorizontalPanel();
footerPanel.setWidth("100%");
//include footer content
main.add(footerPanel, DockPanel.SOUTH); 
}

private void loadHeader(){
HorizontalPanel headerPanel = new HorizontalPanel();
HorizontalPanel linkPanel = new HorizontalPanel();
headerPanel.setWidth("950px");
headerPanel.setHeight("86px");

    Hyperlink contact = new Hyperlink(Item.CONTACT.getLabel(),
                   Item.CONTACT.getTarget());

contact.setWidth("94px");
contact.addStyleName(cssBundle.testCss().testTemplateLink());   
linkPanel.add(contact);
    linkPanel.setHeight("43px");

headerPanel.add(linkPanel);
DOM.setStyleAttribute(linkPanel.getElement(), "backgroundImage","url(menu.png)");
headerPanel.setCellVerticalAlignment(linkPanel,
                      HasVerticalAlignment.ALIGN_BOTTOM);
main.add(headerPanel, DockPanel.NORTH);
}
}
  • 0
    Укажите более конкретный код, пожалуйста ...
  • 0
    @Onkar Я добавил еще немного кода, я не уверен, что это нормально для вас, или, может быть, вам нужно больше кода, чтобы увидеть, что происходит, в любом случае, просто дайте мне знать.
Теги:
hyperlink
focus
gwt

2 ответа

0
Лучший ответ

РЕШИТЬ

Я добавил следующий код в свой общедоступный шаблон

home.addClickHandler(new ClickHandler(){
    public void onClick(ClickEvent event){
        home.addStyleName(cssBundle.testCss().
        contact.removeStyleName(cssBundle.testCss().
                  testTemplateLink2());
    }
    });

   contact.addClickHandler(new ClickHandler(){
    public void onClick(ClickEvent event){
        home.removeStyleName(cssBundle.testCss().
                  testTemplateLink2());
        contact.addStyleName(cssBundle.testCss().
                    testTemplateLink2());
    }
    });

для каждой ссылки, а также мои стили:

    .Template-link
{
COLOR: #808080;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}

.Template-link a 
{
COLOR: #808080;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}

.Template-link2 
{
COLOR: #AB1E2C;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}

.Template-link2 a
{
COLOR: #AB1E2C;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}

Я оставляю эти методы и мое решение на случай, если someonelse имеет ту же проблему.

Поделиться
0

Я думаю, что это происходит,

Если мы используем "фокус" для гиперссылки, теперь он переходит в состояние "focus" (перейти к нему с помощью "Tab"). При щелчке (или нажатии пробела, когда есть фокус), гиперссылка вводит свое (: активное) состояние.

Когда вы нажимаете (или нажимаете место на фокусе) на элементе, вы даете ему фокус, что также дает намек на то, что: focus и: active одинаковы. Они не одинаковы. При нажатии кнопки находится: focus: активное состояние.

Я вижу недостающую декларацию в коде, который вы предоставили

.Template-link a:focus{}

Также попробуйте добавить

.Template-link a:focus a:active{}
Поделиться
  • 0
    что ж, это то, что происходит, мой a: focus остается на a: focus active, но я пробовал с: focus a: active, и это не меняет его состояние ... Мне нужно, чтобы он оставался с тем же цветом, что и a: focus (пока пользователь остается на странице, пока он / она не нажмет на другую гиперссылку в меню)
  • 0
    это будет звучать наивно с моей стороны, но попробуйте порядок, который вы устанавливаете для css ... как в фокусе перед активным и в фокусе вместе после активного ... также проверьте с помощью firebug, если что-то переопределяет ваши объявления css

Ещё вопросы

Сообщество Overcoder
Наверх
Меню