동적으로 버튼의 CSS 클래스를 변경하는 방법이 있습니까?

Question

Wicket 기반 웹 응용 프로그램에서 작업하고 있습니다. 응용 프로그램에는 모든 사용자가 사용할 수있는 단추가 없습니다. 이 버튼은 실제로는 간단한 링크입니다.

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a> 

(시각적 모양을 설정하는 CSS 클래스 (예 : 외부 CSS 파일)).

a.rightPanel_publish { 
    display: block; 
    width: 90px; 
    height: 27px; 
    background: url(../imgs/right_panel_icon03.gif) left top repeat-y; 
    text-decoration: none; 
    color: black; 
    padding: 12px 0px 0px 35px; 
} 

사용자가 버튼을 사용할 수있는 권한이 없으면 링크가 비활성화되어 (Java에서) CSS가 더 이상 사용되지 않습니다.

내 질문은입니다. 링크가 런타임에 비활성화되어 있고 CSS 클래스를 변경한다는 것을 식별하는 방법이 있습니까? 차라리 JS를 사용하지 않는 편이 좋습니다. 전체 프로젝트를 JS 프리로 유지할 수 있습니다. 모든 브라우저에서 작동하는 것을 선호합니다.

감사 무리

Yuval 교수 = 8)

Answer 1

는 불행하게도, 난 JS없이 버튼의 페이지를 변경하는 방법을 알고하지 않습니다. CSS, 자바 및 다른 모든 것들은 페이지가로드되는 동안 페이지가 JS를 통해 페이지와 상호 작용하는 유일한 방법을로드 한 후에 실행됩니다. 그러나 여기

는

if(document.getElementById('foo')) 
    { 
    document.getElementById('foo').className='bar'; 
    } 

Answer 2

어떤 종류의 스크립트없이이 작업을 수행 할 수있는 방법이 없다, 모든 브라우저 (IE 6 이상, 사파리, 오페라, FF, 등)에서 작동하는 JS이다. "DHTML"의 "D"는 "자바 스크립트"의 약자 : P

---

편집 : 사실, 당신은 뭔가/또한 "장애인"을 추가한다 수, 링크/버튼을 비활성화한다 뭔가 말 이후 클래스 (CSS를 주목할 수있는 유일한 x-browser 방법)를 동일한 요소에 추가합니다. 런타임 전환이 실행되지 않습니다. 상태가 변경되는 경우 철저하게해야합니다.

Answer 3

내가 사용하는 *.setVisible(Boolean boolean)

그것은 개찰구에서 WebMarkupContainer 모델을 사용할 수 있습니다. setVisible()은 사용자 역할을 기반으로 클래스의 다른 위치에 지정할 수 있습니다. 그래서 당신은 사용할 때

Answer 4

개찰구 링크는 < 범위 >와 < > 태그를 대체 ... 그것을 볼 수 있습니다. , CSS를 적용 할 때

명심 예 :

또한 사용자 인증 상태에 따라, AttributeModifier와 버튼의 모양 (즉, CSS 클래스)를 변경할 수 있습니다

.rightPanel_publish_button { 
    display: block; 
    width: 90px; 
    height: 27px; 
    background: url(../imgs/right_panel_icon03.gif) left top repeat-y; 
    text-decoration: none; 
    color: black; 
    padding: 12px 0px 0px 35px; 
} 

Answer 5

:

myButton.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() { 

     private static final long serialVersionUID= 1L; 

     @Override 
     public String getObject() { 
      if (!isAuthorized()) { 
       return "rightPanel_unauthorized"; 
      } 
      return "rightPanel_publishbutton"; 
     } 
    })); 

CSS에서 필요에 따라 ".rightPanel_unauthorized"스타일을 정의합니다.