jQuery UI에서 라디오 버튼 이미지 변경

Question

jQuery UI를 사용하여 라디오 버튼 세트가 포함 된 퀴즈 모듈을 코딩하고 있습니다. 버튼의 색상이나 이미지를 변경하려면 어떻게해야합니까?

Answer 1

이상적으로 사용하는 CSS 파일을 다운로드해야합니다, 당신은 당신이 멀리 그것으로 얻을 수 있다면 Themeroller를 사용하는 것이 좋습니다. 그러나 jQuery UI 버튼의 기능을 그대로 유지하면서 사용자 정의 이미지 배경 및 사용자 정의 아이콘과 같이 완전히 사용자 정의 할 수있는 항목을 원한다면 여전히 사용할 수 있습니다. 기본 jQuery UI CSS 스타일을 재정의하고 새로운 CSS 스타일을 만드는 데 더 많은 작업이 필요할 것입니다. 예를 들어

: 왼쪽에있는 버튼은 여전히 ​​jQuery를 UI 버튼하지만 사용자 정의 아이콘과 배경 동안

오른쪽에있는 버튼을 Themeroller과 스타일 JQuery와 UI 버튼입니다.

배경을 가진 시작하고 아이콘 이미지 :

.house{ 
    background-image: url("./yourIconImage.png") !important; 
    width: 45px !important; 
    height: 45px !important; 
    margin-left: -22px !important; 
    margin-top: -22px !important; 
} 

#houseLabel.ui-state-active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px; 
} 


.background 
{ 
    width: 60px !important; 
    height: 60px !important; 
    background-image: url("./yourBackgroundImage.png") !important; 
    border: 0px solid black !important; 
    background-position: 0px 0px; 
} 

.background:active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px !important; 
} 
.background:hover 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -60px; 
} 

:

여기

가 작성해야하는 CSS입니다 다음은 사용자 정의 버튼을 달성하기 위해해야 ​​할 일입니다

다음 자바 스크립트에서 버튼을 만들 때 :

$("#button").button({ 
     text: false, 
     icons: { 
      primary: "house" 
     } 
    }); 
    $("#button").next(".ui-button").addClass("background").attr('id', 'houseLabel'); 

# 버튼은 왼쪽 맞춤형 스타일 버튼처럼 보입니다. 물론 올바른 이미지와 치수를 지정하여 리소스에 맞게이 코드를 수정해야합니다.

Answer 2

이미지가 아닙니다.css으로 끝납니다.

클래스의 CSS를 변경하십시오.

• class="ui-button-text" - 버튼 내부 텍스트
• class= "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

아니면 css이 무엇인지 모른다 경우 쉽게 손실됩니다 theme roller과 테마를 변경합니다.
자신의 로컬 CSS 파일을 사용해야한다는 사실을 알고 계십시오.

Answer 3

당신은 당신이 원하는 색상을 선택 themeroller page으로 이동하여 응용 프로그램

Answer 4

나는 같은 방법으로 라디오 버튼에서 쉽게 된 div를 사용하고 여기에 값을 할당되는 솔루션, 당신이 내가 할 수있는 말은 내가 JQuery와 UI