jQuery와 jQuery 아코디언에 항목을 추가하십시오
-
06-09-2019 - |
문제
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 아코디언 항목이 필요했기 때문에이 목적을 위해이 작은 자바 스크립트 기능을 해킹했습니다.
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을 도와 줄 것입니다!