1

クラスタ内の複数のサーバーのステータスを表示するページを作成しています。サーバーが正常に稼働している場合は「ok」を返し、そうでない場合は何らかのエラーを返すステータス ルートを Web サービスに作成しました。API呼び出しがOKを返した場合は緑を表示し、そうでない場合は赤を表示するいくつかのボタン(おそらくより良いオプション?)が必要です。問題の 1 つは、これらの呼び出しが企業のファイアウォール内ではあるものの、クロスドメインになることです。

十分に単純ですが、私はこの分野でほとんど経験のない Web サービス開発者です。私の考えは、ページの読み込み時に各サーバーのステータスルートを呼び出してスタイルを設定することでした。正直なところ、どこから始めればよいかわからないと言って恥ずかしいです。私が見つけたすべてのチュートリアルには、「クリック」するためのパズルのピースが欠けているようです。

したがって、私の究極の質問は、次の基準を満たす既知のチュートリアルがあるかどうかです。

  • html5/CSS3 対応 (できればモバイル表示用のレスポンシブ デザイン)
  • 必要に応じて jquery/angularjs ライブラリ
  • クロスドメイン API 呼び出しがサポートされています
  • API呼び出し結果に基づくボタン（描画）。

これが、質問の応答本文でストレートな html と js を表示するだけで十分簡単であれば、それも問題ありません。他の部分を追加した唯一の理由は、これが統計グラフと管理機能を統合する、私が構築しているダッシュボードの小さな部分に過ぎないからです。したがって、後で統合するよりも、これらの機能から始めるのが理想的です。

前もって感謝します。この質問が十分に具体的でない場合はお知らせください。編集します。

4

4 に答える 4

8

簡単な jQuery ベースのソリューションは必ずしも必要ではありませんが、純粋な CSS / JS ソリューションを使用することもオプションです。色の変更やクラスの追加に jQuery を使用しているだけの場合は、おそらく間違っています。

達成したいことを達成する最も一般的な方法は、サーバーへのリモート呼び出しを行うことです。これには XHR を使用できます。XHR の応答と状態に応じて、いつでもビューを更新できます。私はプログレスバーの例を提供しています。あなたが望むものを達成するために、同様のアプローチに従うことができます。

たとえば、進行状況バーを作成しています。HTMLを次のように：

  <div class="progress_bar">
      <div class="progress"></div>
  </div>

CSS部分が含まれています。

   .progress_bar{
      display:inline-block;
      position:relative;
      margin:20px;
      width:100%; 
      height:40px;
      max-width:100px; /* For Computers */
   }
   .progress_bar .progress{
      height:100%;
      position:absolute;
      left:0px;
      top:0px;
      width:0%;
   }
   @media(max-width:320px){
      max-width:100%;
      margin:10px;
   }
   .progress_bar::before{
        display:block; text-align:center;
        content:"Loading";
        color:black;
        font-size:16px;
    }
    .progress_bar.completed::before{
        content:"Finished";
    }
    .progress_bar.error::before{
        content:"Error Occured";
    }

これで、JS API 呼び出しを行うことができます (ファイルをダウンロードしているとします)。

.progress 要素の幅を変更するだけです。

function ProgressBar(elem){
   var bar = elem.getElementsByClassName('progress')[0];
   this.setProgress = function(x){
       bar.style.width = x + '%';
   }
   this.completed = function(){
       elem.classList.add("completed");
   }
   this.errored = function(){
       elem.classList.add("errored");
   }
}

オブジェクトを作成し、新しい XHR2.0 API を使用して JS 部分を制御できますが、クラスを追加するなどしてこれを行うと、js の変更またはロジックによって CSS クラスが適用されるため、レスポンシブ デザインを実現できます。このクラスには、メディア クエリを使用して複数のルールを定義できます。お役に立てれば。

XHR2.0 の詳細については、ここで読むことができますhttp://www.html5rocks.com/en/tutorials/file/xhr2/

于 2013-06-14T10:48:20.603 に答える
1

このリンクは、レスポンシブ デザインを理解するのに十分です: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

jquery/angularjs ライブラリは開発のスピードアップに役立ちます。

クロスドメイン API 呼び出しがサポートされています <-- 通常は問題ありません

API呼び出し結果に基づくボタン（描画）<--結果が変化したときにcssクラスを変更します

于 2013-06-13T02:53:48.453 に答える