ホームページ > 記事 > ウェブフロントエンド > フロントエンドフレームワーク - ポップアップウィンドウの調査

フロントエンドフレームワーク - ポップアップウィンドウの調査

大家讲道理オリジナル: 2017-07-15 11:52:272810ブラウズ

私は電力会社で 2 年間働いており、開発されたアプリケーションはすべて H5 アプリケーションに基づいています。 H5 リファレンスは、cordova.js ライブラリに基づいて開発されていますが、さまざまなアウトソーシング企業がアプリケーションを受け取ったとき、どのように開発すればよいのかわかりませんでした。この記事では、主に seajs に基づいて構築されたフロントエンドの使用方法について説明します。ライブラリとブートストラップフレームワーク。

フロントエンドフレームワークは主に4つの点を研究します

1. Webフレームワークの動的ローディング技術の研究

モバイルインターネットにおけるモバイル端末の限られたメモリ、トラフィック、バッテリーリソースを考慮して動的ローディング技術を使用することで、プログラムは複数の小さなファイルに分割され、遅延ローディング技術 (LazyLoading) を使用してオンデマンドローディングを実現し、ユーザーエクスペリエンスを向上させ、モバイル端末でのリソース使用量を削減します。ビジネスとスタイルの観点から見ると、フロントエンド開発者は、JS コードブロックの先頭で必要な JS ライブラリと CSS スタイルを参照するだけで済みます。論理的には、開発者はバックエンドによって提供されるインターフェイスを呼び出して読み取りと表示を行うだけで済みます。このテクノロジーの主な利点には、高い保守性、高速な動的読み込み、優れたフロントエンドパフォーマンスの最適化が含まれます。

モジュラー構築技術の研究フロントエンド担当者によるモバイルアプリケーションプロジェクトの開発に基づいて、モジュラー構築技術を使用して、各ページを複数の機能に分割してセグメンテーション処理を行うことで、両方の機能を迅速に実現しますモバイル端末でのページの取得や、モバイル端末のデバッグ中に関連する問題を迅速に特定します。複数のモジュールを定義して相互に呼び出すことで、モジュール間で競合が発生しないようにするだけでなく、開発者のコーディング効率も向上します。その主な利点は、責任が単一であることと、依存関係が近いことです。

マルチ解像度・マルチサイズ携帯端末インターフェース適応技術の研究

各携帯端末デバイスに対して、

ブートストラップフレームワークに基づき、メディアクエリ機能(Medie Query)を通じて統一インターフェースを設定するスタイルは、ウィンドウ (メタ) 属性の内容を通じてプロポーショナルウィンドウを設定します。これにより、携帯電話モデルの異なる解像度やサイズの端末が適応できない問題が解決され、コードの冗長性と再開発がさらに削減されます。 4.

モバイル端末上のパブリックコンポーネントのカプセル化に関する研究

ブートストラップフレームワークの下でのいくつかのコンポーネントの限定的なカプセル化に基づいて、タイムプラグイン(datatime)、ポップアッププラグを介して-in (ダイアログ)、グラフィックスプラグイン (echarts)、プルダウン更新およびプルアップ読み込みプラグイン (更新)、スライディングプラグイン (スワイパー)、都道府県と都市の選択 (シティピッカー) プラグイン、プロンプト情報プラグイン (UED) およびその他のプラグインはカプセル化され、オンデマンドで呼び出され、さまざまなページを実現するためにロードされます。これにより、フロントエンド開発者の時間が大幅に短縮され、また、コンポーネント呼び出しが実装されます。ユーザーエクスペリエンスを向上させます。

ここでは、プラグインの 1 つであるポップアップウィンドウを取り上げて説明します

最初にレンダリングをお見せしましょう

ポップアップウィンドウ、基本的にすべてのアプリケーションはさまざまな種類のポップアップウィンドウがたくさんあり、コードは非常に複雑です。私もインターネットでこのセットを見つけて、自分で整理してみました。将来的には、共通のコードセットを使用して、簡潔かつシンプルに保つ予定です。

フロントエンド H5 コード

h5 ページは簡潔かつシンプルである必要があり、個別の CSS および JS ロジックコードは許可されません (次の CSS コードはテスト用です)

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    0f3eabac747cdf61a51589c5584ae6e8
    8955b5d433b6cb2d7ba68ca7a2e6ee09
    b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
    8492913265be600fb60cbb94f9489386
    c9ccee2e6ea535a969eb3f532ad9fe89.col-xs-6 {
            padding: 10px 1px;
        }531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    a3d26fddad773596419d66c0738d6f77

        5ee7ff1279557bf9d3442c1fbc9f99d0
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721默认的弹窗65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8success65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07bprimary65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644danger65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092efwarning65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8可设置背景色65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644自定义标题、描述65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644点后回调65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                7b7f438a32e350a4b0de075e3701c07bbox-shadow65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07b无进入动画65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092ef单个按钮65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                a31450e006f06f8a717195c1bfafb650bootstrap弹窗65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                d15026b8666219832a1630ab13015612无标题65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    c353704c8b8ff0531df1112c5633c2ae
        9e8587a87e6ffb3735caf5892f257228这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示16b28748ea4df4d9c2150843fecfba68
    2cacc6d41bbb37262a98f745aa00fbf0
    3f1c4e4b6b16bbbd69b2ee476dc4f83avar basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义）2cacc6d41bbb37262a98f745aa00fbf00a3ba3c2fbc6d9cc3f003f0c2028cc75
    00dc4eb34cf264c27bd9438ee6b3973b2cacc6d41bbb37262a98f745aa00fbf0
    db2b95b9b93e43c57162d16b53b263cc
    8b88c59b03c43ad401f7885b437e24852cacc6d41bbb37262a98f745aa00fbf0
    2d83d03ec17e47ecba30435d234fd99c
    3f1c4e4b6b16bbbd69b2ee476dc4f83aseajs.use("../js/dialogs");2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

コードを表示

上記コードは私の一般的なフレームワークのコードを使用しています。ポップアップウィンドウを使用する場合は、dialog.js、dialog.css、jquery.js、dialogtest.js を直接引用できます

dialogtest.js のコードは次のとおりです

define(function (require) {
    require("bootstrap");//加载bootstrap
    require(&#39;dialog&#39;);//加载弹窗  
    require(&#39;dialogcss&#39;);//加载弹窗  
  
 
    var modal = new Modal({
        title: &#39;测试案例&#39;,
        content: $(&#39;#modal-tpl&#39;).html(),
        width: "90%",
        onOk: function () {
            //操作
            alert("你点击了确定");
        },
        onModalShow: function () {
            //弹窗初始化操作
            
        }
    });
    $(".btn").each(function (index) {
        $(this).on("click", function () {
            if(index==0)
            {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39; });
            }else if(index==1)
            {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39; })
            }
            else if (index == 2) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39; })
            }
            else if (index == 3) {
                $(&#39;body&#39;).dailog({ type: &#39;danger&#39; })
            }
            else if (index == 4) {
                $(&#39;body&#39;).dailog({ type: &#39;warning&#39; })
            }
            else if (index ==5) {
               $(&#39;body&#39;).dailog({ type: &#39;success&#39;, maskBg: &#39;rgba(33,11,22,0.5)&#39; })
            }
            else if (index ==6) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;我是自定义标题&#39;, 
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;
                }, function (ret) {
                    if (ret.index == 0)
                    {
                        alert("你点击了确定按钮");
                    } else
                    {
                        alert("你点击了取消操作");
                    }
                    console.log("信息为："+JSON.stringify(ret));
                })
            } else if (index ==7) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;错误提示&#39;,
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;,
                    isInput: true
                }, function (ret) {
                    console.log(ret);
                    if (ret.index === 0)
                    {
                        alert(&#39;你点击的是第&#39; + ret.index + &#39;个按钮,状态:&#39; + ret.input.status + &#39;;输入的值为:&#39; + ret.input.value)
                    };
                });
            } else if (index == 8) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;, showBoxShadow: true })
            } else if (index ==9) {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39;, showBoxShadow: true, maskBg: &#39;#fff&#39; })
            } else if (index == 10) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, maskBg: &#39;#ccc&#39; })
            } else if (index == 11) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, animateStyle: &#39;none&#39; })
            } else if (index == 12) {
                $(&#39;body&#39;).dailog({
                    type: &#39;warning&#39;, showBoxShadow: true, animateStyle: &#39;none&#39;,
                    bottons: [&#39;确定&#39;], discription: &#39;也许有点问题!&#39;
                })
            }else if(index==13)
            {
                modal.open();
            } else if (index == 14) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;,showBoxShadow: true, animateStyle: &#39;none&#39;,isnobutton:false,
                    bottons: [&#39;关闭&#39;], discription: &#39;也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!&#39;
                });
            }
        })
    })

})

以上がフロントエンドフレームワーク - ポップアップウィンドウの調査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css3を使用してドット効果を実現する例の説明次の記事：css3を使用してドット効果を実現する例の説明

続きを見る

フロントエンド フレームワーク - ポップアップ ウィンドウの調査

関連記事

フロントエンドフレームワーク - ポップアップウィンドウの調査