시작하다

2016년 12월, 내가 작성zuix.js을 시작했을 때, 나의 의도는 내가 2012년에 HomeGenie 웹 UI를 위해 작성한 코드로 라이브러리를 재배치하고 만드는 것이다.
아래 그림에서 당신은 낡은 것을 볼 수 있지만 여전히 좋습니다. HomeGenie 인터넷 사용자 인터페이스.

이 스마트 홈 소프트웨어의 가장 멋진 점은 사용자가 통합된 웹 편집기를 사용하여 새로운 작은 위젯을 사용자 정의하고 작성할 수 있다는 것이다.
그래서 이 새로운 UI 라이브러리를 작성하는 과정에서 저는 최종적으로 zUIx를 만들었습니다.js는 불러올 수 있는 내용, 구성 요소, 지연 불러오기, 템플릿, 테마 등 개념을 도입하여 HomeGenie의 작은 위젯을 뛰어넘었다.

문서 페이지 어셈블리 생성

예를 들어, 현재 날짜와 시간을 표시하는 시계 구성 요소를 만듭니다.
먼저 라이브러리는 문서의 zuix.min.js 섹션에 포함됩니다.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/zuix.min.js"></script>

그리고 head 구성 요소에 대한 3개의 파일을 만듭니다.

구성 요소/내 시간.css

구성 요소/내 시간.html

구성 요소/내 시간.js

마스터 mytime 파일에 구성 요소를 실제로 로드하기 위해 다음 행을 추가했습니다.

<div data-ui-load="components/mytime"></div>

그렇습니다. Super duper easy=) 아래의 실례를 참고하십시오.

마찬가지로 간단한 내용과 템플릿도 유사한 방식으로 분할하고 불러올 수 있으나, index.html 파일이 없고, .js 속성으로 대체data-ui-include

높이: 450px, 너비: 100%, 여백: 1em 자동 1.3em>