윅스 (Wix) 코딩 예제 - 특정 페이지에 요소 숨기기 (Wix Code Tutorial: Hiding an Element on Certain Pages)

윅스 (Wix) 코딩 예제 - 특정 페이지에 요소 숨기기 (Wix Code Tutorial: Hiding an Element on Certain Pages)

 

 

 

설명)

 

이 예제에서는 윅스 코드(Wix Code)를 사용하여 일부 페이지를 제외한 모든 페이지에 요소를 표시하는 방법에 대해 설명합니다. 다시 말해, 모든 페이지에 표시되도록 설정된 사이트의 요소가 하나 이상의 페이지에서 숨겨지기를 원합니다.

 

일부 요소는 이 설정 (예: Wix Chatbox) 없이는 기능에 따라 기본적으로 모든 페이지에 나타납니다. 이러한 요소에는 이 설정이 필요하지 않습니다. 이 예제의 코드를 계속 사용하여 숨길 수 있습니다.

 

이 예제는 두 부분으로 구성됩니다.

- 복사하여 페이지에 붙여 넣을 수 있는 코드를 포함하여 설정 방법에 대한 지침

- 각 코드 행이 하는 일에 대한 설명

 

 

요소 숨기는 방법 (Instructions)

1. 모든 페이지에 표시되도록 설정된 요소로 시작합니다.

2. 해당 요소를 표시하지 않으려는 페이지로 이동합니다.

3. 페이지의 코드 패널을 엽니다 (아래에서 위로 끌어올 수 있습니다).

4. 아래 코드를 복사하여 코드 패널의 페이지 탭에서 "// TODO: write your page related code here…"이라는 행 아래에 붙여넣습니다.

 

// Hides the element when the page loads
$w("#myElement").hide();

 

 

5. 다음의 것들을 바꿉니다.

- #myElement : 현재 페이지에서 숨길 요소의 ID입니다 (해당 ID를 보려면 마우스를 올려 놓습니다).

6. 페이지를 미리보고 요소가 나타나지 않는지 확인합니다.

 

 

다른 요소를 숨기려면 다음과 같이 모든 요소 ID를 코드 행에 추가하기만하면 됩니다.

 

// Hides these elements when the page loads
$w("#myElement, myElement2, ...").hide();

 

 

코드 이해하기 (Understanding the Code)

아래 이미지는 코드 패널에서 코드가 어떻게 보이는지 보여줍니다.

 

 

 

 

 

3행은 onReady( ) 함수를 호출합니다. 이것은 페이지 로드가 끝날 때 실행할 코드를 정의합니다.

5행은 hide( ) 함수를 호출하여 요소의 hidden 속성을 true로 설정합니다. 즉 요소가 "Show on all pages"로 설정되어 있어도 요소가 이 페이지에 표시되지 않습니다.

요소를 표시하려는 경우 hide( ) 함수를 show( )로 변경할 수 있습니다.

 

 

명심해야할 한 가지는 숨겨진 요소가 여전히 페이지의 공간을 차지한다는 것입니다. 즉, 페이지의 레이아웃에 따라 요소가 숨겨져 있어도 여전히 간격이 남아있을 수 있습니다. 요소를 숨기는 대신 접힌 요소가 페이지의 공간을 차지하지 않으므로 collapse( ) 함수를 사용할 수 있습니다. 축소 요소가 페이지 레이아웃에 미치는 영향에 대한 자세한 내용은 여기를 참조합니다.

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-hiding-an-element-on-certain-pages