jQuery의 접기 panel_jquery에 대한 심층 분석-JS 튜토리얼-php.cn

jQuery의 접기 panel_jquery에 대한 심층 분석

WBOY

풀어 주다： 2016-05-16 17:31:59

원래의

1164명이 탐색했습니다.

1: 접이식 패널은 다양한 카테고리의 콘텐츠를 다양한 패널에 배치할 수 있습니다. 이러한 패널은 페이지에 쌓여 있으며 사용자는 각 패널의 제목을 클릭하여 확장할 수 있습니다. , 패널 내용 보기
동시에 다른 패널은 자동으로 접혀 숨겨집니다
$(selector).accordion(options);
옵션 선택할 수 있습니다. 속성은 다음과 같습니다:
disabled, active, animation, autoHeight,clearStyle,collapsible, event, fillSpace, header, Icons, Navigation, NavigationFilter
간단한 예:

코드 복사 코드는 다음과 같습니다.

< ;title>아코디언 자동 높이

<script> $(function( ) { $( "#accordion" ).accordion({ autoHeight: false }); }); </script>

제목 1

이것은 작은 콘텐츠입니다

제목 2>

내용이 매우 깁니다
내용이 매우 깁니다
내용이 매우 깁니다
내용이 매우 깁니다
콘텐츠가 매우 깁니다
콘텐츠가 매우 깁니다. 콘텐츠가 매우 깁니다. 콘텐츠가 매우 깁니다

콘텐츠가 매우 깁니다
콘텐츠가 매우 깁니다

< ;/div>

이것은 아코디언 패널과 함께 작동하는 또 다른 모듈입니다.

렌더링:

2: 아코디언 패널 아이콘 사용자 정의

코드 복사

코드는 다음과 같습니다.

아코디언 아이콘

<script> $( document).ready(function() { var Triangle_icon = { header : "ui-icon-triangle-1-e", headerSelected : "ui-icon-triangle-1-s" }; var Circle_arrow_icon = { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s" }; /* 初始化折叠면板 */ $('#accordion').accordion(); $( "#toggle" ).toggle(function() { $( "#accordion" ).accordion( "option", "icons", Circle_arrow_icon ); }, function() { $( "#accordion" ).accordion( "옵션", "아이콘", 삼각형_아이콘 ); }); }); </script>

标题 1

这是一段内容

程序效果图：

3：能自定义排列顺序的折叠face板
折叠面板可以作为分类项目的主目板来使用，因为操作习惯, 户丸希望能够마음대로 정하기

AccordionSortable

< ;script type="text/javascript" src="JS/jquery.ui.core.js">

< script type="text/javascript" src="JS/jquery.ui.sortable.js">






标题 1

 这是一段内容







 标题 2


 这是一段内容








标题 3

 < ;div>
 这是一段内容







< /body>

4：折叠面板的方法
파괴, 비활성화 , 활성화, 옵션, 위젯, 활성화, 크기 조정
$('#accordion').accordion("activate", 2);
复system代码代码如下:

아코디언 크기 조정

< ;script>
$(document).ready(function(){
 $( "#accordion" ).accordion({
 fillSpace : true /* 设置为自动填充父元素공간间 */
> size방법 */
 $ ( "#container" ).ressible({
 minHeight : 150,
 resize : function() {
 $( "#accordion" ).accordion( "resize" );
 }
 });
});







标题 1



 这是第一段内容< ;br />



列表项 1
列表项 2
列表项 3& lt;/li>





标题 2



 这是第新段内容
这是第新段内容







 这是第三段内容
这是第三段内容
br是第삼段内容








这是另一个模块，将随着折叠面板容器的大小而改变位置

< ;/html>

렌더링:

위 코드는 먼저 접는 패널을 상위 요소를 자동으로 채울 수 있는 구성 요소로 초기화한 다음 컨테이너의 크기가 자동으로 조정되도록 설정하고 크기가 조정되면 호출합니다. 컨테이너 컨트롤의 크기 조정 방법이 변경되어
드디어 함께 크기 조정되는 효과가 발생합니다.
5: 접이식 패널의 이벤트
변경 및 변경 시작 이벤트
코드 복사 코드는 다음과 같습니다.

$("#accordion" ).accordion({
변경: 함수( 이벤트, ui) {
},
변경 시작: 함수(이벤트, ui) {
}
})

*event: Triggered event object
*ui: View object 에는 4개의 속성이 있습니다. 즉, 현재 패널의 제목을 나타내는 newHeader, 이전 패널의 제목을 나타내는 oldHeader; newContent: 현재 패널의 콘텐츠를 나타냅니다. oldContent는 이전 패널의 콘텐츠를 나타냅니다.
이는 jQuery 객체를 반환합니다