jQuery와 jQuery 아코디언에 항목을 추가하십시오

StackOverflow https://stackoverflow.com/questions/910645

문제

jQuery Accordion 플러그인을 사용하여 일부 데이터의 아코디언을 만듭니다. 그런 다음 사용자가 아코디안에 더 많은 데이터를 추가 할 수 있기를 원합니다. 나는 아코디언을 제대로 기능하도록 설정 한 다음, "목록 항목"을 아코디언 시맨틱과 일치하는 아코디언에 "목록 항목"을 준비하는 함수를 만들었습니다.

새로운 데이터를 데이터베이스에 저장하고 페이지를 새로 고치지 않고 새로 추가 된 요소와 함께 작동하도록 아코디언을 "업데이트"할 수 있습니까?

이 같은:

.accordion('refresh')

아니면 jQuery 1.3에 추가 된 라이브 이벤트와 같은 것이 단서를 얻었습니까?

도움이 되었습니까?

해결책

나는 그것을 테스트하지 않았지만 이것은 아마도 효과가있을 것입니다 : 당신은 id #accordion과의 아코디언을 가지고 있다고 말합니다.

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

기본적으로 아코디언을 파괴하고 재창조하십시오.

업데이트:

이 답변이 작성되었으므로 새로 고침 () 메소드가 아코디언 위젯에 추가되었습니다. 전화로 호출 할 수 있습니다.

$( ".selector" ).accordion( "refresh" );

이 방법에 대한 자세한 내용을 읽을 수 있습니다 여기

다른 팁

새 섹션을 추가하고 이전 섹션을 활성화하려면 다음과 같습니다.

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});

Shahzad가 위에서 언급했듯이 JQuery UI 1.10은이를 더 쉽게 만들었습니다. 보다 문서.

LiveQuery 플러그인을보고 싶을 수도 있습니다. http://plugins.jquery.com/project/livequery

DOM이로드 된 후 이벤트와 바인딩을 추가 할 수 있습니다.

작동중인 ADD/EDIT/DELETE VOR 아코디언 항목이 필요했기 때문에이 목적을 위해이 작은 자바 스크립트 기능을 해킹했습니다.

http://jsfiddle.net/sd6fc/

H3과 Div는 다음 컨벤션에 따라 고유 한 ID가 필요합니다.

<h3 id="divname_hitm_<uniquenumber>"><h3>

해당 DIV에는 다음이 필요합니다

<div id="divname_ditm_<samenumber as h3"></div>

샘플 아코디언 코드 블록

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

재미있게 보내십시오 어쩌면 그것은 ppl을 도와 줄 것입니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top