Question

我需要创建一个适用于小部件的网站。我找到了一种创建像Google IG这样的布局的方法，但我也希望能够调整窗口小部件的大小。窗口小部件应该可以跨越两列，其上面或下面有其他较小的窗口小部件。我想要的一个例子可以在Protopage网站找到。

简而言之，我想：

1. Use widgets
2. Be able to resize widgets in both height and width
3. Add and remove widgets
4. Move widgets

如果我有关于如何创建像Protopage这样的网站的文档，我会想到足够的信息。

我想使用JQuery使用MVC3创建Azure Web角色。 JQuery将是创建小部件最重要的部分，那么是否有一个最适合这个的框架/插件？我已经看到了Isotope和Masonry，但它们都没有显示如何通过拖放来调整大小或移动小部件。任何帮助将不胜感激。

Answer 1

这个小插件允许它们被拖动和放大重新调整大小，他们互相“紧密”。它们不会与页面上的“网格”对齐，而是相互对齐。 https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension演示：http://fiddle.jshell.net/5xB7S/show/light/

更新：如果您不想使用插件，这是从头开始的。不应该太难以从头开始创建它。

<强> http://jsfiddle.net/xv57M/8/

以下是一些代码，请参阅小提琴......

//CSS
#grid table{ position:absolute; width:600px; top:0px; }
#grid table td{ height:150px; width:300px; }

.item { position:absolute; width: 300px; height: 150px; background: rgba(54, 25, 25, .5); }
#item1 { top:10px; }
#item2 { top:160px; }
#item3 { top:310px; }

//JS
$(function() {
    $( "#item1" ).resizable({ grid: 300 });
    $( "#item2" ).resizable({ grid: 300 });
    $( "#item3" ).resizable({ grid: 300 });

    $( "#item1" ).draggable({ grid: [ 300, 150 ] });
    $( "#item2" ).draggable({ grid: [ 300, 150 ] });
    $( "#item3" ).draggable({ grid: [ 300, 150 ] });
});

具有可调整大小的小部件的小部件样式网站，可以比一列宽

1 个答案: