GUI 항목 및 자바 스크립트의 요소

상자를 테스와 비슷한 방법으로 만들려면 어떻게해야합니까? 오른쪽 상단에 X 표시를하고 싶습니다. 그 왼쪽에있는 텍스트와 검은 색 영역이있는 이미지 아래에있는 텍스트. 내가 X를 클릭하면 이것들이 제거되고 오른쪽에있는 상자가 옮겨지고 그 자리를 차지합니다. jquery를 사용하여 어떻게 만들 수 있습니까? 거기에 어떤 종류의 GUI 및 컨테이너 내가 그들을 닫고 삭제할 때 움직이는 상자를 자동화 할 수 있습니다. alt text http://i47.tinypic.com/29wpj5f.jpg GUI 항목 및 자바 스크립트의 요소

출처

2010-01-30 Anonymous

미끄러지는 등의 멋진 애니메이션 효과를 원하지 않는다면 실제로는 약간의 CSS입니다. 그들은 그들의 용기의 경계에 도달 할 때까지 그들은 서로 옆에 쌓아 것

<style> 
    .itembox {float:left;} 
</style>

모든 상자 '폭이 용기에 균일하게 맞는 경우 은 (예를 들어, 그들은 각각 100 픽셀이며, 컨테이너는 폭 300 픽셀입니다) 그런 다음 왼쪽으로 감싸고 다시 쌓으십시오.

<div class="itembox"> <a href="#" class="close">x</a> ... </div> 
<div class="itembox"> <a href="#" class="close">x</a> ... </div> 
<div class="itembox"> <a href="#" class="close">x</a> ... </div>

그 후 사람들이 다시 붕괴 있도록, 문서 흐름에서 하나를 제거하고 숨길 display:none 설정. jQuery를에

$('.itembox .close').click(function() { 
    $(this).parent('.itembox').hide(); 
});

, hide() 세트 display:none : 자바 스크립트에서 닫기 버튼의 클릭 이벤트에 없음에 대한 적절한 itembox의 표시를 설정합니다.

출처

2010-01-30 21:21:23

JS 또는 CSS에 좋지 않습니다. .close가 무엇을 의미하는지/모르겠다. 나는
을 텍스트와 X를 img에서 분리 시키려고합니까? 다시 이미지와 제목 - 이름 사이에? 아니면 객체에 넣을까요? ATM은 X 이미지를 #close에 연결 시켰습니다. 객체를 클릭하면 어떻게 숨 깁니 까? 어쩌면 Google에 키워드는 그 후에 설명 더 나을 것입니다? –

@ acidzombie24 예제 마크 업을 편집하여 더 명확하게했습니다. '.close'는 닫기 버튼을 지정할 클래스를 가리 킵니다. –

저녁 식사 후 나는 그것을 깨달았다. 죄송합니다. 나는 다시 붙어있어 그때 알아 냈어 this.Parent는 $ (this) parent이어야하고 그래서 나는 당신의 답을 쥐었습니다. 솔루션을 가져 주셔서 감사합니다. –

GUI 항목 및 자바 스크립트의 요소

답변

관련 문제