表現する意味を表す-フロントアーキテクチャ

2191 ワード

要求結果、機能説明、注釈提示などにかかわらず、情報の注意機能を軽量に完成させ、現在の操作、ボタン、ラベル、フォーム検証などの結果を説明し、友好度を強化するとともに、フロントアーキテクチャの基本機能として提供する必要がある.表示間の差異をどのように利用し,異なる意味の表現過程を完成させるかは,その機能の微細な処理を体現する.参照コードは,フレームワークがJQueryをベースとし,コントロールがLayerを機能とする.
Tipヒント
Tipヒントは主にページ内の要素が提供するヒント機能に対して、要素自体に基づいて吸着式の設定を行うことができ、同時に注意が必要なときに注意機能を完成することができる.たとえば、指定された操作がアラート情報の表示をトリガーしたり、ページ要素のアラートを固定表示でサポートしたりすることができます.
いくつかの表現として最も軽量級であり、簡単で柔軟な方法で、特定の要素に対して注意クラスのヒントを完成させることができる.しかし、Tip自体の特徴から、注意内容に対して一定の制御があり、ページの幅を占めすぎず、Tip自体の設定に反する機能設定を避けることを提案する.
...
core.tip: function (element, message, direc, color) {
    direc = direc ? ["", "top", "right", "bottom", "left"].indexOf(direc) : 1;
    color = color ? color : '#000000';
    layer.tips(message, element, {tips: [direc ,color]});
},
...


Alertメッセージ
Alertメッセージは主に操作クラスのフィードバック情報にヒント機能を提供し、通常はページの中央に表示して強調表示の役割を果たすことができる.メッセージ・アラートとともに、赤は重要メッセージ、黄色は警告メッセージ、青または緑は一般的なプロンプト・メッセージなど、表示スタイルによって現在の表示内容の重要度を区別できます.異なるスタイルのメッセージ・アラート、およびアラートの内容によって、操作の結果がさらなる処理を完了する必要があるかどうかを説明します.
...
core.info: {typeclass: "alert-info", outtime: 1000},
core.warning: {typeclass: "alert-warning", outtime: 3000},
core.error: {typeclass: "alert-error", outtime: 5000},
...
core.alert: function (type, message) {
    if(!type) type = core.info;
    layer.msg(message, {skin: type.typeclass, time: type.outtime});
},
...


Confirm確認
Confimは確認し、注意すると同時に、対応する応答動作を完了し、次の具体的な操作を完了する必要がある.例えば、確認動作は、メッセージを提示するとともに、確認によって後続の処理を完了する必要があり、そうでなければ次の処理は行われない.
確認アラートの最も一般的なシーンは、確認シーンの名前と似ており、操作に対応する処理を直接完了するのではなく、主に確認の動作を提供します.機能を確認するとともに、提供される操作の異なる機能に応じて、類似選択の処理を完了することもできる.例えば、操作プロセスは、Aトラフィック処理プロセスとBトラフィック処理プロセスの2つの選択を行うことができ、確認情報を提供するとともに、異なるオプションに従って異なるトラフィックを完了することができる.
...
core.confirm: function(content, success, cancel){
    layer.confirm(content, {title: false, closeBtn: false}, function(index){
        success && success();
        layer.close(index);
    }, function(index){
        cancel && cancel();
    });
},
...


JQueryの詳細については、JQuery公式サイトを参照してください.LayUI(Layer)のすべての使用方法については、LayUIの公式サイトを参照してください.