それは単なる例とチュートリアルのシリーズの一部であると思われました、しかし、それは新しいオープンソース製品として共有する何か良いものであることがわかりました.
それで、あなたが私の前の記事を読んだならば、あなたはこの進歩的なウェブアプリテンプレートの作成に私を連れてきたパターンを見ることができます:

瑞源 / Zuix HTML PWA

応答性、タッチの最初のレイアウトと*プログレッシブWebアプリテンプレート。

Zuix HTML PWA

応答性のレイアウトとモバイルアプリケーションのルック＆フィールと*プログレッシブWebアプリテンプレート.
このテンプレートは、それが最終的にお気に入りと統合できるように、ちょうどHTML、JavaScriptとCSSで構築されています
開発環境とビルドツール.

機能

プログレッシブWebアプリ

応答タッチの最初のレイアウト
ヘッダ/フッター

を崩壊させる

引き出しレイアウト(サイドメニューパネル)

怠惰なロードされたアイテムによる

例のニュースリストアダプター

Zuixを使用してモジュラーおよびコンポーネントベースの構造.JS

ブラウザバンドルで

:単一のファイル内のすべてのリソースをパックし、読み込み速度を高めることができます

PWA灯台スコア98/100

デモウェブサイト

https://zuixjs.github.io/zuix-html-pwa

このテンプレートの使い方

//ソースフォルダには、ウェブサイトの開発版が含まれます.ドキュメントフォルダ
バンドル版.

基本的な使い方

ノードがある場合.JSがインストールされた場合は、クイックセットアップのためには
ソースフォルダ.
開発用の依存関係をnpm installとインストールします.
View on GitHub
小さな画面(電話)またはデスクトップ/タブレット画面の両方でうまく動作する応答レイアウトのプラスと実際のモバイルアプリケーションのように見えます.
Androidと材料デザインに精通している人は、確かにGoogle製品との若干の類似点に気がつきます:

サイドメニューパネル

のDrawerLayout

Collapsingヘッダー/フッターバーは、ページスクロール

と同期しました

ホームページ

のセクションを通して操縦するのに用いられるTabs with ViewPager
ニュース項目オプションを表示するために用いる

コンテクストメニュー
これらのコンポーネントは、相互作用ロジックとビジュアルフィードバック(アニメーション)を実装するだけですので、開発者は任意のUIフレームワークまたはプレーンHTMLとCSSを使用してコンテンツを使用して構造体を埋めることができます.
通常、私のアプローチは後者として、シンプルなHTMLとCSSは、すでにすべての美しいデザインを作成し、自由に自分の創造性と味を表現するために必要な提供しています.
また、このテンプレートは、任意のビルドツールを必要としません.ちょうどHTML、CSS、JavaScriptとお好みのエディタが、それでもそれはかなり良いスコアとプログレッシブWebアプリです.

あなたは、それがここで生きるのを見ることができます:HTML-PWA.

コンテキストメニューコンポーネントについて

このテンプレートを設定している間、私は新しいコンポーネントを書いて、コンテキストメニューであるzKitコレクションに追加する機会がありました.

ZKitコレクション内の他のすべての仲間と同様に、コンテキストメニューは、任意のプロジェクトで簡単に統合できるフレームワークagnosticコンポーネントです.
私はまだドキュメンテーションを加える機会がありませんでした、しかし、私は簡潔にそれを使う方法をここで示します.
1 . HTML文書の先頭部分に以下の行を追加します.

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

24679142コンポーネントを読み込み、メニュー項目のcontext_menuコード<div data-ui-field="menu">の中に入れます.

<div data-ui-load="@lib/components/context_menu"
     data-ui-context="options-menu">
    <div data-ui-field="menu">

    <!-- place here the menu items -->

    </div>
</div>

JavaScriptコードのHTMLオブジェクトへの参照を取得する

var contextMenu;
zuix.context('options-menu', function(){ contextMenu = this; });

または矢印の機能を好む場合

var contextMenu;
zuix.context('options-menu', ctx => contextMenu = ctx );

プログラムを必要に応じてメニューを表示/非表示

// show
contextMenu.show();
// hide
contextMenu.hide()

あなたは既にHTML-PWAウェブサイトでこれを試すことができます.

は、ウェブサイト

を開けます

F 12(ブラウザコンソールを開く)

を押しますcontextMenu .またはzuix.context('news-options-menu').show() .またはdrawerLayout.open()すべてがコンポーネント=であるとき、簡単なpeasy
ので、今休憩して、おそらく泳ぐために行く時間です.すぐに話をしなさい.

NetflixクローンWebアプリケーションテンプレート

{遺伝子}・ Aug 19 ' 18・ 1分読む

#showdev #javascript #webdev #zuix