jQuery를 모바일 축소 블록

이전 : jQuery를 모바일 탐색 모음

다음 : jQuery를 모바일 그리드

접을 수있는 콘텐츠 블록

유용한 정보의 일부를 저장 - 축소 블록은 숨기거나 내용을 표시 할 수 있습니다.

접을 수있는 콘텐츠 블록을 만들려면 컨테이너 데이터 역할 = "축소"속성을 추가해야합니다. 내부 용기 (DIV)에서, 당신은 HTML 태그를 확인하려면 확장 한 다음 헤더 요소 (H1-H6)를 추가합니다

예

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

»시도

기본적으로, 콘텐츠는 절첩되고있다. 페이지가로드, 사용할 때 콘텐츠를 확장하려면 데이터 붕괴 = "거짓"

예

<div data-role="collapsible" data-collapsed="false" >
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

»시도

중첩 축소 블록

접을 수있는 콘텐츠 블록은 서로 중첩 될 수 있습니다 :

예

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

»시도

	접을 수있는 콘텐츠 블록은 필요에 따라 여러 번 중첩 될 수 있습니다.

접이식 컬렉션

접이식 축소 블록 세트 (아코디언처럼) 함께 그룹화됩니다. 새로운 블록이 배치 될 때, 다른 모든 블록은 접을 수 있습니다.

여러 접을 수있는 콘텐츠 블록을 만든 다음 새 데이터 역할로 축소 컨테이너에 의해 둘러싸인 블록 =의 "축소 세트"의 내용 :

예

<div data-role="collapsible-set" >
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>

»시도