3

我正在为用户开发一个统计面板，其中显示的图像是带宽使用统计（从一天开始，从 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 回答
0

JQuery 获取屏幕大小和 php 生成图像¿好方法？

从你的主题和标题我说这个答案：

.screenSize{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  visibility:hidden;
  display:none;
 }

这是你的jQuery代码：

$(function(){
   var width=$(".screenSize").width();
   var height=$(".screenSize").height();
 })

并用 php 做你想做的其他事情，你可以用 ajax 发送你的数据并做一些事情

于 2014-06-17T07:29:01.420 回答