다양한 jQuery 효과를 사용하여 매력적인 웹 사이트를 디자인하십시오. Dreamweaver의 통합 jQuery를 사용하면 코드를 작성할 필요 없이 슬라이더와 같은 효과를 포함시킬 수 있습니다.

jQuery 효과 추가

  1. Dreamweaver 문서의 디자인 또는 코드 보기에서 jQuery 효과를 적용할 요소를 선택합니다.

  2. Windows > 비헤이비어를 선택하여 비헤이비어 패널을 엽니다.

  3. 더하기(+) 아이콘을 클릭한 다음 효과[를 클릭 후 원하는 효과를 클릭합니다.

    jQuery 효과 추가
    jQuery 효과 추가

    사용자 정의 패널에 선택된 효과의 설정이 나타납니다.

  4. 효과를 적용할 대상 요소 및 효과 지속 시간과 같은 설정을 지정합니다.

    처음 선택한 요소 또는 다른 페이지 요소를 대상 요소로 지정할 수 있습니다. 예를 들어 사용자가 요소 A를 클릭하여 요소 B를 숨기거나 표시하도록 할 경우 대상 요소는 B입니다.

  5. 다중 jQuery 효과를 추가하려면 위의 단계를 반복합니다.

    다중 효과를 선택하면 [비헤이비어] 패널에 표시된 순서대로 효과가 적용됩니다. 효과의 순서를 변경하려면 패널 상단의 화살표 키를 사용합니다.

Dreamweaver는 관련 코드를 문서에 자동으로 삽입합니다. 예를 들어 '희미하게 하기' 효과를 선택하면 다음 코드가 삽입됩니다.

  • jQuery 효과가 작동하는 데 필요한 종속 파일에 대한 외부 파일 참조:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • body 태그의 요소에 적용되는 코드는 다음과 같습니다.
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • 다음과 같은 코드와 함께 스크립트 태그가 추가됩니다.
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

이벤트 기반 jQuery 효과

jQuery 효과를 적용하면 기본적으로 [onClick] 이벤트에 효과가 할당됩니다. [비헤이비어] 패널을 사용하여 효과의 트리거 이벤트를 변경할 수 있습니다.

  1. 원하는 페이지 요소를 선택합니다.

  2. Windows > 비헤이비어 패널에서 설정된 이벤트 보기 아이콘을 클릭합니다.

  3. 현재 적용된 효과와 일치하는 행을 클릭합니다. 첫 번째 열이 이벤트를 선택할 수 있는 드롭다운 목록으로 변경되었습니다.

  4. 원하는 이벤트를 클릭합니다.

jQuery 효과 제거

  1. 원하는 페이지 요소를 선택합니다.

    선택된 페이지 요소에 현재 적용된 모든 효과가 [비헤이비어] 패널에 나열됩니다.

  2. 삭제할 효과를 클릭한 다음 삭제 아이콘을 클릭합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책