윅스 (Wix) 코딩 예제 - 보기-더보기 기능 링크 만들기 (Wix Code Tutorial: Creating a Show-More Link)

윅스 (Wix) 코딩 예제 - 보기-더보기 기능 링크 만들기 (Wix Code Tutorial: Creating a Show-More Link)

 

 

 

설명)

 

이 예제에서는 윅스 코드(Wix Code)를 사용하여 read-more 링크가 있는 확장 가능한 텍스트 상자를 만드는 방법을 설명합니다. 텍스트 요소에 직접 입력하는 텍스트인 정적 텍스트나 또는 콜렉션 중 하나의 텍스트인 동적 텍스트를 사용하여 이 작업을 수행할 수 있습니다. 전체 텍스트가 표시되면 사라지는 단순한 "더보기(Show More)"버튼을 갖도록 선택할 수도 있고 전체 텍스트와 짧은 텍스트를 표시하는 것을 토글 할 수 있는 버튼을 정의할 수도 있습니다. 이 예제는 이러한 모든 옵션을 다룹니다.

 

 

예제)

 

 

 

 

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

 

- 텍스트 요소와 버튼 설정하기

- 표시할 텍스트 제어하기

- 버튼 제어하기

 

 

 

파트 1 : 텍스트 요소 및 버튼 설정하기 (Part 1: Setting Up the Text Element and the Button)

1. 귀하의 페이지에 텍스트 요소를 추가합니다.

- 정적 텍스트를 표시하려면 전체 텍스트를 지금 입력할 수 있습니다.

- 컬렉션의 컨텐츠를 표시하려면 텍스트 요소를 그대로 두거나 [text to display]와 같이 입력합니다.

 

2. 버튼을 추가하고 "더보기 (Show more)"라고 라벨합니다.

3. 텍스트 상자 바로 아래에 단추를 배치하여 위쪽 가장자리가 텍스트 요소의 아래쪽 가장자리에 닿도록 합니다. 아래 그림과 같아야합니다.

 

 

 

 

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

5. 아래 코드를 복사하여 패널 맨 위에 표시되는 코드 위에 붙여 넣습니다.

 

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

 

 

 

이 코드는 fullText와 shortText의 두 가지 전역 변수를 정의합니다. fullText는 방문자가 "더보기 (Show more)"버튼을 클릭한 후 표시될 텍스트의 전체 버전을 저장합니다. shortText는 처음에 페이지에 표시되는 텍스트 버전을 저장합니다 (토글 버튼을 만들면 다시 표시됩니다).

 

 

노트 :

텍스트가 커지고 축소되면 버튼이 자동으로 페이지 위아래로 이동합니다. 자세한 내용은 이 글을 참조합니다.

 

 

파트 2 : 페이지 로드에 표시되는 텍스트 제어하기 (Part 2: Controlling the Text That Is Displayed on Page Load)

이 예제의 이 부분에 있는 코드는 페이지가 처음 로드될 때 텍스트 요소에 표시되는 짧은 버전의 텍스트를 만듭니다. 코드는 먼저 단축 텍스트의 길이를 정의하고 shortTextLength 변수에 저장합니다. 이 예제에서는 shortTextLength가 40으로 설정됩니다. 그러면 코드에서 전체 텍스트를 읽고 fullText 변수에 저장합니다. 그런 다음 첫 번째 shortTextLength 문자를 추출하고 줄임표를 추가하여 텍스트의 축약된 버전을 계산합니다. 이 텍스트는 shortText 변수에 저장됩니다.

 

 

텍스트 요소에 직접 입력하는 텍스트인 정적 텍스트로 이 작업을 수행할 수 있습니다. 컬렉션 중 하나에서 텍스트 입력란(필드)의 내용인 동적 텍스트를 사용할 수도 있습니다.

 

 

정적 텍스트로 작업하기 (Working with Static Text)

1. 아래 코드를 복사하여 "//TODO: write your page related code here..."라는 줄 위에 붙여 넣습니다. 원하는 경우 해당 행을 삭제할 수 있습니다.

 

// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;

 

 

 

 

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

"#myTextElement": 설정 섹션의 1 단계에서 추가한 텍스트 요소의 ID입니다 (ID를 보려면 마우스를 올려 놓습니다).

 

3. 텍스트를 처음 40자까지만 표시하려면 페이지를 미리봅니다. 끝에는 줄임표가 표시됩니다. 아직 코드를 작성하지 않았기 때문에 버튼을 클릭하지 않습니다.

 

 

코드 이해하기 (Understanding the Code)

아래 이미지는 코드 패널에서 코드가 어떻게 보이는지 보여줍니다. 코드 패널 툴바에 모든 것을 표시하는 

 아이콘을 클릭합니다.

 

 

 

 

 

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

6행은 shortTextLength 변수를 정의하고 이를 40으로 설정합니다. 단축된 텍스트 버전을 작성할 때 사용할 문자 수입니다. 이것을 변수로 정의하면 코드를 이해하기 쉽고 나중에 수정할 때 더 쉽게 수정할 수 있습니다.

8행에서 text 속성은 텍스트 요소의 내용을 읽고 fullText 변수에 문자열로 저장합니다.

10행은 표준 자바스크립트(Javascript) 함수 substr을 사용하여 fullText 변수에서 문자열의 처음 40자를 추출합니다 (6 행에서 shortTextLength를 40으로 설정했기 때문에). 그런 다음 끝에 줄임표를 추가하고 전체 문자열을 shortText 변수에 저장합니다.

12행은 myTextElement의 text 속성을 shortTextvariable의 내용으로 설정합니다. 즉, 페이지가 처음 로드될 때 텍스트 요소의 내용을 텍스트의 축약된 버전으로 바꿉니다.

 

 

 

동적 텍스트로 작업하기 (Working with Dynamic Text)

이 섹션에서는 텍스트 요소를 컬렉션의 콘텐츠로 채우려는 경우 필요한 코드를 보여줍니다. 이 작업을 수행하려면 페이지에 데이터세트가 있어야합니다. 이것은 일반 페이지 및 동적 항목 및 카테고리 페이지에서 작동합니다.

이번에는 코드가 먼저 현재 표시된 항목의 텍스트 입력란(필드) 내용을 읽고 fullText 변수에 저장합니다. 우리가 모든 가능성을 커버 할 수 있도록 코드는 2개의 체크를 실행합니다 :

 

1. 문제의 입력란(필드)에 실제로 표시할 텍스트가 있는지 확인합니다. 그렇지 않으면 텍스트 요소와 버튼이 모두 축소됩니다. 즉 방문자가 위에있는 텍스트가 없으면 "더보기 (Show more)"버튼이 표시되지 않습니다.

 

2. 텍스트의 길이를 검사하여 shortTextLength 변수에 정의된 값보다 긴지 확인합니다. 그렇지 않으면 텍스트 요소에 전체 텍스트가 표시되고 버튼이 축소됩니다. 즉, 표시할 텍스트가 더 이상 없기 때문에 방문자가 '더보기 (Show more)'버튼을 볼 수 없습니다.

 

 

이 두 가지 검사가 모두 통과하면 텍스트의 축약된 버전이 계산되고 표시됩니다. 이 코드 부분은 정적 텍스트의 위 코드와 동일합니다.

아래 코드를 복사하여 onReady(function ()) 아래 페이지의 코드 패널에 붙여 넣을 수 있습니다.

 

$w("#dynamicDataset").onReady(function () {
  // how many characters to include in the shortened version
  const shortTextLength = 40;
  // set the fullText variable to be the text from the collection
  fullText = $w('#dynamicDataset').getCurrentItem().textField;
  // if no text to display, collapse the text element and the button
  if (!fullText) {
    $w('#myTextElement').collapse();
    $w('#myButton').collapse();
  } else {
  // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
    if (fullText.length <= shortTextLength) {
      $w('#myTextElement').text = fullText;
      $w('#myButton').collapse();
    } else {
    // create the shortened version of the text and display it in the text element
      shortText = fullText.substr(0, shortTextLength) + "...";
      $w('#myTextElement').text = shortText;
    }
  }
});

 

 

 

다음의 것들을 바꿉니다.

- "#dynamicDataset : 페이지의 데이터세트 ID (마우스를 가져가면 해당 데이터로 이동)

- textField : 컬렉션에 있는 입력란(필드)의 입력란(필드) 키로서 표시되는 텍스트를 포함합니다.

- "#myTextElement": 설정 섹션의 1단계에서 추가한 텍스트 요소의 ID입니다 (해당 ID를 보려면 마우스를 올려 놓습니다.)

- "#myButton": 설정 섹션의 2단계에서 추가한 버튼 ID (해당 ID를 보려면 마우스를 올려 놓습니다.)

 

 

 

 

코드 이해하기 (Understanding the Code)

아래 이미지는 코드 패널에서 코드가 어떻게 보이는지 보여줍니다. 코드 패널 툴바에 모든 것을 표시하는 

 아이콘을 클릭합니다.

 

 

노트 :

이 섹션에서는 이전 섹션과 다른 코드 행에 대해서만 설명합니다.

 

 

 

 

 

 

6행은 onReady( ) 함수의 데이터세트를 호출합니다. 이는 데이터세트가 현재 항목에 대한 모든 정보를 로드한 후에 실행할 코드를 정의합니다.

8행에서는 getCurrentItem( ) 함수를 호출하여 현재 항목의 textField 내용을 읽은 다음 fullText 변수에 저장합니다.

10-12행은 fullText 변수에 값이 있는지 확인합니다. 컬렉션 내의 입력란(필드)가 비어있는 경우, 그 입력란(필드)는 getCurentItem( )에 의해 돌려 주어지지 않기 때문에, fullText는 값을 가지지 않습니다. 이 경우 표시할 내용이 없으므로 텍스트 요소와 버튼이 모두 축소됩니다.

15-17행은 fullText 변수에 저장된 텍스트의 길이를 확인합니다. shortTextLength 문자보다 작으면 16행은 텍스트 요소에 전체 텍스트를 표시하고 17행은 버튼을 접습니다.

 

fullText 변수의 내용이 shortTextLength 문자보다 긴 경우 20-22행은 짧은 텍스트를 계산하여 텍스트 요소에 표시합니다. 코드의 이 부분은 이 예제의 정적 텍스트 부분에 있는 코드와 동일합니다.

 

 

 

파트 3 : 버튼 제어하기 (Part 3: Controlling the Button)

예제의 이 부분은 "더보기 (Show more)"버튼을 제어하는 ​​코드를 제공합니다. 두 가지 옵션이 있습니다.

- 전체 텍스트가 표시되면 "더보기 (Show more)"버튼이 사라집니다.

- 버튼은 "더보기 (Show more)"와 "덜보기(Show less)"사이를 토글합니다.

 

두 옵션 모두 onClick 이벤트 핸들러가 필요합니다.

 

 

 

버튼에 onClick 이벤트 핸들러 추가하기 (Adding an onClick Event Handler to Your Button)

onClick 이벤트 핸들러는 방문자가 버튼을 클릭할 때만 실행되는 코드를 추가합니다.

1. 버튼을 선택합니다.

2. 속성 패널에서 "onClick"위로 마우스를 이동하고 + 아이콘을 클릭한 다음 앤터(Enter) 키를 누릅니다.

코드 패널의 하단에 추가된 코드는 버튼의 ID와 함께 아래 이미지처럼 보입니다.

 

 

 

 

"더보기 (Show more)"버튼 코드 (Code for the "Show More" Button)

1. 아래 코드를 복사하여 "//Add your code for this event here:" 라는 줄 위에 이벤트 핸들러 함수에 붙여 넣으십시오. 원하는 경우이 행을 삭제할 수 있습니다.

 

// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();

 

 

 

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

- "#myTextElement": 텍스트 요소의 ID

- "#myButton": 버튼의 ID

 

3. 페이지를 미리보고 버튼을 테스트합니다.

 

 

 

 

코드 이해하기 (Understanding the Code)

 

13행은 #myButton에 대한 onClick 이벤트 핸들러를 정의합니다. 버튼을 클릭하면 이 이벤트 핸들러 다음의 코드가 실행됩니다.

15행은 myTextElement의 text 속성을 fullTextvariable의 내용으로 설정합니다. fullText 변수는 텍스트 요소에 입력한 모든 텍스트 또는 컬렉션의 현재 항목에 있는 텍스트를 모두 보유한다는 것을 기억합니다. 즉, 전체 텍스트를 표시하는 코드입니다.

16행은 버튼을 접습니다.

 

 

 

"더보기 (Show more)/덜보기(Show less)" 토글 버튼 코드 (Code for the "Show More/Show Less" Toggle Button)

예제의 이 부분에서는 모든 텍스트와 짧은 텍스트를 번갈아 표시하는 버튼을 만드는 방법을 보여줍니다.

 

토글 버튼은 먼저 현재 조건을 확인한 다음 해당 조건에 맞는 코드를 실행하여 작동합니다. 이 경우 먼저 텍스트 요소의 내용을 확인합니다.

- 텍스트 요소가 현재 텍스트의 축약된 버전을 표시하고 있는 경우, 전체 버전을 표시하고 버튼 라벨을 "덜보기(Show less)"로 변경하도록 지시합니다.

- 텍스트 요소가 현재 전체 텍스트를 표시하는 경우 텍스트의 축소된 버전을 표시하고 버튼의 라벨을 "더보기(Show more)"로 변경하도록 지시합니다.

 

 

1. 아래 코드를 복사하여 "//Add your code for this event here:"라는 줄 위에 이벤트 핸들러 함수에 붙여 넣으십시오. 원하는 경우 이 행을 삭제할 수 있습니다.

 

// check the contents of the text element 
if ($w("#myTextElement").text === shortText) {
  // if currently displaying short text, display the full text
  $w("#myTextElement").text = fullText;
  $w("#myButton").label = "Show less";    
} else {
  // if currently displaying full text, display the short text
  $w("#myTextElement").text = shortText;
  $w("#myButton").label = "Show more";
}

 

 

 

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

- "#myTextElement": 텍스트 요소의 ID

- "#myButton": 버튼의 ID

 

3. 페이지를 미리보고 버튼을 테스트합니다.

 

 

 

코드 이해하기 (Understanding the Code)

이 섹션에서는 토글 버튼을 제어하는 ​​코드에 대해 설명합니다. 아래 이미지는 코드 패널에서 코드가 어떻게 보이는지 보여줍니다. 코드 패널 툴바에 모든 것을 표시하는 

 아이콘을 클릭합니다.

 

 

노트 :

이 섹션에서는 이전 섹션과 다른 코드 행에 대해서만 설명합니다.

 

 

 

15행에서는 myTextElement가 현재 짧은 텍스트를 표시하는지 확인합니다.

 

myTextElement가 현재 짧은 텍스트를 표시하고 있는 경우 16행과 17행이 실행됩니다.

- 16행은 text 속성을 fullText 변수의 내용으로 설정합니다. fullText 변수는 텍스트 요소에 입력한 모든 텍스트 또는 컬렉션의 현재 항목에 있는 텍스트를 모두 보유한다는 것을 기억합니다. 즉, 전체 텍스트를 표시하는 코드 행입니다.

- 17행은 버튼의 라벨을 "덜보기(Show less)"로 변경합니다.

 

 

myTextElement가 현재 전체 텍스트를 표시하고 있으면 20행과 21행이 실행됩니다.

- 20행은 text 속성을 shortText 변수의 내용으로 설정합니다. 즉, 버튼을 클릭하면 텍스트 요소의 내용이 텍스트의 축약된 버전으로 바뀝니다.

- 21행은 버튼의 라벨을 "더보기(Show more)"로 변경합니다.

 

 

연관된 토픽)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link