윅스 (Wix) 코딩 강의 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

강의 내용 요약

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

 

슬라이드쇼를 활용하여 웹사이트 방문자들이 레이아웃을 바꿀 수 있는 기능을 만듭니다

 

예제 보러가기 (View Example)

Wix Code - Examples

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 슬라이드쇼 구성요소

코드 (Code)

Home

export function moveToGalleryButton_onClick(event) {
	$w('#slideshowWireframe').changeSlide(1);
}

export function moveToListButton_onClick(event) {
	$w('#slideshowWireframe').changeSlide(0);
}

export function buttonList_onClick(event) {
	showList();
}

export function buttonGallery_onClick(event) {
	showGallery();
}
function showGallery() {
	$w('#slideshowTabs').changeSlide(1);
	$w('#buttonList').enable();
	$w('#buttonGallery').disable();	
	$w('#shapeGalleryActive').show();
	$w('#shapeGalleryInactive').hide();
	$w('#shapeListActive').hide();
	$w('#shapeListInactive').show();
}


function showList() {
	$w('#slideshowTabs').changeSlide(0);
	$w('#buttonList').disable();
	$w('#buttonGallery').enable();	
	$w('#shapeGalleryActive').hide();
	$w('#shapeGalleryInactive').show();
	$w('#shapeListActive').show();
	$w('#shapeListInactive').hide();
}

 

Site Code

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

 

 

API

$w.HiddenMixin API

$w.Button API

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 -

윅스 (Wix) 코딩 용어 -

윅스 (Wix) 웹에디터 -

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Change Layout | Corvid by Wix Examples | Wix.com