3

ユーザー向けの統計パネルを開発しています。表示されている画像は、帯域幅の使用統計（1日から、2日からなど）です。フレーム付きのphpのみを使用する予定でしたが、画像とデザインがユーザーの画面サイズに合うように、より動的なデザインを使用したいので、JQueryを使用してユーザーの解像度を要求し、生成しようとしています。 phpで正確な画像。

Javascriptは画面サイズの読み取り（imgsize（））を実行し、値をphpスクリプト（stats_generatemain（tipo））に渡します。phpスクリプトが画像を生成し、Javascriptが画像divコンテナ（#mstats）をリロードして、新しいphpで生成された画像を表示します。

これはそれを行うための良い方法ですか？別の方法でやりますか？

どうもありがとう。

<script>
  $(document).ready(function () {
    $.ajaxSetup({
      cache: false
    });

    function imgsize() {

      var myWidth = screen.availWidth;
      var myHeight = screen.availHeight;
      myRatio = myWidth / myHeight;
      myWidth = myWidth - 504;
      myHeight = myWidth / myRatio;

      var dim = new Array(2);
      dim[0] = myWidth;
      dim[1] = myHeight;
      return dim;
    }

    function mstats_resize_start() {
      var dim = imgsize();
      $('#mstats').width(dim[0]).height(430);
    }

    function stats_generatemain(tipo) { 
        if(tipo==''){tipo=1;}
        else{tipo=parseInt(tipo);}
        var dim = imgsize();
        $.ajax({ 
             url: 'stats_generatemain.php',
             type: 'get',
             data: {imsi: '214290000000003',tipo: tipo, w: dim[0], h: 430},
             beforeSend: function(){
                $("#mstats").hide();
                $('#mloading').show();
             },
             success: function(){
                var href = "./TEMP/trafico-214290000000003-main.jpg?" + Math.random();
                $("#mstats").attr("src", href);
             },
             complete: function(){
                $('#mloading').hide();
                $("#mstats").show();
             }
        });
    }

    stats_generatemain(1);

    $("a.link").live('click', function (e) {
      e.preventDefault();
      var tipo = this.href.split(/=/)[1];
      stats_generatemain(tipo);
    });

    $('li > a').click(function () {
      $('li').removeClass();
      $(this).parent().addClass('active');
    });


    jQuery.event.add(window, "load", mstats_resize_start);

  });
</script>
4

2 に答える 2

0

あなたはこれを考えすぎているのではないかと思います...レスポンシブデザイン/流動的な画像を使用しないのはなぜですか? 次の css を使用するクラスをイメージに適用します。

max-width:100%;

高さは自動計算されます。

優れたレスポンシブ デザイン フレームワークが必要な場合は、Twitter Bootstrapを参照することをお勧めします。物事の設計が苦手な場合は、ブートストラップを使用すると、多くの作業負荷が軽減され、プログラミング側に集中できるようになります。

于 2013-03-09T07:05:11.617 に答える