Question

作为我更好地了解网络的个人项目的一部分，我想构建一个网络应用程序。

我的想法可能过于复杂，但其中有更多的空间。我想构建一个页面，作为一个MS项目＆＃39;为了财务。它的结构与Project类似，左边是任务列表，右边是Gantt。 Web应用程序不会显示里程碑和任务，而是显示支出的阶段图（可能会在预测和实际之间进行一些比较）。

我可以做所有服务器方面的事情，但我不知道从哪里开始构建html来实现这一目标。我的一些入门问题：

如何在左右窗格之间实现同步垂直滚动？
如何实现可左右移动的可调整大小的中央潜水吧？

我现在熟悉jQuery，所以我想用它来处理java脚本

（事实证明，由于信誉不佳，我不允许发布图片。此处为Google photos链接：https://lh5.googleusercontent.com/-yYVK62UPlJ4/U6MS-_Akk1I/AAAAAAAAATY/KsI-h8RvdTU/w1325-h750-no/IMAG0742+%25281%2529.jpg）

Answer 1

查看这个使用jQuery进行垂直同步滚动和重新调整大小的示例。 jsfiddle（我把jquery脚本放在下面，HTML和CSS示例都在小提琴中）

  $(function(){ 
// set up initial; states pf panels
    $('#panel2').height("75px");
    $('#panel1').height($('#panel2').height());
    $('#panel1inner').height($('#panel1').height());
    $('#panel2inner').height($('#panel2').height());
    $('#panel1').width("49.5%");
    $('#panel1inner').width($('#panel1').width() + 17);
    $('#panel2').width("49.5%");
    $('#panel2inner').width($('#panel2').width() + 17);
//make panels resizable
    $('#panel1').resizable();
//link panels for scrolling
    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    })
//force panels to react to resizing
    $('#panel1').resize(function(){
       var newWidth = $('#container').width() - $('#panel1').width() - 3;
       $('#panel1inner').width($('#panel1').width() + 17);
       $('#panel1inner').height($('#panel1').height());
       $('#panel2').height($('#panel1').height());
       $('#panel2inner').height($('#panel2').height());
       $('#panel2').width(newWidth);
       $('#panel2inner').width(newWidth + 17);
    });
  });

如何创建MS Project样式的Web应用程序

1 个答案: