jQuery UI Spinner의 모양을 이렇게 변경할 수 있을까요?

Question

jQuery UI의 스피너를 사용한 웹페이지가 있습니다. 다들 아시다시피 jQuery UI의 스피너는 텍스트 입력 상자 &#43; ▲▼ 버튼이 붙어있는 하나의 텍스트 입력상자 형태를 띄는데요. 혹시 텍스트 입력상자랑 ▲▼ 버튼을 떨어뜨려서 별개의 엘리먼트로 보이게 할 수 있을까요?아래 이미지처럼요 (이미지는 편집한겁니다 -_-)

아스키 · Answer

굳이 떨어뜨려야 할 이유가 있나요?jqueryui에서 제공해주는 api인데..디자인적으로 떨어뜨려야 한다면..jqueryui가 아닌 직접 ui를 만드셔야 할 겁니다. (<input> 태그와 이미지 사용 &#43; 이벤트처리를 위한 자바스크립트)

마사키군 · Answer

아스키 //굳이 떨어뜨려야 할 이유가 있느냐고 하신다면... 요구사항이라서 그렇습니다 ㅠ_ㅠ&#34;기본으로 제공되는 API로 만들어지는 형태가 이러한데, 굳이 떨어뜨려야 하나요?&#34;라고 물어봤더니, &#34;요구사항이 이렇게 나왔으니 떨어뜨려주셔야겠어요&#34;라고 하시는 바람에... 흑흑 ㅠ_ㅠ

아스키 · Answer

&#64;!마사키군다시 한번 확인하셔야 할 것 같습니다.spinner 디자인은 jquery에서 제공해주는 건데...그걸 손댄다는 건..jqueryui api의 css을 건들어야 하거나 추가해야 한다는..그걸 해줄 디자이너나 css 담당자가 있는가 확인하고 요구하셔야 할 것 같습니다.아니면 위의 <input> 태그와 이미지 사용 &#43; 이벤트처리를 위한 자바스크립트 방식으로 만드시거나요.둘다 디자이너와 함께 만드셔야 할겁니다.

adultcoder · Answer

이런식으로 표현이 되면 되는건가요?$spinner(input)의 부모, span(.ui-spinner) 의 보더를 0으로 !important 강제적용 시켜주시구요.$spinner(input)에 border: 1px solid #aaaaaa !important; height: 20px !important; 강제로 박아주시면 대강 서로 분리되서 보이긴합니다. ^^그외에 라운딩 처리 해주시고, 좌측에 화살표(a) 두놈들 사이즈좀 조절하시면 될것 같네요.저 코드는 참고용이구요,다른 스피너 사용하는 곳이 있다면 class(.ui-spinner) 명칭으로 바꾸지마시고필요한 애들만 찝어서 사용하시면 될것같습니다. 이해 안되시는 부분 있으시면 말씀해주세요.

아스키 · Answer

&#64;탁탁 님 께서 해결해주셨네요..^^

마사키군 · Answer

&#64;탁탁 //답변 고맙습니다.사실은 저도 비슷하게 해결하기는 했는데(.ui-widget-content의 border를 none으로 설정하고, ui-spinner-input의 border와 padding을 변경), 이렇게 했더니 전체 jQuery UI의 외부 border가 사라져서 고민하는 중이었네요 ^^;;;말씀하신 부분 중 조금 이해가 안가는 부분이 있기는 한데(spinner의 input element의 상위 conainter div에 어떻게 액세스하면 좋을지), 이 부분은 제가 직접 고민해보도록 하겠습니다. 정말 고맙습니다.

adultcoder · Answer

마사키군 이미 그정도 생각하셨다면충분히 해결하시겠네요.고생하세요 ^^

마사키군 · Answer

어찌저찌 해결할 수 있었습니다.@탁탁 님 정말 고맙습니다. 제가 자문자답하는 꼴이 됩니다만, 제도 나중에 다시 필요하면 이 글을 볼 겸-_- 조금 자세한 기록을 남겨둡니다.jQuery UI의 Spinner는 지정한 요소의 다음 요소에 상/하 버튼을 생성하고, 이것들을 감싸는 컨테이너 요소로써 요소를 생성합니다. 또한, 요소의 ID 속성은 그대로 유지되므로, 이 ID 속성을 이용해서 요소의 스타일을 지정할 수 있습니다.필요한 스타일은 Spinner의 컨테이너 요소에 적용될 스타일과, 컨테이너에 포함된 요소에 적용될 스타일입니다./* spinner 컨테이너 요소에 적용될 스타일 */ .custom-spinner-style { /* 입력상자와 버튼이 떨어져 보이도록 하기 위해, 컨테이너의 테두리를 제거한다 */ border: none !important; } /* spinner의 요소에 적용될 스타일 */ .custom-spinner-style > input { border: solid 1px silver !important; border-radius: 5px; /* Spinner 위젯이 적용되면서 input 요소에 margin이 생기는데, 이 여백을 제거한다 */ margin: 0px; } 이후에는 생성된 Spinner의 상위 요소, 즉 컨테이너 요소에 위 스타일을 지정해주면 됩니다. $("#spinner").spinner(); $("#spinner").parent().addClass("custom-spinner-style"); /* 한번에 적용하고자 할때는 $("#spinner").spinner().parent().addClass("custom-spinner-style"); */

아스키 · Answer

&#64;탁탁 &#64;마사키군저도 좋은 공부가 되었습니다.고생하셨읍니다...^^

jQuery UI Spinner의 모양을 이렇게 변경할 수 있을까요?

9개의 답변

Q&A 목록