jQuery UI 및 모바일 위젯을 사용하여 Dreamweaver 웹 프로젝트에 앱과 유사한 기능을 추가하는 방법에 대해 학습합니다. 코드를 작성하지 않고 아코디언, 탭, 슬라이더 및 자동 완성 상자를 삽입할 수 있습니다.

위젯은 DHTML 및 JavaScript와 같은 언어로 작성된 작은 웹 애플리케이션으로, 웹 페이지 내에 삽입하여 실행할 수 있습니다. 그중에서도 웹 위젯은 데스크탑 환경을 웹 페이지에 복제하는 데 도움이 됩니다.

아코디언, 탭, 날짜 입력기, 슬라이더 및 자동완성과 같은 jQuery UI 위젯은 데스크탑 환경을 웹으로 가져옵니다.

예를 들어 탭 위젯을 사용하면 데스크탑 애플리케이션의 대화 상자 탭 기능을 복제할 수 있습니다.

Dreamweaver에는 양식 요소를 만드는 데 사용할 수 있는 jQuery 모바일 위젯의 컬렉션과 모바일 웹 앱에서 일반적으로 사용되는 기타 다양한 기능도 포함되어 있습니다. 예를 들어 jQuery 모바일 위젯을 사용하여 텍스트 영역이나 확인란 등의 모바일 친화적인 양식 요소를 추가할 수 있습니다.

jQuery 위젯 삽입

jQuery 위젯을 삽입하면 다음이 코드에 자동으로 추가됩니다.

  • 모든 종속 파일에 대한 참조
  • 위젯의 jQuery API를 포함하는 스크립트 태그. 동일한 스크립트 태그에 다른 위젯이 추가됩니다.

jQuery 위젯에 대한 자세한 내용은 http://jqueryui.com/demos/를 참조하십시오.

참고:

jQuery 효과의 경우 효과를 추가할 때 jquery-1.8.24.min.js 파일이 자동으로 포함되기 때문에 이 파일에 대한 외부 참조는 추가되지 않습니다.

  1. 페이지에서 위젯을 삽입할 위치에 커서를 놓습니다.

  2. 삽입 > jQuery UI를 선택하고 삽입할 위젯을 선택합니다.

    삽입 패널을 사용할 경우 삽입 패널의 jQuery UI 섹션에 위젯이 있습니다.

jQuery 위젯을 선택하면 속성 패널에 jQuery 위젯의 속성이 표시됩니다.

라이브 뷰 또는 jQuery 위젯을 지원하는 브라우저에서 jQuery 위젯을 미리 볼 수 있습니다.

jQuery 위젯 수정

  1. 수정할 위젯을 선택합니다.

  2. 속성 패널에서 속성을 수정합니다.

    예를 들어 탭 위젯에 탭을 더 추가하려면 위젯을 선택하고 속성 패널에서 “+”를 클릭합니다.

모바일 jQuery 위젯 삽입

  1. jQuery 모바일 위젯을 사용하기에 앞서 삽입 > jQuery Mobile > 페이지를 선택하여 jQuery Mobile 페이지를 우선 정의해야 합니다.

    jQuery Mobile 파일 대화 상자가 열립니다.

    jQuery Mobile 파일 대화 상자
    jQuery Mobile 파일 대화 상자

  2. jQuery Mobile 파일 대화 상자의 기본 설정을 변경하거나 그대로 두고 확인을 클릭합니다.

  3. 이어서 열리는 페이지 대화 상자에서 ID 필드에 이름을 입력하고 내 모바일 페이지에서 머리글 및 바닥글 섹션이 표시되도록 할지 여부에 따라 머리글 및 바닥글 옆에 있는 확인란을 선택하거나 선택 해제합니다.

    페이지 대화 상자
    페이지 대화 상자

  4. Dreamweaver에서 열리는 페이지에서 머리글, 내용 및 바닥글 텍스트를 내 모바일 페이지에서 표시하려는 텍스트, 이미지 및 기타 요소로 대체합니다.

    참고:

    소형 모바일 화면에서 표시되도록 텍스트의 길이는 짧게, 이미지의 크기는 작게 유지하십시오.

  5. 필요에 따라 기타 jQuery Mobile 위젯을 추가합니다.

  6. 디바이스에서 해당 페이지를 미리 봅니다.

    자세한 내용은 여러 디바이스에서 Dreamweaver 웹 페이지 미리보기를 참조하십시오.

  7. jQuery 모바일 페이지 및 모든 관련 파일을 저장합니다.

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

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