始まり

書き始めたときzuix.js , 2016年12月に、私の意図は、私がHomeGenieウェブUIのために2012年に書かれた若干のコードから、再配置して、図書館をつくることになっていました.
下の写真では、古い、まだ良い、homegenieウェブUIを見ることができます.

このスマートホームソフトウェアについてのクールなことは、統合されたWebエディタを使用して新しいウィジェットをカスタマイズし、書き込むことができることですdocumentation page ).
それで、この新しいUIライブラリを書く過程で、私はZuixを作成しました.は、Loadableコンテンツ、コンポーネント、怠惰なローディング、テンプレート、テーマ、および大いに多くの概念を導入することによってHomeGenieウィジェットを超えて道を得た.

コンポーネントの作成

例として、現在の日付と時刻を表示する「時計」コンポーネントを作成します.
最初に我々はzuix.min.js 図書館でhead ドキュメントのセクション

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

それから、3つのファイルを作成しますmytime コンポーネント

コンポーネント.CSS

コンポーネント.HTML

コンポーネント.js

コンポーネントを実際にロードするにはindex.html ファイルを追加します.

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

それは、スーパーデュッパー簡単==以下のライブの例を参照してください.
< div >
また、シンプルなコンテンツやテンプレートを分割することができますし、同様の方法でロードされる.js ファイルとdata-ui-include 属性はdata-ui-load .

< divクラス= "グリッチ埋め込みラップ"スタイル=高さ: 450 px ;幅: 100 %;マージン: 1 em auto 1.3 em "
< iframe sandbox ="同じ起源を許可すると、スクリプトがフォームを許可し、ユーザのアクティベーションでトップナビゲーションを許可しますhttps://glitch.com/embed/#!MDLCARD ?previewsize = 100 & amp ;path = index.の上のHTML「ALT =」MDLCard「スタイル=」高さ:100 % ;幅:100 %;ボーダー0マージン: 0パディング: 0 "load ="lazy "/>
< div >

最高級の再利用性

再利用可能性概念はコンポーネントに固有の概念である.だから、ここで新しい何も.しかし、私たちが複製を作成する必要なしでウェブサイトの向こう側から部品、内容とテンプレートを使用して、再利用することができるならば、どうですかp >
< divクラス= "グリッチ埋め込みラップ"スタイル=高さ: 450 px ;幅: 100 %;マージン: 1 em auto 1.3 em "
< iframe sandbox ="同じ起源を許可すると、スクリプトがフォームを許可し、ユーザのアクティベーションでトップナビゲーションを許可しますhttps://glitch.com/embed/#!再利用?previewsize = 100 & amp ;path = index.グリット“スタイル=”高さにHTML“ALT =”リユース幅:100 %;ボーダー0マージン: 0パディング: 0 "load ="lazy "/>
< div >
上記の例をよく見ると、2つの異なるホストに物理的に格納されている2つのコンポーネントをロードしていることがわかります.p >

ブースト性能

< tag >< em >はこのライブラリの組み込み機能で、スクリーンに表示されているときだけコンテンツやコンポーネントを読み込むことでウェブサイトの速度を上げることができますbr/>
大きいデータセットを扱うとき、これは巨大な違いをすることができますp >
< divクラス= "グリッチ埋め込みラップ"スタイル=高さ: 450 px ;幅: 100 %;マージン: 1 em auto 1.3 em "
< iframe sandbox ="同じ起源を許可すると、スクリプトがフォームを許可し、ユーザのアクティベーションでトップナビゲーションを許可しますhttps://glitch.com/embed/#!LazyLoad ?previewsize = 100 & amp ;path = index.グリット"スタイル= "高さに関する"ALT ="LazyLoad幅:100 %;ボーダー0マージン: 0パディング: 0 "load ="lazy "/>
< div >

他の例

< p >さて、それはすでに導入のための多くの情報です、それで、現在、私は更なるか、多分貢献したい人々のためにいくつかの関連を残しますp >
<ウル>

zuix.js

ドキュメントと例によるライブラリウェブサイトp >

zKit

近代的なWebのための準備ができるコンポーネントのコレクションp >

Web Starter Project

< em >ノードに慣れているなら.JS あなたは< em > Zuix Webスターターを評価することができます.これは、以下のような機能を備えています.p >

HGUI

もののインターネットのためのダッシュボードp >

< ull >
一方、何か質問があるか、ちょっと「こんにちは」と言いたいならば、下にコメントを残してくださいp >
次は次を読む
<> P >
< div class ="Lagagchen - chen link "

からのモバイルWebアプリのレイアウト

{遺伝子}・ Jul 22 ' 18・ 2分読む

#showdev #webdev #javascript #zuix

< div >