윅스 (Wix) 코딩 예제 - 이벤트에 사용자 정의된 상호 작용 추가하기 (Wix Code Tutorial: Adding Custom Interactivity with Events)

윅스 (Wix) 코딩 예제 - 이벤트에 사용자 정의된 상호 작용 추가하기 (Wix Code Tutorial: Adding Custom Interactivity with Events)

 

 

 

설명)

이 예제에서는 페이지가 로드될 때 숨겨지도록 이미지를 설정하는 방법을 보여주고 방문자가 버튼을 클릭할 때만 표시되도록 설정합니다. 우선 이미지와 버튼을 페이지에 추가한 다음 클릭할 때 코드를 실행하도록 버튼을 설정합니다. 그런 다음 페이지가 자동으로 로드되지 않도록 이미지를 구성합니다. 마지막으로 버튼을 클릭하면 이미지가 표시되는 코드가 애니메이션과 함께 추가됩니다.

 

1. 개발자 도구 활성화 (Turn on Developer Tools)

윅스 코드(Wix Code)는 윅스 에디터(Wix Editor)에 고급 기능을 추가하여 보다 상호작용하는 동적인 사이트를 만들 수 있도록 합니다.

 

개발자 도구를 사용하려면 다음 단계를 따릅니다.

에디터 맨 위 상단 메뉴에서 코드를 클릭한 다음 [개발자 도구 활성화]를 클릭합니다.

 

이 작업을 완료하면 에디터에서 몇 가지 변경 사항을 확인할 수 있습니다.

• 속성 패널이 나타납니다. 창을 닫으면 도구 메뉴에서 다시 열 수 있습니다.

• 코드 패널이 에디터의 맨 아래에 추가됩니다.

• 사이트 구조 사이드 바가 에디터의 왼쪽에 추가됩니다.

• 데이터베이스 및 사용자 입력을 포함하여 추가 메뉴에서 더 많은 요소들을 사용할 수 있습니다.

 

 

 

 

2. 사용자 액션에 반응하도록 요소 설정 (Set Up an Element to React to a User Action)

사이트는 이벤트 핸들러로 사용자 작업에 반응할 수 있습니다. 요소에 이벤트 핸들러를 추가하면 사이트에 요소를 보고 해당 이벤트가 발생했는지 확인하게 됩니다. 이벤트가 발생이 되었다면, 사이트에서 일부 코드를 실행해야 합니다.

 

버튼을 클릭할 때 표시할 이미지를 설정하려면,

1. 귀하의 페이지에 버튼과 이미지를 추가합니다.

2. 버튼을 선택합니다. 속성 패널에 버튼의 속성이 표시됩니다.

3. 속성 패널에서 onClick 이벤트 위로 마우스를 이동하고 +를 클릭한 다음 엔터(Enter) 키를 누릅니다.

4. 코드 패널이 확장되고 이벤트 핸들러의 함수가 코드에 추가됩니다.

 

 

 

3. 이벤트 핸들러에 코드 추가 (Add Code to Your Event Handler)

이제 페이지를 로드할 때 이미지가 표시되지 않도록 이미지를 설정한 다음, 버튼을 클릭할 때 이미지가 나타나도록 코드를 추가해야 합니다. 상호 작용은 윅스 코드 API(Wix Code API)를 사용하여 코딩됩니다. 예를 들어 이미지를 표시하려면 image 요소에 .show() 함수를 사용합니다.

 

이미지를 로드할 때 숨겨지고, 버튼을 클릭하면 표시되도록 설정하려면,

1. 이미지를 선택한 다음 속성 패널에서 로드시 숨김을 선택합니다.

2. 이미지 위로 마우스를 가져갑니다. 왼쪽 위 모서리에 #으로 시작하는 요소의 ID가 표시됩니다. 나중에 다시 사용을 해야하기 때문에 ID를 기억합니다.

3. 코드 패널의 "이 이벤트에 대한 코드를 여기에 추가하십시오(Add your code for this event here)"에 엔터 키를 눌러 함수 안에 줄을 추가합니다.

4. $w를 입력한 다음 목록에서 이미지 ID를 선택합니다. 이미지를 선택하는 코드가 추가됩니다.

5. 마침표를 누릅니다. 이미지 요소와 함께 사용할 수 있는 모든 기능의 목록이 나타납니다. 아래로 스크롤하여 show(animationName)을 선택합니다. 코드가 추가됩니다.

다음 단계에서는 animationName 표시자를 사용하여 버튼을 클릭할 때 이미지가 나타나는 애니메이션을 만듭니다.

 

 

 

 

 

4. 애니메이션 추가 (Add an Animation)

많은 함수들은 옵션 매개 변수를 사용하여 함수의 작동 방식을 변경하는 것을 허용합니다. 예를 들어, FadeIn, DropIn, FlyIn, SpinIn과 같은 애니메이션을 "show"기능에 추가할 수 있습니다. 버튼을 클릭할 때 애니메이션을 추가하려면 코드에서 animationName 표시자 텍스트를 선택하고 따옴표를 포함하여 "SlideIn"을 입력합니다.

 

 

이제 버튼을 클릭하면 "SlideIn"애니메이션으로 이미지에서 "Show" 함수가 실행됩니다.

 

노트 :

애니메이션을 사용하지 않으려면 animationName 표시자 텍스트를 삭제하고 빈 괄호는 그대로 둡니다. 이미지는 애니메이션없이 나타납니다.

 

다음 단계

윅스 코드(Wix Code)를 사용하면 더 많은 것을 할 수 있습니다 :

- 윅스 (Wix) 코딩 - API 개요 (Wix Code: API Overview) - 윅스 코드 API(Wix Code API)를 사용하여 더 많은 이벤트 및 이벤트 핸들러를 추가합니다.

- 슬라이드쇼 요소를 사용하여 레이아웃이 교대로 구성된 섹션을 만듭니다.

- 접을 수 있는 섹션을 추가합니다.

- 뷰포트에 들어갈 때 요소에 상호 작용을 추가합니다.

- 코드를 사용하여 텍스트, 이미지, 갤러리, 반복 레이아웃 및 기타 요소를 조작합니다.

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-adding-custom-interactivity-with-events