윅스 (Wix) 코딩 강의 중급 (Intermediate) - 캐스캐이딩 선택란 만들기 (Cascading Form) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 캐스캐이딩 선택란 만들기 (Cascading Form) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 캐스캐이딩 선택란 만들기 (Cascading Form) - 데이터 (Data)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내에 방문자가 이전 선택을 기반으로 드랍 다운 메뉴 옵션이 바꿀 수 있는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Wix Code - Examples

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 드랍다운 메뉴
• 버튼
• 텍스트

 

코드 (Code)

states.js

export const usStates = [
{value:"", label: "Select a state"},
{value:"AL", label: "Alabama"},
{value:"AK", label: "Alaska"},
{value:"AZ", label: "Arizona"},
{value:"AR", label: "Arkansas"},
{value:"CA", label: "California"},
{value:"CO", label: "Colorado"},
{value:"CT", label: "Connecticut"},
{value:"DE", label: "Delaware"},
{value:"FL", label: "Florida"},
{value:"GA", label: "Georgia"},
{value:"HI", label: "Hawaii"},
{value:"ID", label: "Idaho"},
{value:"IL", label: "Illinois"},
{value:"IN", label: "Indiana"},
{value:"IA", label: "Iowa"},
{value:"KS", label: "Kansas"},
{value:"KY", label: "Kentucky"},
{value:"LA", label: "Louisiana"},
{value:"ME", label: "Maine"},
{value:"MD", label: "Maryland"},
{value:"MA", label: "Massachusetts"},
{value:"MI", label: "Michigan"},
{value:"MN", label: "Minnesota"},
{value:"MS", label: "Mississippi"},
{value:"MO", label: "Missouri"},
{value:"MT", label: "Montana"},
{value:"NE", label: "Nebraska"},
{value:"NV", label: "Nevada"},
{value:"NH", label: "New Hampshire"},
{value:"NJ", label: "New Jersey"},
{value:"NM", label: "New Mexico"},
{value:"NY", label: "New York"},
{value:"NC", label: "North Carolina"},
{value:"ND", label: "North Dakota"},
{value:"OH", label: "Ohio"},
{value:"OK", label: "Oklahoma"},
{value:"OR", label: "Oregon"},
{value:"PA", label: "Pennsylvania"},
{value:"RI", label: "Rhode Island"},
{value:"SC", label: "South Carolina"},
{value:"SD", label: "South Dakota"},
{value:"TN", label: "Tennessee"},
{value:"TX", label: "Texas"},
{value:"UT", label: "Utah"},
{value:"VT", label: "Vermont"},
{value:"VA", label: "Virginia"},
{value:"WA", label: "Washington"},
{value:"WV", label: "West Virginia"},
{value:"WI", label: "Wisconsin"},
{value:"WY", label: "Wyoming"},
];

export const canadaStates = [
{label: "Alberta",                       value: "AB"},
{label: "British Columbia",              value: "BC"},
{label: "Manitoba",                      value: "MB"},
{label: "New Brunswick",                 value: "NB"},
{label: "Newfoundland and Labrador",     value: "NL"},
{label: "Nova Scotia",                   value: "NS"},
{label: "Northwest Territories",         value: "NT"},
{label: "Nunavut",                       value: "NU"},
{label: "Ontario",                       value: "ON"},
{label: "Prince Edward Island",          value: "PE"},
{label: "Quebec",                        value: "QC"},
{label: "Saskatchewan",                  value: "SK"},
{label: "Yukon",                         value: "YT"},
];

 

Home

import {usStates, canadaStates} from 'public/states';

$w.onReady(function() {
	$w('#state').options = usStates;
	$w('#country').onChange(() => {
		if ($w('#country').value === 'United States') {
			$w('#state').options = usStates;
			$w('#state').placeholder = 'Select a State';
			$w('#state').enable();
		}
		else if ($w('#country').value === 'Canada') {
			$w('#state').options = canadaStates;
			$w('#state').placeholder = 'Select a Province';
			$w('#state').enable();
		}
		else {
			$w('#state').value = '';
			$w('#state').disable();
		}
	});
});

 

Site Code

$w.onReady(function () {
	//TODO: write your page related code here...
});

 

API

$w.Dropdown API

$w.Dropdown - Corvid API Reference

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 기본 설문란 만들기 (Basic Form) - 데이터 (Data)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 축소 확장 폼 만들기 (Collapsing Form) - 데이터 (Data)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 설문조사 폼 만들기 (Multistage Form) - 데이터 (Data)

윅스 (Wix) 코딩 중급 (Intermediate) - 캐스캐이딩 선택란 만들기 (Cascading Form) - 데이터 (Data)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Cascading Form | Corvid by Wix Examples | Wix.com