집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 콘텐츠 접기 효과 플러그인 사용예 분석(데모 소스코드 포함)_jquery

jQuery 콘텐츠 접기 효과 플러그인 사용예 분석(데모 소스코드 포함)_jquery

WBOY원래의: 2016-05-16 15:03:171396검색

이 기사의 예에서는 jQuery 콘텐츠 접기 효과 플러그인의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>jQuery Collapsible Fieldset</title>
  <script src="js/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="js/jquery.coolfieldset.js"></script>
  <link rel="stylesheet" type="text/css" href="css/jquery.coolfieldset.css" />
</head>
<body>
  <h1>jQuery Collapsible Fieldset</h1>
  <br/>
  <fieldset id="fieldset1" class="coolfieldset">
    <legend>Default</legend>
    <div>
      <p>By default the <b>fieldset</b> is opened or expanded at start. Click on its <b>legend</b> to close or collapse it.</p>
      <p>The code is simply like below</p>
<pre class="brush:php;toolbar:false">
$('#fieldset1').coolfieldset();

Closed at start

If we want the fieldset to be closed or collapsed at start, just add {collapsed:true} as the argument.

$('#fieldset2').coolfieldset({collapsed:true});

Animation Speed

You can also define the animation speed for the fieldset while collapsing or expanding by using speed option. Acceptable values are "fast", "medium", "slow", or a number in millisecond.

$('#fieldset3').coolfieldset({speed:"fast"});

No Animation

If you don't want to use animation effect, please use animation option and fill its value with false.

$('#fieldset4').coolfieldset({animation:false});

Notes :

All content inside fieldset (except the legend tag) should be placed inside the div tag.
Edit the jquery.coolfieldset.css to change the fieldset style.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 특별 주제를 확인할 수 있습니다. "JQuery 전환 효과 및 기술 요약", "jQuery 드래그 효과 및 기술 요약 ", "JQuery 확장 기술 요약", "jQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", " jquery 선택기 사용법 요약 " 및 "jQuery 공통 플러그인 및 사용법 요약 "

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jquery를 사용하여 css_jquery에서 !important로 스타일 속성을 수정하는 방법다음 기사：jquery를 사용하여 css_jquery에서 !important로 스타일 속성을 수정하는 방법

jQuery 콘텐츠 접기 효과 플러그인 사용예 분석(데모 소스코드 포함)_jquery

관련 기사