윅스 (Wix) 코딩 강의 초급 (Beginner) - 토글 버튼 (State Toggle) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 토글 버튼 (State Toggle) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 토글 버튼 (State Toggle) - 상호작용 (Interaction)

강의 내용 요약

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

 

멀티스테이트 박스를 활용해서 다른 내용을 보여주는 토글 버튼을 만듭니다.

 

 

예제 보러가기 (View Example)

Home | State Toggle T

 

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

Log In | Wix

 

 

강의 내용 만드는법

멀티스테이트 박스 구성요소를 활용하여 다양한 뷰의 모습을 웹사이트에 보여줍니다. 이 예제에서는 스마트폰의 앞면과 뒷면을 웹사이트에 만들어놓은 토글 버튼 조작을 통해서 보여줍니다.

 

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

• 멀티 스테이트 상자 (Multi-State Box) : 앞면과 뒷면 이미지와 텍스트를 구성할 상자
• 이미지, 텍스트 : 앞면과 뒷면에 대한 콘텐츠
• 4개의 버튼 : ID가 "Front Face"인 두 개의 버튼, ID가 "Back Face"인 두 개의 버튼

 

코드 (Code)

Home

const glideOptionsRight = {
	"duration": 450,
	"angle": 270,
	"distance": 202
};

const glideOptionsLeft = {
	"duration": 450,
	"angle": 90,
	"distance": 202
};

const fadeOptions = {
	"duration": 100
};

$w.onReady(function() {
	$w('#leftBtnWhite').onClick(toggleFront);
	$w('#rightBtnBlack').onClick(toggleFront);
	$w('#rightBtnWhite').onClick(toggleBack);
	$w('#leftBtnBlack').onClick(toggleBack);
})

function toggleFront() {
	$w('#stateBox').changeState("back");
	$w('#leftBtnWhite').hide("fade", fadeOptions);
	$w('#leftBtnBlack').show();
	$w('#rightBtnBlack').hide("fade", fadeOptions);
	$w('#rightBtnWhite').show("glide", glideOptionsRight);
}

function toggleBack() {
	$w('#stateBox').changeState("front");
	$w('#leftBtnBlack').hide();
	$w('#leftBtnWhite').show("glide", glideOptionsLeft);
	$w('#rightBtnWhite').hide("fade", fadeOptions);
	$w('#rightBtnBlack').show();
}

 

 

API

$w.MultiStateBox API

$w.Button API

$w.Image API

$w.Text API

 

 

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 초급 (Beginner) - 축소 확장 구성요소 만들기 (Collapse Elements) - 상호작용 (Interactions)

윅스 (Wix) 코딩 초급 (Beginner) - 사이트 콘텐츠 변경하기 (Change Site Content) - 상호작용 (Interactions)

윅스 (Wix) 코딩 중급 (Intermediate) - 다크 모드, 나이트 모드 만들기 (Dark Mode) - 상호작용 (Interactions)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

State Toggle | Corvid by Wix Examples | Wix.com