2

我需要创建一个使用小部件的网站。我找到了一种方法来创建像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，但它们都没有展示如何通过拖放来调整大小或移动小部件。任何帮助，将不胜感激。

4

1 回答 1

0

这个小插件允许它们被拖动和重新调整大小，并且它们可以“捕捉”到彼此。它们不会捕捉到页面上的“网格”，而是彼此捕捉。 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 ] });
});
于 2014-02-12T18:12:00.193 回答